html如何設(shè)置邊框陰影

本篇內(nèi)容介紹了“html如何設(shè)置邊框陰影”的有關(guān)知識，在實(shí)際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

邊框陰影（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陰影說明：

屬性說明（順序依次對應(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

“html如何設(shè)置邊框陰影”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！