box-shadow單邊陰影的實現(xiàn)

發(fā)布時間：2023-05-15 16:28:22 作者：三雷科技

box-shadow以由逗號分隔的列表來描述一個或多個陰影效果，本文就詳細的介紹一下box-shadow單邊陰影的實現(xiàn)，感興趣的可以了解一下

box-shadow 參數(shù)說明

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

h-shadow（X軸）必需

第一個長度值指明了陰影水平方向的偏移，即陰影在 x 軸的位置。值為正數(shù)時，陰影在元素的右側(cè)；值為負數(shù)時，陰影在元素的左側(cè)。

v-shadow（Y軸）必需

第二個長度值指明了陰影豎直方向的偏移，即陰影在 y 軸的位置。值為正數(shù)時，陰影在元素的下方；值為負數(shù)時，陰影在元素的上方。

blur（模糊距離）可選

第三個長度值代表了陰影的模糊半徑，舉例來說，就是你在設(shè)計軟件中使用高斯模糊濾波器帶來的效果。值為 0 意味著該陰影是固態(tài)而鋒利的，完全完全沒有模糊效果。blur 值越大，陰影則更不鋒利而更朦朧 / 模糊。負值是不合法的，會被修正成 0。

spread（陰影范圍）可選

第四個長度代表了陰影擴展半徑，其值可以是正負值，如果值為正，則整個陰影都延展擴大，反之值為負值是，則縮小。

color （陰影的顏色）可選

inset （內(nèi)部陰影）可選

box-shadow 四邊陰影單獨設(shè)置

<html>
    <style>
        .box-shadow-top{
            box-shadow: 0 -1px; /* 上外陰影，y坐標向上偏移，x不偏移 */
        }
        .box-shadow-bottom{
            box-shadow: 0 1px; /* 下外陰影 */
        }
        .box-shadow-left{
            box-shadow: -1px 0; /* 左外陰影 */
        }
        .box-shadow-right{
            box-shadow: 1px 0 ; /* 右外陰影 */
        }
        .box-shadow-top-inset{
            box-shadow:inset 0 1px; /* 上內(nèi)陰影 */
        }
        .box-shadow-bottom-inset{
            box-shadow:inset 0 -1px; /* 下內(nèi)陰影 */
        }
        .box-shadow-left-inset{
            box-shadow:inset 1px 0; /* 左內(nèi)陰影 */
        }
        .box-shadow-right-inset{
            box-shadow:inset -1px 0 ; /* 右內(nèi)陰影 */
        }
        .left{
            display:inline-block;
            background-color: antiquewhite;
            width: 100px;
            height: 100px;
        }
        div{    
            margin: 5px ;
            line-height: 100px;
            text-align: center;
        }
    </style>
    <body>
        <div>
            <div class="box-shadow-top left">
                上外陰影
            </div>
            <div class="box-shadow-bottom left">
                下外陰影
            </div>
            <div class="box-shadow-left left">
                左外陰影
            </div>
            <div class="box-shadow-right left">
                右外陰影
            </div>
        </div>
        <div>
            <div class="box-shadow-top-inset left">
                上內(nèi)陰影
            </div>
            <div class="box-shadow-bottom-inset left">
                下內(nèi)陰影
            </div>
            <div class="box-shadow-left-inset left">
                左內(nèi)陰影
            </div>
            <div class="box-shadow-right-inset left">
                右內(nèi)陰影
            </div>
        </div>
    </body>
</html>

設(shè)置效果如下：

陰影的顏色通常是使用純色，當然也可以使用漸變色。

到此這篇關(guān)于box-shadow單邊陰影的實現(xiàn)的文章就介紹到這了,更多相關(guān)box-shadow單邊陰影內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

Tag：box-shadow 單邊陰影

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

box-shadow單邊陰影的實現(xiàn)

相關(guān)文章

最新評論

文章分類

大家感興趣的內(nèi)容

最近更新的內(nèi)容