css實(shí)現(xiàn)陰影效果的方法

發(fā)布時(shí)間：2021-04-14 10:35:59 來(lái)源：億速云閱讀：302 作者：小新欄目：web開發(fā)

這篇文章主要介紹了css實(shí)現(xiàn)陰影效果的方法，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

方法：1、使用text-shadow屬性，語(yǔ)法“text-shadow: 水平陰影垂直陰影模糊距離顏色;”；2、使用box-shadow屬性，語(yǔ)法“box-shadow: 水平陰影垂直陰影模糊距離陰影大小顏色 inset;”。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

方法1：使用text-shadow屬性

text-shadow屬性用于設(shè)置帶陰影的文本；可設(shè)置陰影的像素長(zhǎng)度、寬度和模糊的距離以及陰影的顏色。

語(yǔ)法：

text-shadow: h-shadow v-shadow blur color;

屬性值：

h-shadow：設(shè)置水平陰影的位置，允許負(fù)值。
v-shadow：設(shè)置垂直陰影的位置，允許負(fù)值。
blur：設(shè)置模糊的距離。
color：設(shè)置陰影的顏色。

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>css設(shè)置陰影效果</title> 
        <style> 
            h2 { 
                color: red; 
                text-shadow: 3px 5px 5px #656B79; 
            }
        </style> 
    </head> 
    <body> 
        <h2>文本陰影！</h2>
    </body> 
</html>

css實(shí)現(xiàn)陰影效果的方法

方法2：使用box-shadow屬性

box-shadow屬性可以將陰影應(yīng)用于文本框，可設(shè)置中陰影的像素長(zhǎng)度，寬度和模糊的距離以及陰影的顏色。

語(yǔ)法：

box-shadow: h-shadow v-shadow blur spread color inset;

屬性值：

h-shadow：設(shè)置水平陰影的位置，允許負(fù)值；必需值，不可省略。
v-shadow：設(shè)置垂直陰影的位置，允許負(fù)值；必需值，不可省略。
blur：設(shè)置模糊距離；可選值，可省略。
spread：設(shè)置陰影的大?。豢蛇x值，可省略。
color：設(shè)置陰影的顏色；可選值，可省略。
inset：設(shè)置從外層的陰影（開始時(shí)）改變陰影內(nèi)側(cè)陰影；可選值，可省略。

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>css設(shè)置陰影效果</title>
        <style>
            .demo{
                width: 400px;
                height: 300px;
                margin: 50px auto;
            }
            .demo img{
                 box-shadow: 10px 10px 10px rgba(0,0,0,.5);
                 /*考慮瀏覽器兼容性*/
                 -moz-box-shadow: 10px 10px 10px rgba(0,0,0,.5);
                 -webkit-box-shadow: 10px 10px 10px rgba(0,0,0,.5);
            }
        </style>
    </head>
    <body>
        <div class="demo">
            <img src="img/1.jpg"/>
        </div>
    </body>
</html>

css實(shí)現(xiàn)陰影效果的方法

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“css實(shí)現(xiàn)陰影效果的方法”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!

向AI問一下細(xì)節(jié)

css實(shí)現(xiàn)陰影效果的方法

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽