知识点：
1 border-radius 有一个鲜为人知的真相：它可以单独指定水平和垂直半径，只要用一个斜杠（/）分隔这两个值即可
其实，border-radius 这个属性还有另外一个鲜为人知的真相，它不仅可以接受长度值，还可以接受百分比值。
这个百分比值会基于元素的尺寸进行解析，即宽度用于水平半径的解析，而高度用于垂直半径的解析。
这意味着相同的百分比可能会计算出不同的水平和垂直半径。
border-radius: 50% / 50%;//创建一个自适应的椭圆
border-radius: 50%;
2 平行四边形
通过skew() 的变形属性来对这个矩形进行斜向拉伸
.button {
position: relative;
/* 其他的文字颜色、内边距等样式…… */
}
.button::before {
content: ''; /* 用伪元素来生成一个矩形 */
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
z-index: -1;
background: #58a;
transform: skew(45deg);
}
这个技巧不仅对skew() 变形来说很有用，还适用于其他任何变形样式，
当我们想变形一个元素而不想变形它的内容时就可以用到它
3 菱形图片
.picture {
width: 400px;
transform: rotate(45deg);
overflow: hidden;
}
.picture > img {
max-width: 100%;
transform: rotate(-45deg) scale(1.42);
}
polygon() 使用polygon()（多边形）函数来指定一个菱形。实际上，它允许我们用一系列（以逗号分隔的）坐标点来指定任意的多边形。
我们甚至可以使用百分比值，它们会解析为元素自身的尺寸
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%);
}
4 切角效果
第一种方案来自于无所不能的CSS 渐变。假设我们只需要一个角被切掉的效果，
以右下角为例。这其中最大的窍门在于充分利用渐变的一大特性：渐变可以接受一个角度（比如45deg）作为方向，
而且色标的位置信息也可以是绝对的长度值，这一点丝毫不受容器尺寸的影响。
background: #58a;
background:
linear-gradient(-45deg, transparent 15px, #58a 0);
很简单，对吧？你可以在图3-25 中看到结果。事实上，第一行声明
并不是必需的，加上它是将其作为回退机制：如果某些浏览器不支持CSS
渐变，那第二行声明会被丢弃，而此时我们至少还能得到一个简单的实色背景
border: 20px solid transparent; border-image: 1 url('data:image/svg+xml,\ <svg xmlns="http://www.w3.org/2000/svg"\ width="3" height="3" fill="%2358a">\ <polygon points="0,1 1,0 2,0 3,1 3,2 2,3 1,3 0,2"/>\ </svg>'); background: #58a; background-clip: padding-box;
5 饼图
.pie::before {
content: '';
display: block;
margin-left: 50%;
height: 100%;
border-radius: 0 100% 100% 0 / 50%;
background-color: inherit;
transform-origin: left;
}
6 居中
在CSS 中对元素进行水平居中是非常简单的：如果它是一个行内元素，
就对它的父元素应用text-align: center；如果它是一个块级元素，就对
它自身应用margin: auto。
main { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);/*translate是移动属性，两个-50%代表着像原始位置向左、向上各移动50%*/
}
margin 的百分比值是以父元素的宽度作为解析基准的。没错，即使对于margin-top 和margin-bottom 来说也是这样！
vw 是与视口宽度相关的。与常人的直觉不符的是，1vw 实际上表示视口宽度的1%，而不是100%。
与vw类似，1vh表示视口高度的1%。
当视口宽度小于高度时，1vmin等于1vw，否则等于1vh。
当视口宽度大于高度时，1vmax等于1vw，否则等于1vh。
main {
width: 18em;
padding: 1em 1.5em;
margin: 50vh auto 0;
transform: translateY(-50%);
}
这个技巧的实用性是相当有限的，因为它只适用于在视口中居中的场景。
