【CSS揭秘】笔记

背景与边框

半透明边框

假设我们想给一个容器设置一层白色背景和一道半透明的白色边框,body的背景会从它的半透明边框透上来。我们最开始的尝试可能是这样：

background: #fff; <br/>// border: 10px solid hsla(0, 0%, 100%, 0.5);<br/>
border: 10px solid rgba(255, 255, 255,0.5);<br/>

但是效果却不是我们所想要的效果，我们的边框去哪里了

我可以通过background-clip属性来调整上述默认行为所带来的不变，这个属性的初始值是border-box，这个值意味着背景会被元素的外边距裁剪掉，但是可以通过设置background-clip属性为padding-box，这样就是用元素的内边距把背景裁切掉：

  background: #fff;// border: 10px solid hsla(0, 0%, 100%, 0.5);border: 10px solid rgba(255, 255, 255,0.5);background-clip: padding-box;

多重边框

【box-shadow方案：使用它的第四个参数，可以让投影面积加大或减少，得到的“投影”就像一道边框】

background: #8fe603;
box-shadow: 0 0 10px #655,0 0 0 10px deeppink,0 2px 5px 15px rgba(0,0,0,.6)

【outline方案：你可以只需要两层边框，可以先设置一层常规边框，再加上outline（描边）属性来产生外层的边框】

  background: #8fe603;border: 10px solid red;outline: 5px dashed #000;outline-offset: 10px; // 控制它跟元素边缘之间的间距

灵活的背景定位

举例说明，如果想要让背景图片跟右边缘保持20px的偏移量，同时跟底部保持10px的偏移量。

【background-position方案】

background:url('../assets/logo.png') no-repeat #0a0a0a;
background-position: right 20px bottom 10px;

思考：right，bottom是那个的右下角？
每个元素身上都存在三个矩形框：border box（边框的外沿框），padding box（内边距的外沿框），content box（内容外沿框）。
默认情况下，background-position是以padding box为参照的，这样边框才不会遮住背景图片。因此right，bottom默认指的是padding box的右下角。不过在背景与边框（第三版）中，我们得到了一个新的属性：background-origin，它可以设置背景图片的参照物。background-origin属性有三个值：padding-box(默认值)，border-box，content-box。

【calc()方案】

background:url('../assets/logo.png') no-repeat #0a0a0a;
background-position: calc(100% - 20px) calc(100% - 10px);

条纹背景

【水平条纹】

  background: linear-gradient(#fb3 50%, #58a 50%); // 或者 background: linear-gradient(to bottom,#fb3 50%, #58a 50%); background-size: 100% 30px;

【垂直条纹】

  background: linear-gradient(to right,#fb3 50%, #58a 50%);background-size: 30px 100%;

【斜向条纹】

  background: linear-gradient(45deg, #fb3 50%, #58a 50%);background-size: 100% 50%;

background: linear-gradient(45deg,#fb3 25%,#58a 0,#58a 50%,#fb3 0,#fb3 75%,#58a 0);
background-size: 30px 30px;

复杂的背景图像

【网格】

  background:rgb(2, 2, 2);background-image: linear-gradient(white 1px,transparent 0),linear-gradient(90deg,rgb(235, 13, 13) 1px,transparent 0);background-size: 30px 30px;

【波点】

  background-image: radial-gradient(tan 30%,transparent 0),radial-gradient(tan 30%,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, 25px 25px, 25px 25px, 50px 50px;background-size: 50px 50px;

形状

自适应椭圆

如果我们有一个尺寸为 200px X 150px的元素，就可以把它圆角的两个半经值分别指定为元素宽高的一半，从而得到一个精准的椭圆：

  width: 200px;height: 150px;border-radius: 100px / 75px;

但是，这段代码存在很大的缺陷，只要元素的尺寸发生变化，border-radius属性的值就得跟着改变。因此有更好的解决方法，使用百分比：border-radius: 50%;

【半椭圆】

  width: 200px;height: 150px;border: 1px solid;border-radius: 50%/100% 100% 0 0;

【四分之一椭圆】

  width: 200px;height: 150px;border: 1px solid;border-radius: 100% 0  0 0;

平行四边形

  width: 200px;height: 150px;border: 1px solid;transform: skewX(-45deg);

但是，这导致它的内容也发生了斜向变形，不好看，有没有办法只让容器的形状倾斜，而保持其内容不变呢？
1，内容再应用一次skew（）变形；

2，使用伪元素

.test {position: relative;width: 200px;height: 150px;
}
.test::before { content: "";top: 0;right: 0;bottom: 0;left: 0;border: 1px solid;position: absolute;transform: skewX(-45deg);
}

视觉效果

不规则投影

// drop-shadow(offset-x offset-y blur-radius color);
filter: drop-shadow(2px 2px 5px rgba(231, 7, 7, 0.5));

字体排印

自定义下划线

【方法一】

  width: 50px;border-bottom:1px solid red 

;

【方法二】

  width: 50px;box-shadow: 0 -1px gray inset;

box-shadow: x-offset y-offset blur-radius spread-radius color [inset];
x-offset：水平方向偏移量，正值向右，负值向左。
y-offset：垂直方向偏移量，正值向下，负值向上。
blur-radius：模糊半径，值越大越模糊，默认为 0 表示无模糊。
spread-radius：阴影扩大/缩小，正值阴影变大，负值变小（可选）。
color：阴影颜色（可选，默认为黑色）。
inset：可选值，表示阴影是向内的（内部阴影），如果不加则默认是外阴影。

【方法三】

  width: 50px;background: linear-gradient(90deg, red 66%, transparent 0) repeat-x;background-size: 100% 1px;background-position: 0 1.5em;

【方法一】和【方法二】会阻止正常的文本换行行为，最佳方法是使用【方法三】。

用户体验

选用合适的鼠标光标

cursor: pointer;