CSS3_文本樣式

時間 2019-11-08

標籤 css3 css 文本樣式欄目 CSS 简体版

原文原文鏈接

1. 文字陰影 text-shadowcss

使用：

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 作 浮雕文字 html

使用：

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

3. text-shadow 作文字模糊web

使用：

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

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

4. 文本描邊 -webkit-text-stroke ide

使用：

#box:hover {
     /* 文本描邊：描邊區域的寬度  顏色 */
     -webkit-text-stroke:2px yellowgreen ;    
}

5. 文字排版 url

使用：

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

    // direction: ltr;    // 默認方向，從左到右
    direction: rtl; // 從右到左 }

6. 文字背景圖片 -webkit-background-clip spa

使用：

#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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。