css設(shè)置邊框陰影的語法是什么

這篇文章主要介紹了css設(shè)置邊框陰影的語法是什么的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇css設(shè)置邊框陰影的語法是什么文章都會(huì)有所收獲，下面我們一起來看看吧。

邊框陰影（box-shadow）的基本語法：

box-shadow：color  h-shadow  v-shadow blur spread  inset；

• color：陰影顏色 ------------ 可選

• h-shadow ：水平偏移量 ----必選

• v-shadow：垂直偏移量-----必選

• blur：模糊距離 -------------可選

• spread：陰影尺寸---------- 可選

• inset：內(nèi)陰影 --------------可選

示例：

css代碼：

.div1{
            width:200px;
            height:200px;
            margin:20px auto;
            line-height: 200px;
            text-align: center;
            background: cadetblue;
            border:2px solid darkslategray;
            box-shadow: darkgrey 10px 10px 30px 5px ;//邊框陰影
        }

HTML代碼：

<div class="div1">邊框陰影示例</div>

效果如下：

box-shadow陰影說明：

屬性說明（順序依次對(duì)應(yīng)）：

陰影的X軸(可以使用負(fù)值) 陰影的Y軸(可以使用負(fù)值) 陰影模糊值（大小） 陰影的顏色

默認(rèn)是外陰影

內(nèi)陰影：inset 可以設(shè)置成內(nèi)部陰影

注意：

此屬性使用于盒模型 如(div,p,h1,h2,h3,h4,h5,h6等) 不是用來設(shè)置文字陰影 ,因?yàn)槭切聦傩?，為了兼容各主流瀏覽器并支持這些主瀏覽器的較低版本，基于主流瀏覽器上使用box-shadow屬性時(shí)，我們需要將屬性的名稱寫成：

谷歌：-webkit-box-shadow的形式

Firefox：-moz-box-shadow的形式

opera： -o-box-shadow

IE>9： -ms-box-shadow

關(guān)于“css設(shè)置邊框陰影的語法是什么”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“css設(shè)置邊框陰影的語法是什么”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。