【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;
}