CSS中的box-shadow詳解

box-shadow詳解
屬性定義及使用說明
box-shadow屬性可以設置一個或多個下拉陰影的框。
語法
box-shadow: h-shadow v-shadow blur spread color inset;
注意:
boxShadow
屬性把一個或多個下拉陰影添加到框上。該屬性是一個用逗號分隔陰影的列表,每個陰影由 2-4 個長度值、一個可選的顏色值和一個可選的 inset 關鍵字來規(guī)定。省略長度的值是 0。
屬性 | 描述 |
---|---|
h-shadow | 必需的。水平陰影的位置。允許負值 |
v-shadow | 必需的。垂直陰影的位置。允許負值 |
blur | 可選。模糊距離 |
spread | 可選。陰影的大小 |
color | 可選。陰影的顏色。 |
inset | 可選。從外層的陰影(開始時)改變陰影內(nèi)側(cè)陰影 |
屬性詳解
div
默認設置以下css
樣式:
.container { width: 200px; height: 200px; background-color: red; }
h-shadow
它是必需的,代表水平方向的陰影。值為正數(shù)時,陰影在元素的右側(cè);值為負數(shù)時,陰影在元素的左側(cè)。
<div class="container container1"></div> <div class="container container2"></div>
.container1 { box-shadow: 20px 20px; } .container2 { box-shadow: -20px 20px; }
效果如下:
v-shadow
它是必需的,代表垂直方向的陰影。值為正數(shù)時,陰影在元素的下側(cè);值為負數(shù)時,陰影在元素的上側(cè)。
.container1 { box-shadow: 20px 20px; } .container2 { box-shadow: 20px -20px; }
blur
它是可選的,代表陰影的模糊半徑。值越大,越模糊。
.container1 { box-shadow: 20px 20px 20px; } .container2 { box-shadow: 20px 20px 40px; }
spread
它是可選的,代表陰影的大?。〝U散半徑)。值為正數(shù)時,陰影在原來的基礎上放大;值為負數(shù)時,陰影在原來的基礎上縮小。
.container1 { box-shadow: 20px 20px 0; } .container2 { box-shadow: 20px 20px 0 -10px; } .container3 { box-shadow: 20px 20px 0 10px; }
color
它是可選的,代表陰影的顏色。不設置顏色時默認黑色。
.container1 { box-shadow: 20px 20px 0 0; } .container2 { box-shadow: 20px 20px 0 0 yellow; }
inset
它是可選的,代表陰影的投影方式。如果設置了則從外層的陰影(開始時)改變陰影內(nèi)側(cè)陰影。
.container1 { box-shadow: 20px 20px; } .container2 { box-shadow: 20px 20px inset; }
幾個通過box-shadow
實現(xiàn)的效果:
按鈕的按壓效果
核心代碼:
<button class="button">點我</button>
.button { display: inline-block; padding: 15px 35px; font-size: 24px; cursor: pointer; text-align: center; text-decoration: none; outline: none; color: #fff; background-color: #4caf50; border: none; border-radius: 15px; box-shadow: 0 9px #999; } .button:hover { background-color: #3e8e41; } .button:active { background-color: #3e8e41; box-shadow: 0 5px #666; transform: translateY(4px); }
按鈕的另一種按壓效果
核心代碼:
<button class="button">點我</button>
.button { width: 120px; height: 60px; background: #e9ecef; color: #333; border-radius: 12px; box-shadow: 7px 7px 12px rgba(0, 0, 0, 0.4), -7px -7px 12px rgba(255, 255, 255, 0.9); text-align: center; line-height: 60px; border: none; font-size: 24px; } .button:active { box-shadow: 0 0 0 rgba(0, 0, 0, 0.4), 0 0 0 rgba(255, 255, 255, 0.9), inset -7px -7px 12px rgba(255, 255, 255, 0.9), inset 7px 7px 12px rgba(0, 0, 0, 0.4); }
“立體效果”
核心代碼:
<div class="container"></div>
.container { position: relative; width: 600px; height: 100px; background: hsl(48, 100%, 50%); border-radius: 20px; margin: 200px auto; } .container::before { content: ""; position: absolute; top: 50%; left: 5%; right: 5%; bottom: 0; border-radius: 10px; background: hsl(48, 100%, 20%); transform: translate(0, -15%) rotate(-4deg); transform-origin: center center; box-shadow: 0 0 20px 15px hsl(48, 100%, 20%); z-index: -1; }
創(chuàng)建多個自身
核心代碼:
<div class="container"></div>
.container { width: 400px; height: 200px; background-color: gray; position: relative; } .container::after { position: absolute; right: 35px; top: 10px; content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 10px 0 0 #fff, 20px 0 0 #fff; }
到此這篇關于CSS重的box-shadow詳解的文章就介紹到這了,更多相關css box-shadow內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章,希望大家以后多多支持腳本之家!
相關文章
CSS3 新特性 box-shadow 陰影效果、圓角border-radius效果實現(xiàn)
CSS3的border-radius屬性可以輕松制作圓角效果,支持一至四個值來分別定義四個角的圓角大小,一個值時所有角圓角相同,兩個值時對角線上的角相同,本文給大家介紹CSS3 新特性 b2024-10-17詳解CSS3 邊框樣式(包含border-radius、border-image與box-shadow)
這篇文章主要介紹了CSS3 邊框樣式(包含border-radius、border-image與box-shadow)的相關知識,本文給大家介紹的非常詳細,,需要的朋友可以參考下2024-08-29css3 使用box-shadow實現(xiàn)浮雕風格按鈕效果
這篇文章主要介紹了css3 使用box-shadow實現(xiàn)浮雕風格按鈕效果,本文通過實例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-08-19詳解CSS3 filter:drop-shadow濾鏡與box-shadow區(qū)別與應用
這篇文章主要介紹了詳解CSS3 filter:drop-shadow濾鏡與box-shadow區(qū)別與應用,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友2020-08-24- 這篇文章主要介紹了CSS3 box-shadow屬性實例詳解,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-06-19
css3 box-shadow陰影(外陰影與外發(fā)光)圖示講解
這篇文章主要介紹了css3 box-shadow陰影(外陰影與外發(fā)光),通過五個測試通過圖片展示了陰影的不同位置不同效果,需要的朋友可以參考下2017-08-11詳解CSS3陰影 box-shadow的使用和技巧總結(jié)
這篇文章主要介紹了詳解CSS3陰影 box-shadow的使用和技巧總結(jié) ,具有一定的參考價值,有需要的可以了解一下。2016-12-03詳解CSS3的box-shadow屬性制作邊框陰影效果的方法
這篇文章主要介紹了CSS3的box-shadow屬性制作邊框陰影效果的方法,box-shadow屬性還是十分強大的,能設定陰影的水平或垂直位置,以及陰影的顏色和尺寸等,需要的朋友可以參考下2016-05-10