因?yàn)樵O(shè)計(jì)小姐姐總有一些小設(shè)計(jì)想要展現(xiàn)在頁面上喉钢，
善良的我希望完成項(xiàng)目的同時(shí)疼燥，
把這些看起來漂亮但實(shí)際上并沒有什么*用的效果實(shí)現(xiàn)??
所以在為難自己的同時(shí)虏缸。。我還是有所收獲的
譬如：《css揭密》這本書
于是記錄下我覺得很有意思的幾個(gè)小技巧～
說不定以后的頁面中會(huì)用到呢～
（一個(gè)不想學(xué)svg因?yàn)榭吹饺呛瘮?shù)就頭疼的我Orz...）
background-clip
官方概念是： 設(shè)置元素的背景（背景圖片或顏色）是否延伸到邊框下面嫩实。
有4個(gè)值：
1. border-box 背景延伸到邊框外沿（但是在邊框之下）
2. padding-box 邊框下面沒有背景
3. content-box 背景裁剪 到內(nèi)容區(qū)（content-box）外沿
4. text 背景被裁剪為文字的前景色(chrome瀏覽器支持需要添加-webkit-前綴)
樣式
<div class='star'>
<i class='line'></i>
</div>
<div class='fire1'></div>
<div class='fire'></div>
p {
border: 5px navy;
border-style: dotted double;
margin: 1em;
padding: 2em;
background: linear-gradient(to right , red, orange, yellow, green, blue, indigo, violet);
background-clip :text; -webkit-background-clip: text; color: rgba(0,0,0,0.2) ;
}
背景被裁剪為文字的前景色刽辙，可以實(shí)現(xiàn)類似彩虹字
image.png
2-1.png
使用 background-clip: padding-box;
background-clip: padding-box;
2-2.png
2-1.png 顯示的邊框顏色是背景顏色與邊框顏色疊加后的色值
而2-2.png 才是真正設(shè)置的邊框半透明顏色
?? 當(dāng)dom節(jié)點(diǎn)沒有padding屬性值為0 時(shí)，
padding-box與content-box的效果看起來一樣舶赔，但意義不同扫倡。
box-shadow 投影
- 實(shí)現(xiàn)多重邊框
深綠色為邊框
最外層淺綠色為box-shadow生成的假‘邊框’
.border{
width: 200px;
height: 200px;
background: #22d4a1;
border: 5px solid #33a32d;
box-sizing: border-box;
box-shadow: 0 0 0 5px #d2f3a1;
}
3-1
outline 紅色描邊
.border{
outline: 5px solid deeppink;
}
image.png
background-position
靈活的背景定位
background-origin 方案
- 每個(gè)元素身上豆存在三個(gè)矩形框
- border-box
- padding box
- content box
cale(100% - 2px)
邊框內(nèi)圓角
- 單元素實(shí)現(xiàn)
outline 描邊不會(huì)隨著元素的圓角走 4-1.png
box-shadow 陰影會(huì)隨著元素的圓角走 4-2.png
所以兩個(gè)疊加可以實(shí)現(xiàn)內(nèi)圓角效果 4-3.png
<div class='radius'></div>
.radius{
width: 200px;
height: 100px;
background: #cda2fd;
border-radius: 8px;
outline:5px solid #f2dfcd;
box-shadow: 0 0 0 5px #f2dfcd;
}
4-1.png
4-2
4-3.png
