【CSS3】關於box-shadow的擴充套件半徑
阿新 • • 發佈:2019-02-05
這個引數很少用到,大部分情況下都省略了,但如果不理解,心裡不舒服,所以還是說一下吧。
box-shadow: X軸偏移量 Y軸偏移量 [陰影模糊半徑] [陰影擴充套件半徑] [陰影顏色] [投影方式];
先說一句,模糊半徑就是模糊程度,值越大越模糊,大家都懂吧。
有人說擴充套件半徑有點類似於在陰影上增加了一個padding的東西,我倒覺得,如果參照物是陰影的話,我倒覺得擴充套件半徑類似於增加了一個margin的東西,不過這個東西見仁見智吧,大家理解就好。
通過程式是最好理解的。因為是研究擴充套件半徑,所以把模糊半徑設為0px.
(1)沒有設定擴充套件半徑:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>boxshadow</title> <style> .boxshadow-outset{ width:100px; height:100px; box-shadow:8px 8px 0px 0px #666; } </style> </head> <body> <h2>外陰影</h2> <div class="boxshadow-outset"> </div> </body> </html>
(2)擴充套件半徑等於x軸偏移量時(也等於y軸偏移量)
<!doctype html> <html> <head> <meta charset="utf-8"> <title>boxshadow</title> <style> .boxshadow-outset{ width:100px; height:100px; box-shadow:8px 8px 0px 8px #666; background-color:red; } </style> </head> <body> <h2>外陰影</h2> <div class="boxshadow-outset"> </div> </body> </html>
(3)擴充套件半徑大x軸偏移量時(也大y軸偏移量)
<!doctype html> <html> <head> <meta charset="utf-8"> <title>boxshadow</title> <style> .boxshadow-outset{ width:100px; height:100px; box-shadow:8px 8px 0px 12px #666; background-color:red; } </style> </head> <body> <h2>外陰影</h2> <div class="boxshadow-outset"> </div> </body> </html>
(4)擴充套件半徑等於負x軸偏移量時(也等於負y軸偏移量)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>boxshadow</title>
<style>
.boxshadow-outset{
width:100px;
height:100px;
box-shadow:8px 8px 0px -8px #666;
background-color:red;
}
</style>
</head>
<body>
<h2>外陰影</h2>
<div class="boxshadow-outset">
</div>
</body>
</html>
(5)擴充套件半徑為負數,但大於負x軸偏移量時(也大於負y軸偏移量)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>boxshadow</title>
<style>
.boxshadow-outset{
width:100px;
height:100px;
box-shadow:8px 8px 0px -5px #666;
background-color:red;
}
</style>
</head>
<body>
<h2>外陰影</h2>
<div class="boxshadow-outset">
</div>
</body>
</html>
(6)擴充套件半徑為負數,但小於負x軸偏移量時(也小於負y軸偏移量)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>boxshadow</title>
<style>
.boxshadow-outset{
width:100px;
height:100px;
box-shadow:8px 8px 0px -45px #666;
background-color:red;
}
</style>
</head>
<body>
<h2>外陰影</h2>
<div class="boxshadow-outset">
</div>
</body>
</html>
大家應該都明白了吧:擴充套件陰影是以陰影的外邊界向外擴充套件(為正數)或者向內抵消原來的陰影(為負數),當負數絕對值大於等於某方向的陰影偏移量時,該方向的陰影消失。
注意:深刻理解x偏移量的意思,如果為正,向右移動的距離。深刻理解擴充套件陰影的意思。下面這個例子非常棒:
/*雲*/
.cloudy {
background: #60768D;
height: 1rem;
width: 1rem;
border-radius: 50%;
box-shadow: 1rem 0.2rem 0 -0.1rem;
position: absolute;
left: .5rem;
top: 1.8rem;
z-index: 5;
}