溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
今天就跟大家聊聊有關怎么在css 中使用background-clip實現透明邊框，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。
<div class="border"></div>
.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; 重點代碼
background-clip 這個屬性的初始值是 border-box，意味著背景會被元素的 border box（邊框的外沿框）裁切掉。如果不希望背景侵入邊框所在的范圍，我們要做的就是把它的值設為 padding-box，這樣瀏覽器就會用內邊距的外沿來把背景裁切掉
效果
不加background-clip: padding-box; 效果
可以看出背景圖被半透明邊框透出來了
加了之后,背景在邊框部位就被裁減了
看完上述內容，你們對怎么在css 中使用background-clip實現透明邊框有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注億速云行業資訊頻道，感謝大家的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
