當前位置:編程學習大全網 - 網站源碼 - CSS3 利用“box-shadow”屬性結合“outline”制作“邊框內圓角”

CSS3 利用“box-shadow”屬性結合“outline”制作“邊框內圓角”

box-shadow:給元素塊添加周邊陰影效果。

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

*還有另壹種情況: box-shadow: 0 2px 2px #FECC84

當我們在色值前只寫了三個數值的情況下,則第三個值是 blur (模糊距離)。

利用陰影屬性,也可以實現外邊框的效果:

當我們再為它添加壹個 outline (輪廓),就會發現它實現了-邊框內圓角:

* 關於為什麽會這樣:

outline的描邊並不會跟著圓角走,因此顯示為直角。

所以把這兩者疊加到壹起,box-shadow 則剛好填補描邊與容器圓角之間的空隙。

*值得註意的是,box-shadow 陰影的大小值並不壹定等於描邊的寬度,它和圓角的大小有關系。所以只需要壹個足夠填補空隙的大小就可以了。事實上,制定壹個等於描邊寬度的值在某些瀏覽器中可能會渲染異常,所以,最好是稍小的值。

參考書籍: Lea Verou 《CSS揭秘》

  • 上一篇:咪咕盒子mg100配置參數
  • 下一篇:obv指標詳解及實戰用法視頻
  • copyright 2024編程學習大全網