1.半透明邊框
問題原因：背景會擴(kuò)展到邊框border下
解決方案：把背景限制在padding-box中
background-clip: padding-box;
Paste_Image.png
2.多重邊框
box-shadow方案
Paste_Image.png
div {
width: 100px;
height: 60px;
margin: 25px;
background: yellowgreen;
box-shadow: 0 0 0 10px #655,
0 0 0 15px deeppink,
0 2px 5px 15px rgba(0,0,0,.6);
}
注意：這里的邊框是向外擴(kuò)展的外邊框灿意，不會響應(yīng)鼠標(biāo)事件，加入屬性insert可以解決這個問題
Paste_Image.png
outline 方案
background: yellow;
border: 10px solid #655;
outline: 5px solid deeppink;
注意：只適用于雙層邊框的效果缤剧；不一定能產(chǎn)生適應(yīng)border-radius屬性的圓角。
3.背景的靈活定位
background-position 方案
div {
background: url(http://csssecrets.io/images/code-pirate.svg)
no-repeat bottom right #58a;
background-position: right 20px bottom 10px;
/* Styling */
max-width: 10em;
min-height: 5em;
padding: 10px;
color: white;
font: 100%/1 sans-serif;
}
注意：提供回退方案汗销，使得在不支持background-position的瀏覽器中圖像在右下角抵窒。
background: url(http://csssecrets.io/images/code-pirate.svg)
no-repeat bottom right #58a;
background-origin 方案
正常的background-position是以padding-box為準(zhǔn)的，要排除padding-box 的影響可以使用background-origin 屬性李皇。
background-origin: content-box;
div {
background: url(http://csssecrets.io/images/code-pirate.svg)
no-repeat bottom right #58a;
background-origin: content-box;
/* Styling */
max-width: 10em;
min-height: 5em;
padding: 10px; //改變padding的值，背景的位置隨之變化掉房，固定在content-box內(nèi)
color: white;
font: 100%/1 sans-serif;
}
calc() 方案
采用左上角思維，用calc()函數(shù)來確定位置卓囚，100%偏移量就靠右，100%-20px就是距離右側(cè)邊界20px;
div {
background: url(http://csssecrets.io/images/code-pirate.svg)
no-repeat bottom right #58a;
background-position: calc(100% - 20px) calc(100% - 10px);
/* Styling */
max-width: 10em;
min-height: 5em;
padding: 10px;
color: white;
font: 100%/1 sans-serif;
}
注意：這個方案不會隨padding的變化而變化粥烁，背景固定在padding box 內(nèi)蝇棉。
4.邊框內(nèi)圓角
效果：邊框內(nèi)顯示圓角讨阻，邊框外部仍然是直角
解決方案：box-shadow和outline配合使用篡殷。
注意：box-shadow的寬度最小值，可以直接取border-radius的一半
div {
outline: .6em solid #655;
box-shadow: 0 0 0 .4em #655; /* todo calculate max of this */
max-width: 10em;
border-radius: .8em;
padding: 1em;
margin: 1em;
background: tan;
font: 100%/1.5 sans-serif;
}
Paste_Image.png
5.條紋背景
問題：用css直接創(chuàng)建條紋背景
解決方案：利用漸變色的色標(biāo)位置搀绣，當(dāng)兩色色標(biāo)位置重合時，漸變效果消失链患，變成實色條紋
水平條紋
兩色條紋
background: linear-gradient(#fb3 50%, #58a 0);
background-size: 100% 30px;
注意：第二個色標(biāo)位置本來應(yīng)該是50%瓶您，為了避免每次都修改兩個參數(shù)麻捻，用到規(guī)范：當(dāng)?shù)诙€色標(biāo)位置設(shè)置為0呀袱，那么它的位置就會調(diào)整為前一個色標(biāo)的位置值
Paste_Image.png
三色條紋
background: linear-gradient(#fb3 33.3%, #58a 0，#58a 66.6%, yellowgreen 0);
background-size: 100% 45px;
垂直條紋
background: linear-gradient(to right, #fb3 50%, #58a 0); //添加to right 屬性
background-size: 30px 100%; //顛倒值夜赵，左右，上下
Paste_Image.png
兩色斜向條紋
background: linear-gradient(45deg
#fb3 25%, #58a 0,
#58a 50%, #fb3 0,
#fb3 75%, #58a 0);
backgtound-size: 42.4px 42.4px
更加簡潔的斜向條紋方案
background: repeating-linear-gradient(60deg,
#fb3, #fb3 15px,
#58a 0, #58a 30px);//repeating-linear-gradient屬性
height: 100%;
設(shè)置同色系條紋
方法：設(shè)置最深的顏色為背景色摊腋，疊加半透明白色條紋來產(chǎn)生淺色條紋
background: #58a;
background-image: repeating-linear-gradient(30deg,
hsla(0,0%,100%,.1), hsla(0,0%,100%,.1) 15px,
transparent 0, transparent 30px);
height: 100vh;
Paste_Image.png
6.復(fù)雜的背景圖案
CSS3 圖案庫lea.verou.me/css3patterns
SVG 圖案庫philbit.com/svgpatterns
網(wǎng)格
思路：把水平和垂直的條紋進(jìn)行疊加
方格條紋：
background: white;
background-image: linear-gradient(90deg, rgba(200,0,0,.5) 50%,transparent 0),
linear-gradient(rgba(200,0,0,.5) 50%, transparent 0);
background-size: 30px 30px;
可維護(hù)嘁傀、合理的方案，可多種網(wǎng)格疊加
background: #58a;
background-image: linear-gradient(white 2px, transparent 0),
linear-gradient(90deg, white 2px, transparent 0),
linear-gradient(hsla(0,0%,100%,.3) 1px, transparent 0),
linear-gradient(90deg, hsla(0,0%,100%,.3) 1px, transparent 0);
background-size: 50px 50px, 50px 50px,
10px 10px, 10px 10px;
波點
background: #655;
background-image: radial-gradient(tan 20%, transparent 0),
radial-gradient(tan 20%, transparent 0);
background-size: 30px 30px;
background-position: 0 0, 15px 15px;
棋盤
background: #eee;
background-image:
linear-gradient(45deg, #bbb 25%, transparent 0),
linear-gradient(45deg, transparent 75%, #bbb 0),
linear-gradient(45deg, #bbb 25%, transparent 0),
linear-gradient(45deg, transparent 75%, #bbb 0);
background-position:0 0,15px 15px,15px 15px,30px 30px;
background-size: 30px 30px;
優(yōu)化
background: #eee;
background-image:
linear-gradient(45deg, rgba(0,0,0,.5) 25%, transparent 0,transparent 75%,rgba(0,0,0,.5) 0),
linear-gradient(45deg, rgba(0,0,0,.5) 25%, transparent 0,transparent 75%,rgba(0,0,0,.5) 0);
background-position:0 0,15px 15px;
background-size: 30px 30px;
7.隨機(jī)背景
解決方法：通過質(zhì)數(shù)來增加隨機(jī)性橙凳。又稱為“蟬原則”笑撞，可用在需要生成隨機(jī)情況的場合岛啸。
background: hsl(20, 40%, 90%);
background-image:
linear-gradient(90deg, #fb3 11px, transparent 0),
linear-gradient(90deg, #ab4 23px, transparent 0),
linear-gradient(90deg, #655 41px, transparent 0);
background-size: 83px 100%, 61px 100%, 41px 100%;
Paste_Image.png
8.連續(xù)的圖像邊框
border-image：工作原理娃殖，九宮格伸縮法，不適合
思路：在背景圖片上再加上一層純白色的實色背景
圖片邊框背景
padding: 1em;
border: 1em solid transparent;
background: linear-gradient(white,white),
url(stone-art.jpg);//這里是邊框背景圖片地址
background-size: cover;
background-clip: padding-box, border-box;
background-origin: border-box;
簡化代碼
border: 1em solid transparent;
background: linear-gradient(white, white) padding-box,
url(http://csssecrets.io/images/stone-art.jpg) border-box 0 / cover;
信封邊框
用background疊加
div {
padding: 1em;
border: 1em solid transparent;
background: linear-gradient(white, white) padding-box,
repeating-linear-gradient(-45deg, red 0, red 12.5%, transparent 0, transparent 25%,
#58a 0, #58a 37.5%, transparent 0, transparent 50%) 0 / 6em 6em;
max-width: 20em;
font: 100%/1.6 Baskerville, Palatino, serif;
}
用border-image屬性
div {
padding: 1em;
border: 1em solid transparent;
border-image:16
repeating-linear-gradient(-45deg, red 0, red 1em, transparent 0, transparent 2em,
#58a 0, #58a 3em, transparent 0, transparent 4em);
max-width: 20em;
font: 100%/1.6 Baskerville, Palatino, serif;
}
Paste_Image.png
螞蟻行軍效果
@keyframes ants{to{background-position:100%}}
div {
padding: 1em;
border: 1px solid transparent;
background: linear-gradient(white, white) padding-box,
repeating-linear-gradient(-45deg, black 0, black 25%,
white 0, white 50%) 0 / .6em .6em;
max-width: 20em;
animation: ants 12s linear infinite;
}
Paste_Image.png
Paste_Image.png
用border-image做一個頂部邊框被裁減的效果
思路：運(yùn)用border-image加上一條由漸變生成的垂直條紋，而邊框的粗細(xì)有border中的width來控制芬首。
div {
max-width:20em;
border-top: .2em solid transparent;
border-image: 100% 0 0 linear-gradient(90deg, currentColor 8em, transparent 0);
padding-top: 1em;
}
Paste_Image.png
本文整理自《CSS揭秘》
