<td id="i8bb2"><rt id="i8bb2"></rt></td>

CSS3 text-shadow實現文字陰影效果

2024-07-11 08:35:21

字體：大中小

來源：轉載

供稿：網友

CSS3設置文字陰影效果，對文字字體設置陰影效果，采用text-shadow樣式，本來在CSS2版本中也有此屬性，但在CSS3中文字陰影text-shadow再次被應用，豐富文字排版布局美化效果。

CSS3單詞與語法

CSS3單詞： text-shadow

語法結構：text-shadow: 5px 2px 6px black;

5px 代表著：陰影距離文字左5px顯示
2px 代表著：陰影距離文字上2px顯示
6px 代表著：陰影大小范圍
black 代表著：陰影顏色為黑色

例子：

XML/HTML Code復制內容到剪貼板

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
    .All-orange {
        font: normal 14px 微軟雅黑,sans-serif;
        max-width: auto;
        max-height: auto;
        background-color: #f8f8f8;
        padding: 30px 30px 20px 30px;
        color: #666;
        border-radius: 5px
    }
    .All-orange h1 {
        font: normal 32px 微軟雅黑,sans-serif;
        padding: 20px 0 20px 40px;
        display: block;
        margin: -30px -30px 10px -30px;
        color: #FFF;
        background-color: #0CF;
        border-radius: 5px;
        text-shadow:5px 2px 6px #000;
        box-shadow: 5px 2px 6px #000;
    }
    .All-orange img {
        float: left
    }