CSS3_文本样式

1. 文字阴影 text-shadow

使用：

text-shadow: 水平方向偏移量垂直方向偏移量模糊程度颜色;

#box {
     text-shadow: 10px 10px 3px deeppink;    // 1个阴影
}

多个阴影加一个逗号写第二个阴影的样式

#box {
     text-shadow: 10px 10px 3px deeppink, 20px 20px 6px blue;    // 2个阴影
}

2. text-shadow 做 浮雕文字

使用：

#box:hover {
    color: #fff;    //文字为 白色
    text-shadow: 2px 2px 5px #000;    // 黑色描边
}

3. text-shadow 做文字模糊

使用：

#box:hover {
    color: transparent;    // 文字设置为透明
    text-shadow: 0px 0px 80px rgba(0, 0, 0, 0.3);    

    // 初探 CSS3 过渡
transition: 1s；
}

4. 文本描边 -webkit-text-stroke

使用：

#box:hover {
     /* 文本描边：描边区域的宽度  颜色 */
     -webkit-text-stroke:2px yellowgreen ;    
}

5. 文字排版

使用：

#box:hover {
    unicode-bidi: bidi-override;    // 必须配合使用    

    // direction: ltr;    // 默认方向，从左到右
    direction: rtl;    // 从右到左
}

6. 文字背景图片 -webkit-background-clip

使用：

#box:hover {
    background-image: url(./img/bg.jpg);
    background-repeat: no-repeat;

    /* 背景裁剪 */
    -webkit-background-clip: text;    // 沿着文字呈现
    
    color: rgba(255, 0, 0, 0.3);    // 让文本颜色透明，即可看到文字背景图
    background-position: -12px -60px;    // 调背景图片的位置
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>CSS3 文字样式</title>

        <style type="text/css">
            body {
                width: 100%;
                color: #000;
                background: #96b377;
                font: 14px Helvetica, Arial, sans-serif;
            }
            
            body>div {
                width: 500px;
                margin: 60px auto;
                
                font-size: 27px;
                color: #3465c3;
                text-align: center;
                line-height: 54px;
                background-color: #eee;
            }
            
            #double_shadow:hover {
                text-shadow: 10px 10px 3px rgba(255, 0, 0, 0.3), 20px 20px 6px rgba(0, 0, 255, 0.5);
            }
            
            #embossed_text:hover {
                color: #eee;
                text-shadow: 0px 0px 6px #000;
            }
            
            #fuzzy_text:hover {
                color: transparent;
                transition: 1s;
                text-shadow: 0px 0px 30px rgba(43, 2, 2, 0.8);
            }
            
            #stroke_text:hover {
                font-size: 32px;
                font-weight: 700;
                -webkit-text-stroke: 1px red;
            }
            
            #rtl_text:hover {
                unicode-bidi: bidi-override;
                direction: rtl;
            }
            
            #bg_img_text:hover {
                font-size: 48px;
                font-weight: 700;
                
                background-image: url(./img/RocketRaccoon.jpg);
                -webkit-background-clip: text;
                color: transparent;
                background-repeat: no-repeat;
                background-position: -725px -877px;
            }
        </style>
    </head>
    
    <body>
        
        <div id="text_shaow"> 
            <span id="double_shadow">文字双阴影</span><br/>
            
            <span id="embossed_text">浮雕文字</span><br/>
            
            <span id="fuzzy_text">文字模糊</span><br/>
        </div>
        
        <div id="text_border"> 
            <span id="stroke_text">文字描边</span>
        </div>
        
        <div id="text_direction"> 
            <span id="rtl_text">文字排版</span>
        </div>
        
        <div id="text_bg_img"> 
            <span id="bg_img_text">文字背景</span>
        </div>

    </body>
</html>

相关推荐