因为设计小姐姐总有一些小设计想要展现在页面上，
善良的我希望完成项目的同时，
把这些看起来漂亮但实际上并没有什么*用的效果实现😂
所以在为难自己的同时。。我还是有所收获的
譬如：《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
