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