亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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ù)時，陰影在元素的右側；值為負數(shù)時，陰影在元素的左側。

v-shadow（Y軸）必需

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

blur（模糊距離）可選

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

spread（陰影范圍）可選

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

color （陰影的顏色） 可選

inset （內部陰影） 可選

box-shadow 四邊陰影單獨設置

<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; /* 上內陰影 */
        }
        .box-shadow-bottom-inset{
            box-shadow:inset 0 -1px; /* 下內陰影 */
        }
        .box-shadow-left-inset{
            box-shadow:inset 1px 0; /* 左內陰影 */
        }
        .box-shadow-right-inset{
            box-shadow:inset -1px 0 ; /* 右內陰影 */
        }
        .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">
                上內陰影
            </div>
            <div class="box-shadow-bottom-inset left">
                下內陰影
            </div>
            <div class="box-shadow-left-inset left">
                左內陰影
            </div>
            <div class="box-shadow-right-inset left">
                右內陰影
            </div>
        </div>
    </body>
</html>

設置效果如下：

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

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

相關文章

最新評論