場景一：
實作半透明邊框：
由于CSS樣式的默認行為，背景色的渲染范圍是 content+padding+border，
半透明邊框被主調色影響, 實作的效果為
解決方案：
使用background-clip 屬性規定背景的繪制區域,使得繪制區域僅限制在content+padding，
Div { border:10px solid rgba(0,0,0,.5); background: lightblue; background-clip: padding-box; }
補充： background-clip 不兼容IE6-8, Opera10
場景二：
實作多重邊框：
方案1： 使用box-shadow來生成多重投影
代碼與效果如下：
div { background:#c3e6f4; box-shadow:0 0 0 15px #b7dae6,0 0 0 30px #cce2ea; }
方案2：盒子邊框結合描邊屬性(outline)
特點： 只能實作兩重邊框，更加靈活，能使用虛線等效果
代碼與效果如下：
div { border: 6px dashed #c3f4ec; outline: 10px solid #d9faf6; background-clip: padding-box; }
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/106450.html
標籤：Html/Css
下一篇：CSS3 新增選擇器