box-shadow 模糊半徑與擴充套件半徑

admin發表於2018-07-21
套件

關於box-shadow的基本用法參閱CSS box-shadow一章節。

此屬性用來設定元素的陰影效果，語法結構如下:

[CSS] 純文字檢視 複製程式碼
box-shadow:h-shadow v-shadow blur spread color inset;

下面通過程式碼例項介紹一下blur（模糊半徑）和spread（擴充套件半徑）引數的作用。

一.模糊半徑:

blur引數規定模糊半徑；W3C文件並沒有具體規定使用哪種方式實現模糊功能。

程式碼例項:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>螞蟻部落</title> 
<style>
.box{
  margin: 40px 0;
}
.ant{
  background:red;
  width: 100px;
  height: 100px;
}
.one{
  box-shadow: 110px 0 0 green;
}
.two{
  box-shadow: 110px 0 20px green;
}
.three{
  box-shadow: 110px 0 40px green;
}
</style>
</head>
<body>
  <div class="box">
    <div class="ant one"></div>
  </div>
  <div class="box">
    <div class="ant two"></div>
  </div>
  <div class="box">
    <div class="ant three"></div>
  </div>
</body>
</html>

上面程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201807/21/011543m7xmf79e9afzfes2.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

分析如下:

（1）.當沒有設定blur時，元素尺寸與陰影尺寸是一樣的。

（2）.將blur設定為20px或者40px的時候，陰影的尺寸明顯得到擴充套件。

（3）.模糊區域是，從沒有設定blur時陰影的邊緣，向兩端擴充套件；在這個區域實現垂直或者水平類似於漸變的模糊效果（上面程式碼就是類似由內到外漸變）。第二個設定blur值為20px，那麼模糊區域就是以未設定blur時陰影的邊緣為中線分別向兩側延伸10px，於是紅色元素和綠色陰影恰好銜接相鄰，各個方位均是如此。

對於向內的inset陰影效果也是同樣的原理，看如下程式碼:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>螞蟻部落</title> 
<style>
.box{
  margin: 20px 0;
}
.ant{
  background:red;
  width: 100px;
  height: 100px;
}
.one{
  box-shadow: 0 0 0 20px green inset;
}
.two{
  box-shadow: 0 0 10px 20px green inset;
}
</style>
</head>
<body>
  <div class="box">
    <div class="ant one"></div>
  </div>
  <div class="box">
    <div class="ant two"></div>
  </div>
</body>
</html>

執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201807/21/011618vjgi3udizzxjgugz.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

模糊區域也是沿著上述類似的沒有模糊效果時的邊緣向兩端延伸產生。

二.擴充套件半徑：

spread引數比較好理解，它就是直接增加陰影的尺寸。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>螞蟻部落</title> 
<style>
.box{
  margin: 40px 0;
}
.ant{
  background:red;
  width: 100px;
  height: 100px;
}
.one{
  box-shadow: 130px 0 0 10px green;
}
.two{
  box-shadow: 130px 0 20px 10px green;
}
.three{
  box-shadow: 130px 0 40px 10px green;
}
</style>
</head>
<body>
  <div class="box">
    <div class="ant one"></div>
  </div>
  <div class="box">
    <div class="ant two"></div>
  </div>
  <div class="box">
    <div class="ant three"></div>
  </div>
</body>
</html>

上面程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201807/21/011634ki9vi2e7brk795gr.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

spread引數直接擴充套件陰影的邊緣，然後blur再以這個新邊緣為標準進行前面介紹的模糊效果。

上面程式碼中，紅色元素和綠色陰影之間的空隙尺寸是20px（陰影向外擴充套件了10px），再施加40px的模糊效果後，紅色元素和綠色陰影能夠恰好銜接在一起。

相關文章