今天就跟大家聊聊有關(guān)怎么在css 中使用background-clip實(shí)現(xiàn)透明邊框，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。
重慶分公司
重慶分公司
.border {
width: 300px;
height: 300px;
background: url("https://waiqin.oss-cn-shenzhen.aliyuncs.com/jxb-vip-ts/activitys/activitys15677540269589timg.jpg");
background-size: cover;
margin-left: 100px;
border: 10px solid rgba(255,255,255,.6);
background-clip: padding-box;
}background-clip: padding-box; 重點(diǎn)代碼
background-clip 這個(gè)屬性的初始值是 border-box，意味著背景會(huì)被元素的 border box（邊框的外沿框）裁切掉。如果不希望背景侵入邊框所在的范圍，我們要做的就是把它的值設(shè)為 padding-box，這樣瀏覽器就會(huì)用內(nèi)邊距的外沿來(lái)把背景裁切掉
效果
不加background-clip: padding-box; 效果
可以看出背景圖被半透明邊框透出來(lái)了
加了之后,背景在邊框部位就被裁減了
看完上述內(nèi)容，你們對(duì)怎么在css 中使用background-clip實(shí)現(xiàn)透明邊框有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。
