因為設計小姐姐總有一些小設計想要展現在頁面上，
善良的我希望完成項目的同時，
把這些看起來漂亮但實際上并沒有什么*用的效果實現??
所以在為難自己的同時。。我還是有所收獲的
譬如：《css揭密》這本書
于是記錄下我覺得很有意思的幾個小技巧～
說不定以后的頁面中會用到呢～
（一個不想學svg因為看到三角函數就頭疼的我Orz...）
background-clip
官方概念是： 設置元素的背景（背景圖片或顏色）是否延伸到邊框下面。
有4個值：
1. border-box 背景延伸到邊框外沿（但是在邊框之下）
2. padding-box 邊框下面沒有背景
3. content-box 背景裁剪 到內容區（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) ;
}
背景被裁剪為文字的前景色，可以實現類似彩虹字
image.png
2-1.png
使用 background-clip: padding-box;
background-clip: padding-box;
2-2.png
2-1.png 顯示的邊框顏色是背景顏色與邊框顏色疊加后的色值
而2-2.png 才是真正設置的邊框半透明顏色
?? 當dom節點沒有padding屬性值為0 時，
padding-box與content-box的效果看起來一樣，但意義不同。
box-shadow 投影
- 實現多重邊框
深綠色為邊框
最外層淺綠色為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 方案
- 每個元素身上豆存在三個矩形框
- border-box
- padding box
- content box
cale(100% - 2px)
邊框內圓角
- 單元素實現
outline 描邊不會隨著元素的圓角走 4-1.png
box-shadow 陰影會隨著元素的圓角走 4-2.png
所以兩個疊加可以實現內圓角效果 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
