半透明邊框
- background-clip
background-clip: border-box|padding-box|content-box; 預設是border-box。該屬性規定背景的繪製區域,通俗點講就是,能背景可以延伸的範圍,三個屬性值從字面上不難理解,分別是可延伸到,border,padding,content。
- RGBA/HSLA
分別為RGB/HSL,加上透明度A,值為0~1。
將背景繪製範圍設為padding-box,邊框設定為透明色,即可實現效果。 實現方案:
.translucent-borders{
width: 300px;
height: 300px;
padding:10px;
border:10px solid hsla(0,0%,100%,.5);
background-color: #fff;
background-clip:padding-box;
}
複製程式碼
多重邊框
上圖多邊框可使用 box-shadow 實現,有一個缺點就是隻能設定實線。需要注意使用box-shadow製作‘假’邊框,不會影響佈局,而且也不會受到 box-sizing 屬性的影響,所以在實際使用中,需要注意為這些‘假’邊框留出位置,可以使用margin或者padding配合inset(向內繪製)來解決。
box-shadow支援逗號分隔語法,我們 可以建立任意數量的投影。
實現方案:
.multiple-borders{
width: 200px;
height: 200px;
padding:10px;
box-sizing: border-box;
/*border:10px solid red;*/
border-radius: 10px;
margin:50px;
background: pink;
box-shadow:
0 0 0 10px red,
0 0 0 10px blue,
0 0 0 20px green ,
0 0 0 30px purple,
0 2px 15px 40px rgba(0,0,0,.6);
}
複製程式碼
如上圖,如果只是需要兩層邊框,當然我們還可以使用outline來實現, 因為outline 並不能 接受用逗號分隔的多個值。所以只可以實現兩層邊框。
我們可以outline-offset 屬性來控制它跟元素邊緣之間的間距,這個屬性甚至可以接受負值,來實現上圖的縫邊效果。
實現方案:
.outline-borders{
width: 200px;
height: 200px;
padding:25px;
background: yellowgreen;
outline: 2px dashed #fff;
outline-offset: -15px;
}
複製程式碼
注意:outline有個bug,邊框不一定會貼合border-radius產生的圓角,如下圖,所以如果是有圓角,需要配合box-shadow來填補間隙。
靈活的背景定位
很多時候,我們想針對容器某個角對背景圖片做偏移定位。 在 CSS 2.1 中,我們只能指定距離左上角的偏移量,或者乾脆完全靠齊到其 他三個角。但是,我們有時希望圖片和容器的邊角之間能留出一定的空隙, (類似內邊距的效果),如上圖(距離右邊20px,下邊20px),這時候我們就可以使用css3中提供的以下方案。- background-position 的擴充套件語法方案
在 CSS 背景與邊框(第三版)(w3.org/TR/css3-bac…)中, background-position 屬性已經得到擴充套件,它允許我們指定背景圖片距離任 意角的偏移量,只要我們在偏移量前面指定關鍵字。
實現方案:
.background-position{
width: 200px;
height: 200px;
padding: 10px;
color:#FFF;
background: url(http://csssecrets.io/images/code-pirate.svg) no-repeat blue;
background-position: right 20px bottom 20px;
}
複製程式碼
- background-origin 方案
在給背景圖片設定距離某個角的偏移量時,如果是上圖這種情況:偏移量與容器的內邊距一致。如果採用上面提到的 background-position 的擴充套件語法方案,程式碼不夠 DRY,我們可以使用background-origin,改變背景的相對定位,讓它自動地跟著我們設定的內邊距走,不用另外宣告偏移量的值。
注:如果背景影象的 background-attachment 屬性為 "fixed",則該屬性沒有效果。
實現方案:
.background-origin{
margin: 20px;
width: 200px;
height: 200px;
padding: 10px;
border:10px solid red;
color:#FFF;
background: url(http://csssecrets.io/images/code-pirate.svg) right bottom no-repeat blue;
background-origin: content-box;
}
複製程式碼
- calc() 方案
請不要忘記在 calc() 函式 內部的 - 和 + 運算子的兩側各加 一個空白符,否則會產生解析錯誤!
該方案就是使用calc()直接計算出距離左上角的位置,設定給background-position即可。
實現方案:
.calc{
width: 200px;
height: 200px;
padding: 10px;
color:#fff;
background: url(http://csssecrets.io/images/code-pirate.svg) calc(100% - 10px) calc(100% - 10px) no-repeat blue;
}
複製程式碼
邊框內圓角
上圖可通過上文提到的 outline無法貼合圓角配合box-shadow實現。box-shadow的擴充套件半徑為圓角半徑的一半即可。
實現方案:
.inner-rounding{
width: 200px;
height: 200px;
padding:10px;
background: hotpink;
border-radius: 10px;
outline:10px solid purple;
box-shadow: 0 0 0 5px purple;
margin: 30px;
}
複製程式碼
條紋背景
實現條紋背景主要使用的就是 linear-gradient()這個漸變屬性。
根據css3規範,如果某個色標的位置值比整個列表中在它之前的色標的位置都要小,則該色標的位置值會被設定為他前面所有色標位置值的最大值。只需修改前面的值。
給出實現方案:
/*水平條紋 */
.horizontal-stripes{
width: 200px;
height: 200px;
background: linear-gradient(red 50%, green 0);
background-size: 100% 30px;
}
/* 垂直條紋 */
.vertical-stripes{
width: 200px;
height: 200px;
background: linear-gradient(90deg, red 50%, green 0);
background-size: 30px 100%;
}
/* 只能45度 */
.diagonal-stripes{
width: 200px;
height: 200px;
background: linear-gradient(45deg, red 25%, green 0,green 50%, red 0,red 75%,green 0);
/* 記得乘以根號2 */
background-size: 42px 42px;
}
/* 任意度數 */
.better-diagonal-stripes{
width: 200px;
height: 200px;
background: repeating-linear-gradient(60deg,red, red 15px, green 0, green 30px );
background: repeating-linear-gradient(30deg,pink 0 15px, blue 0 30px, green 0 45px); /* 簡寫 */
}
/* 同色繫條紋 */
.subtle-stripes{
width: 200px;
height: 200px;
background-color: blue;
background-image: repeating-linear-gradient(45deg, hsla(0,0%,100%,.3) 0 15px, transparent 0 30px);
}
複製程式碼
複雜的背景圖案
實現方案:
.Polka{
width: 200px;
height: 200px;
background: #655;
background-image:
radial-gradient(pink 20%, transparent 0),
radial-gradient(pink 20%,transparent 0);
background-size: 30px 30px;
background-position: 0 0, 15px 15px;
}
複製程式碼
實現方案:
.blueprint{
width: 200px;
height: 200px;
background-color: skyblue;
background-image:
linear-gradient(#fff 2px, transparent 0),
linear-gradient(90deg,#fff 2px, transparent 0),
linear-gradient(#fff 1px, transparent 0),
linear-gradient(90deg,#fff 1px, transparent 0);
background-size:60px 60px,60px 60px,20px 20px,20px 20px;
}
複製程式碼
連續的影象邊框
實現方案:
.continuous-image-borders{
width: 400px;
height: 200px;
border:20px solid transparent;
padding:10px;
background: linear-gradient(#fff,#fff) padding-box, url(http://csssecrets.io/images/stone-art.jpg) border-box;
background-size: cover;
}
複製程式碼
實現方案:
.vintage-envelope{
width: 300px;
height: 200px;
padding:10px;
border:10px solid transparent;
background: linear-gradient(#fff,#fff) padding-box, repeating-linear-gradient(-45deg,red 0 15px, transparent 0 30px,blue 0 45px, transparent 0 60px) border-box;
}
複製程式碼
如果本文有幫到你,不妨給點個贊?,我會更加有動力創作!