《CSS Secrets》css解密（形状、投影视觉效果）

三年重构老司机二刷《CSS Secrets》觉得有些东西还是应该记录下来，本文内容来自书籍《CSS Secrets》中文名叫《CSS揭秘》，做笔记的过程中我会根据自己的过往经验加上自己的理解和看法，用通俗的表达对一些知识点进行解释。本书的对象是有一定CSS开发经验的人，如果你是新手，阅读起来可能有点吃力，同时，笔记也是针对我个人的查漏补缺，有些知识点并不会记录进去。

---

形状

自适应的椭圆

1. 宽高相同，border-radius 大于等于一半就是一个正圆，用户代理会按宽高比例减小各个边框半径带下，直到不重叠为止。
2. border-radius 一般是简写形式，可以通过 / 单独指定水平和垂直半径，水平半径 / 垂直半径
3. border-radius 接受百分比值
4. 展开式属性，支持最多两个值，必须使用空格分隔。分别表示水平半径和垂直半径。而 border-radius 那种斜杠 / 分隔的写法这里是不支持的，只能是空格。

    border-top-left-radius
    border-top-right-radius
    border-bottom-right-radius
    border-bottom-left-radius

5. border-radius 水平半径 / 垂直半径，各支持“上右下左”四个值写法

border-radius: 左上角水平圆角半径大小 右上角水平圆角半径大小 右下角水平圆角半径大小 左下角水平圆角半径大小/左上角垂直圆角半径大小 右上角垂直圆角半径大小 右下角垂直圆角半径大小 左下角垂直圆角半径大小;

6. 上半椭圆
   border-radius: 50% / 100% 100% 0 0;
7. 左半椭圆
   border-radius: 100% 0 0 100% / 50%;
8. 左上四分之一圆
   border-radius: 100% 0 0 0;

平行四边形

1. 平行四边形是矩形的父集，各条边两两平行，但是角度不一定是直角。
2. CSS创建平行四边形的思路是通过 skew 实现。
3. 直接将整个元素倾斜的话，元素的内容也会倾斜。
4. 我们可以将内容单独用一层结构包裹在倾斜元素内，然后将内容反向倾斜
5. 按照这种思路我们可以将倾斜元素作为子元素，这样就不会影响内容了，所以用伪元素代替是个好办法

嵌套元素方案：

<a href="#yolo" class="button">
    <div>Click me</div>
</a>

.button { transform: skewX(-45deg); }
.button > div { transform: skewX(45deg); }

伪元素方案：

<a href="#yolo" class="button">
    Click me
</a>

.button {
    position: relative;
    /* 其他的文字颜色、内边距等样式…… */
}
.button::before {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: -1;
    background: #58a;
    transform: skew(45deg);
}

菱形图片

示例：https://codepen.io/xiangshuo1992/pen/jXZRmq

变形方案：
基于上面平行四边形的方案，菱形可以通过正方形旋转得到，再将子元素图片反方向矫正，不过这里有个问题是图片最大宽度是与边长相等的，我们期望的是与对角线相等，所以我们可以通过放大图片来实现。

<div class="picture">
    <img src="adam-catlace.jpg" alt="..." />
</div>
.picture {
    width: 400px;
    transform: rotate(45deg);
    overflow: hidden;
}
.picture > img {
    max-width: 100%;
    transform: rotate(-45deg) scale(1.42);
}

裁切路径方案：
还有一个兼容性不是很好的实现方案，只能作为渐进增强的方案了。clip-path 属性可以创建一个只有元素的部分区域可以显示的剪切区域，MDN文档示例：https://developer.mozilla.org/zh-CN/docs/Web/CSS/clip-path

还可以加动画呢！

img {
    clip-path: polygon(50% 0, 100% 50%,
    50% 100%, 0 50%);
    transition: 1s clip-path;
}
img:hover {
    clip-path: polygon(0 0, 100% 0,
    100% 100%, 0 100%);
}

视觉效果

单侧投影

示例：https://codepen.io/xiangshuo1992/pen/JwvPPa

一般我们使用 box-shadow 的方法是，指定三个长度值和一个颜色值：
box-shadow: 2px 3px 4px rgba(0,0,0,.5);

box-shadow 的参数列表是 box-shadow: X Y 模糊半径R1 扩张半径R2 颜色值;

所以上面的css属性值会生成一个相对于元素向右偏移2px，向下偏移3px，模糊半径为4px的阴影，我们把阴影看做是一个元素的话，这个元素的尺寸相当于比原来的元素大4*2=8px。

注意：确切地说，我们将在顶部看到1px的投影（4px-3px）、在左侧看到2px（4px-2px）、在右侧看到6px（4px+2px）、在底部看到7px（4px+3px）。在实践中，投影看起来会比这些值稍小，因为投影的颜色在边缘处的过渡不是线性的，这跟渐变不一样。

如果要实现单侧投影，我们就需要用到第四个属性，扩张半径啦。这个参数会根据你指定的值去扩大或（当指定负值时）缩小投影的尺寸。很显然，当我们设置了模糊半径之后，我们只有将扩张半径设置为负数才能缩小阴影，那这个值具体是多大呢，只要小于模糊半径的相反数就可以了，比如这样设置：box-shadow: 0 5px 4px -4px black;。

邻边投影

要实现只在两条邻边有 box-shadow ，最简单的办法就是在基础用法上面将X和Y的偏移量调整到大于模糊半径的值就行，但是我们会发现这样会造成元素有一个比较大的阴影，视觉效果达不到要求，这时我们可以考虑结合扩张半径属性来进行优化，利用扩张半径的负值来缩小阴影，具体数值该设置为多大呢，我们将偏移量调整为模糊半径的一半，扩张半径调整为模糊半径相反数的一半，比如：box-shadow: 3px 3px 6px -3px black; 就可以达到最终想要的效果了。

双侧投影

扩张半径在四个方向上的作用是均等的（也就是说，我们无法指定投影在水平方向上放大，而在垂直方向上缩小），唯一的办法是用两块投影（每边各一块）来达到目的。然后基本上就是把“单侧投影”中的技巧运用两次：box-shadow: 5px 0 5px -5px black, -5px 0 5px -5px black;。

END.

本文地址：https://blog.csdn.net/u013778905/article/details/85991229