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

專注于為中小企業(yè)提供成都網(wǎng)站設(shè)計、做網(wǎng)站服務(wù),電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)正陽免費做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了數(shù)千家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實現(xiàn)規(guī)模擴充和轉(zhuǎn)變。

邊框陰影（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軸(可以使用負值) 陰影的Y軸(可以使用負值) 陰影模糊值（大?。?陰影的顏色

默認是外陰影

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

注意：

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

谷歌：-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)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！

本文題目：html如何設(shè)置邊框陰影
網(wǎng)站地址：http://chinadenli.net/article4/jhhjie.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供營銷型網(wǎng)站建設(shè)、Google、企業(yè)建站、網(wǎng)站排名、商城網(wǎng)站、軟件開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)