css

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

1. 实现多重边框
   深绿色为边框
   最外层浅绿色为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 方案

• 每个元素身上豆存在三个矩形框
  1. border-box
  2. padding box
  3. 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

背景条纹