css3實作陰影屬性有哪些-前端問答-PHP中文網

css3實作陰影屬性有哪些

青灯夜游

發布： 2022-02-25 18:20:46

原創

13874 人瀏覽過

css3實作陰影屬性有：1、text-shadow屬性，可實現文字陰影效果；2、box-shadow屬性，可實現邊框陰影效果；3、filter屬性，需要和drop-shadow()函數一起使用，可為影像設定一個陰影效果。

css3實作陰影屬性有哪些

本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

css3實作陰影屬性

#1、text-shadow屬性---實作文字陰影效果

text-shadow屬性用於設定帶有陰影的文字；可設定陰影的像素長度、寬度和模糊的距離以及陰影的顏色。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>css设置文本阴影效果</title> 
        <style> 
            h1 { 
                color: red; 
                text-shadow: 3px 5px 5px #656B79; 
            }
        </style> 
    </head> 
    <body> 
        <h1>文本阴影！</h1>
    </body> 
</html>

登入後複製

css3實作陰影屬性有哪些

2、box-shadow屬性--實作邊框陰影效果

box-shadow屬性可以將陰影套用到文本框，可設定中陰影的像素長度，寬度和模糊的距離以及陰影的顏色。

box-shadow可以為元素添加陰影，支援添加一個或多個。

box-shadow: X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色 投影方式;

登入後複製

參數：

css3實作陰影屬性有哪些

注意：inset 可以寫在參數的第一個或最後一個，其它位置是無效的。

陰影模糊半徑：

此參數可選，值只能是為正值，如果值為0時，表示陰影不具有模糊效果，值越大陰影的邊緣就越模糊。

css程式碼：

#box{
     width:50px;
     height:50px;
     background:#fff;
     box-shadow:4px 4px 15px #666;
 }

登入後複製

效果：

css3實作陰影屬性有哪些

#陰影擴充半徑：

##此參數可選，值可以是正負值，如果值為正數，整個陰影都會延展擴大，反之值為負值時，則縮小。

css程式碼：

#box{
     width:50px;
     height:50px;
     background:#fff;
     box-shadow:4px 4px 15px -3px #666;
}

登入後複製

效果：

css3實作陰影屬性有哪些

X軸偏移量和Y軸偏移量值可以設定為負數

X軸偏移量為負數：

#box{
    width:50px;
    height:50px;
    background:#fff;
    box-shadow:-5px 5px 5px #666;
}

登入後複製

效果：

css3實作陰影屬性有哪些

Y軸偏移量為負數：

#box{
    width:50px;
    height:50px;
    background:#fff;
    box-shadow:5px -5px 5px #666;
}

登入後複製

效果：

css3實作陰影屬性有哪些

外陰影：

#box{
     width:50px;
     height:50px;
     background:green;
     box-shadow:5px 4px 10px #666;
}

登入後複製

效果：

內陰影：

#box{
     width:50px;
     height:50px;
     background:#fff;
     box-shadow:5px 4px 10px #666 inset;
}

登入後複製

效果：

新增多個陰影：

#box{
     width:50px;
     height:50px;
     background:#fff;
     box-shadow:5px 4px 10px #666 inset,
                3px 3px 5px pink,
                6px 4px 2px green;
}

登入後複製

效果：

css3實作陰影屬性有哪些

3、filter 屬性

filter 屬性定義了元素(通常是 css3實作陰影屬性有哪些

)的可視效果，當和drop-shadow()函數一起使用，可為影像設定陰影效果。

filter:drop-shadow(h-shadow v-shadow blur spread color);

登入後複製

陰影是合成在影像下面，可以有模糊度的，可以以特定顏色畫出的遮罩圖的偏移版本。函數接受(在CSS3背景定義)類型的值，除了"inset"關鍵字是不允許的。此函數與現有的box-shadow box-shadow屬性很相似；不同之處在於，透過濾鏡，有些瀏覽器為了更好的效能會提供硬體加速。參數如下：

h-shadow v-shadow (必須)
這是設定陰影偏移量的兩個值. 設定水平方向距離. 負值會使陰影出現在元素左邊. 設定垂直距離.負值會使陰影出現在元素上方。看可能的單位.
如果兩個值都是0, 則陰影出現在元素正後面(如果設定了 and/or < ;spread-radius>，會有模糊效果).
(可選)
這是第三個code>值. 值越大，越模糊，則陰影會變得更大更淡.不允許負值若未設定，預設是0 (則陰影的邊界很銳利).
(可選)
#這是第四值. 正值會使陰影擴張變大，負值會是陰影縮小.若未設定，預設是0 (陰影會與元素一樣大小).
#注意: Webkit, 以及一些其他瀏覽器不支援第四個長度，如果加了也不會渲染。
(可選)
查看该值可能的关键字和标记。若未设定，颜色值基于浏览器。在Gecko (Firefox), Presto (Opera)和Trident (Internet Explorer)中，会应用colorcolor属性的值。另外, 如果颜色值省略，WebKit中阴影是透明的。

<!DOCTYPE html>
<html>
<head>
<style>
img {
    -webkit-filter: drop-shadow(8px 8px 10px red); /* Chrome, Safari, Opera */
    filter: drop-shadow(8px 8px 10px red);
}
</style>
</head>
<body>

<p>给图像设置一个阴影效果:</p>

<img src="pineapple.jpg" alt="Pineapple" width="300"    style="max-width:90%">

</body>
</html>

登入後複製

css3實作陰影屬性有哪些