常用CSS样式总结

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>border-radius</title>

        <!-- 外框常用样式 -->
        <style>
            /* 引入服务器端的字体（慕课网字体为例） */
            ?{
      
      
                font-family: "MOOC_Font";
                src: url("http://www.imooc.com/Amaranth-BoldItalic.otf");
            }

            .box{
      
      
                /* 宽 */
                width: 100%; 

                /* 高 */
                height: 60px;

                /* 背景 */
                background: #ffffff;

                /* 圆角 */
                border-radius:100px;

                font-size: 42px;

                /* 设置字体 */
                font: bold 30px/100% "微软雅黑";

                /* 超出直接截断CSS3 */
                text-overflow:clip | ellipsis;  
                overflow:hidden; 
                white-space:nowrap;

                /* 超出则使用省略号代替 */
                text-overflow:ellipsis; 
                overflow:hidden; 
                white-space:nowrap;

                /* 使用服务器端字体 */
                font-size:58px;
                font-family: "MOOC_Font";

                /* 设置文字阴影 */
                text-shadow: 2px 2px 0 rgb(128, 128, 128);

                /* 虚线框 */
                border:4px dashed #000; 

                /* 字体加粗  normal 或 bold*/
                font-weight:bold; 

                /* 外阴影：右下 */
                box-shadow:4px 4px 6px #5b5b5b; 

                /* 外阴影：左下 */
                box-shadow:-4px 4px 6px #666;

                /* 外阴影：左上 */
                box-shadow:4px -4px 6px #5b5b5b;

                /* 外阴影：由上 */
                box-shadow:-4px -4px 6px #5b5b5b; 

                /* 内阴影：和外阴影冲突 */
                box-shadow:4px 4px 6px #d80000 inset;

                /* 多阴影 */
                box-shadow:4px 2px 6px #f00, -4px -2px 6px #000, 0px 12px 5px #250032 inset;
                
                /* 边框应用图片 */
                background:url(http://soface.top:8080/source/Public/OfficialPicture/ZH007/Soface202208141130161002.jpg) 0px 20px no-repeat;
                
                /* 使用RGBA颜色 */
                background-color:rgba(255, 55, 0, 0.5);

                /* 线性渐变 正方向：left、right、top、bottom、斜方向：left top*/
                background-image:linear-gradient(to left top, red, orange,yellow,green,blue,indigo,violet);
            }
        </style>
    </head>
    <body>
        <div class="box">
            
        </div>
    </body>
</html>
猜你喜欢
