国产视频app在前端 html 頁面的設計中,有個別需要向訪客突出顯示的元素時,可以加上一些陰影的效果,讓它的辨識度更高,讓訪客可以一眼發現它存在。關于 html 元素的陰影效果的設置,可以使用 CSS3 中的屬性 box-shadow ,下面飛鳥慕魚博客就來和大家說一說,關于此屬性的用法。

CSS3 box-shadow 屬性詳解

box-shadow:屬性可以對 html 元素設置一個或多個下拉陰影的框。

語法:

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

參數:

h-shadow:必需,水平陰影的位置,可以為負值

国产视频appv-shadow:必需,垂直陰影的位置,可以為負值

国产视频appblur:可選。模糊距離

spread:可選。陰影的大小

color:可選。陰影的顏色

国产视频appinset:可選。從外層的陰影或內側陰影

html div 外部陰影效果

html代碼:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>
       .div {
            width:100px;
            height:100px;
            line-height: 100px;
            /*這里設置的陰影*/
            box-shadow: 0px 3px 14px 0px #aaa;
            border:0;
            margin:300px auto;
            background-color: pink;
            font-size: 12px;
            text-align: center;
       }
    </style>
</head>
<body>
    <div>飛鳥慕魚博客</div>
</body>
</html>

html div 陰影效果如下圖

html div 外部陰影效果

DIV外部陰影效果

html div 內部陰影效果

html代碼:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>
       .div {
            width:100px;
            height:100px;
            line-height: 100px;
            /*這里設置的內部陰影為紅色*/
            box-shadow: inset 0px 3px 14px 0px #f91111;
            border:0;
            margin:300px auto;
            background-color: pink;
            font-size: 12px;
            text-align: center;
       }
    </style>
</head>
<body>
    <div>內部陰影</div>
</body>
</html>

国产视频apphtml div 內部陰影效果如下圖:

html div 內部陰影效果

DIV內部陰影效果

html 圖片陰影效果

html代碼:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>
        img{
            box-shadow: 1px 8px 14px 0px #aaa;
            border:0;
       }
    </style>
</head>
<body>
    <img src="2006.jpg" />
</body>
</html>

html img 陰影效果如下圖:

html圖片外部陰影效果

圖片外部陰影效果

box-shadow 屬性設置技巧

如果單純的從代碼層面,設置  box-shadow 屬性的參數感覺是有點困難的,但是我們可以借助瀏覽器的控制臺來設置  box-shadow 屬性,并且效果可以實實現實。

谷歌瀏覽器,F12,然后審核要設置陰影的元素,并找到它的CSS樣式屬性

国产视频app1、找到 box-shadow 屬性:

QQ截圖20191216143923.jpg

2、點擊屬性值前面的小方塊,如下圖,就可以自己設置啦

QQ截圖20191216144023.jpg