CSS小技巧---半透明边框
生活随笔
收集整理的這篇文章主要介紹了
CSS小技巧---半透明边框
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
問：如何制作一個半透明的邊框，顯示父級元素的背景？
答：其關(guān)鍵時使用background-clip屬性
background-clip默認(rèn)為border-box，即元素背景會延伸到邊框下，此時設(shè)置半透明邊框，顯示的是元素自身的背景
將其設(shè)置為padding-box或者content-box后，元素自身的背景不會延伸到邊框下，此時半透明邊框顯示的是父級元素的背景
看下面動圖效果，一目了然
說明：box-shadow實現(xiàn)的邊框可以跟隨border-radius，不會出現(xiàn)outline那樣的情況
總結(jié)
以上是生活随笔為你收集整理的CSS小技巧---半透明边框的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 前端学习（1894）vue之电商管理系统
- 下一篇： html中半透明效果,CSS半透明效果的