css 透明邊框background-clip妙用
發(fā)布時間：2019-12-25 16:18:00 作者：流年朝朝 
我要評論
我要評論這篇文章主要介紹了css 透明邊框background-clip妙用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
本篇文章主要介紹了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，這樣瀏覽器就會用內(nèi)邊距的外沿來把背景裁切掉
效果
不加background-clip: padding-box; 效果
可以看出背景圖被半透明邊框透出來了
加了之后,背景在邊框部位就被裁減了
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了一文教你玩轉(zhuǎn)CSS border(邊框),本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-02-19
這篇文章主要介紹了CSS 奇思妙想邊框動畫效果的實現(xiàn),本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-01-18
這篇文章主要介紹了CSS3 按鈕邊框動畫的實現(xiàn)，幫助大家更好的理解和使用CSS3，美化自身網(wǎng)頁，感興趣的朋友可以了解下2020-11-12
這篇文章主要介紹了CSS3 實現(xiàn)發(fā)光邊框特效，幫助大家更好的理解和制作CSS3特效，美化自身網(wǎng)頁，感興趣的朋友可以了解下2020-11-11
兩款純CSS3鼠標經(jīng)過按鈕邊框動畫特效是一款純CSS3實現(xiàn)的邊框按鈕特效，鼠標經(jīng)過或者懸停的時候顯示邊框動畫效果。2020-11-09
這篇文章主要介紹了一篇文章帶你學習CSS3圖片邊框,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-11-04
css3多種邊框懸停按鈕填色動畫特效是一款簡單的長方形邊框按鈕，鼠標移入各種遮罩變色動畫特效。本腳本為css3+jquery特效腳本，喜歡大家喜歡2020-08-13
這篇文章主要介紹了CSS3實現(xiàn)缺角矩形，折角矩形以及缺角邊框，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來2019-12-20
這篇文章主要介紹了CSS邊框長度控制功能的實現(xiàn),代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-11-27
本文分兩種場景給大家介紹CSS實現(xiàn)半透明邊框與多重邊框效果，感興趣的朋友跟隨小編一起看看吧2019-11-13
