今天就跟大家聊聊有關(guān)怎么在css 中使用background-clip實(shí)現(xiàn)透明邊框，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。
為城陽等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計制作服務(wù)，及城陽網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為成都網(wǎng)站建設(shè)、成都網(wǎng)站制作、城陽網(wǎng)站設(shè)計，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會得到認(rèn)可，從而選擇與我們長期合作。這樣，我們也可以走得更遠(yuǎn)！
重慶分公司
重慶分公司
.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 這個屬性的初始值是 border-box，意味著背景會被元素的 border box（邊框的外沿框）裁切掉。如果不希望背景侵入邊框所在的范圍，我們要做的就是把它的值設(shè)為 padding-box，這樣瀏覽器就會用內(nèi)邊距的外沿來把背景裁切掉
效果
不加background-clip: padding-box; 效果
可以看出背景圖被半透明邊框透出來了
加了之后,背景在邊框部位就被裁減了
看完上述內(nèi)容，你們對怎么在css 中使用background-clip實(shí)現(xiàn)透明邊框有進(jìn)一步的了解嗎？如果還想了解更多知識或者相關(guān)內(nèi)容，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。
