1 opacity 透明度
opacity属性可以让元素表现为半透明，属性计算值范围是0～1，初始值是1.0，没有继承性。
1.1 opacity属性的叠加计算规则
由于opacity属性没有继承性，因此父、子元素同时设置半透明时，半透明效果是叠加的。
2 深入了解圆角属性 border-radius
这4个属性很好理解，因为属性名称就暴露了一切，例如border-top-left-radius显然就是用来设置左上角圆角大小的
2.1 了解border-radius属性的语法
2.1.1 1～4个值表示的方位
border-radius属性支持1～4个值，分别表示不同的角。
2.1.2．水平半径和垂直半径
还有很多人不知道我们平时使用的圆角值也是一种缩写
border-top-left-radius: 10px;
等同于
border-top-left-radius: 10px 10px;
其中，第一个值表示水平半径，第二个值表示垂直半径。又如：
border-top-left-radius: 30px 60px;
如果是border-radius属性，则水平半径和垂直半径不是通过空格进行区分，而是通过斜杠区分。
border-radius: 30px / 60px;
2.2 弄懂圆角效果是如何产生的
虽然我们口头上都称border-radius为圆角属性，实际上border-radius属性的字面意思不是“圆角”，而是“边界半径”，也就是圆角效果来自以这个半径值绘制的圆或以半轴值绘制的椭圆。
3 box-shadow盒阴影
box-shadow:0 2px 4px rgba(0,0,0,.2)
这段CSS声明包含box-shadow属性最常使用的几个值，0表示水平偏移，2px表示垂直偏移，4px是模糊大小，rgba(0,0,0,.2)则是投影的颜色。
3.3 多阴影特性与图形绘制
box-shadow属性支持无限多个阴影效果不断累加，因此理论上box-shadow属性可以实现任意图形效果，我们只需要设置1px×1px的元素，然后不断投影。
1．多边框和渐变边框效果
画边框
我们可以使用box-shadow属性模拟多边框效果，该属性也支持圆角效果
.multi-border {
height: 100px;
background-color: deepskyblue;
box-shadow: 0 0 0 4px #fff,
0 0 0 8px deeppink,
0 0 0 12px yellow,
0 0 0 16px purple;
}
渐变
如果我们多边框的过渡颜色足够细腻，我们还可以使用box-shadow属性实现由内往外但并不是径向渐变的渐变效果
.gradient-border {
height: 100px;
background-color: deepskyblue;
box-shadow: 0 0 0 1px #07b9fb,
0 0 0 2px #17aef4,
0 0 0 3px #27a4ee,
0 0 0 4px #3799E7,
0 0 0 5px #478ee0,
0 0 0 6px #5784d9,
0 0 0 7px #6779d3,
0 0 0 8px #776ecc,
0 0 0 9px #8764c5,
0 0 0 10px #9759be,
0 0 0 11px #a74eb8,
0 0 0 12px #b744b1,
0 0 0 13px #c739aa,
0 0 0 14px #d72ea3,
0 0 0 15px #e7249d,
0 0 0 16px #f71996;
}
上面时边框，下面是渐变
例子，其他元素或者本元素没有margin，顶部被遮住。
2．加载效果
box-shadow属性可以实现多种CSS加载效果，例如下面这个经典的旋转加载效果：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.loading {
40px; height: 40px;
margin: auto;
position: relative;
}
.loading::before {
content: "";
4px; height: 4px;
border-radius: 100%;
color: rgba(0, 0, 0, .4);
box-shadow: 0 -10px rgba(0,0,0,.9), /* top */
10px 0px, /* right */
0 10px, /* bottom */
-10px 0 rgba(0,0,0,.7), /* left */
-7px -7px rgba(0,0,0,.8), /* left-top */
7px -7px rgba(0,0,0,1), /* right-top */
7px 7px, /* right-bottom */
-7px 7px; /* left-bottom */
animation: spin 1s steps(8) infinite;
/* center */
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
margin: auto;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body>
<div class="loading"></div>
</body>
</html>
3．云朵效果
实现原理很简单，就是使用box-shadow属性克隆多个圆，然后让圆不断交错重叠。
使用box-shadow属性实现云朵效果的代码如下：
.cloud-x {
height: 150px;
background-color: deepskyblue;
overflow: hidden;
}
.cloud {
60px; height: 50px;
margin: 60px 0 0 70px;
color: white;
background-color: currentColor;
border-radius: 50%;
box-shadow: 100px 0px 0 -10px,
40px 0px,
70px 15px,
30px 20px 0 -10px,
70px -15px,
30px -30px;
}
4．3D投影效果
给按钮设置一个3D投影效果，按下按钮的时候按钮的位置发生偏移，同时投影高度降低，这可以实现非常有立体感的按钮效果，
.shadow-3d button {
100px;
height: 36px;
border: 1px solid #a0b3d6;
background-color: #f0f3f9;
color: #333;
overflow: visible;
cursor: pointer;
box-shadow: 1px 1px #AFC4EA, 2px 2px #AFC4EA, 3px 3px #AFC4EA;
outline: 0;
}
.shadow-3d button:active {
transform: translate(1px, 1px);
box-shadow: 1px 1px #AFC4EA, 2px 2px #AFC4EA;
}
4 CSS 2D变换 transform
4.1 从基本的变换方法说起
/*位移*/
transform: translate(0,0);
/*旋转*/
transform: rotate(0deg);
/*缩放*/
transform: scale(1);
/*斜切*/
transform: skew(Odeg);
1 位移 translate()
/*往右偏移10px，往下偏移20px */
transform: translate(10px，20px);
/*往右偏移10px */
transform: translateX(10px);
/*往下偏移20px */
transform: translateY(20px);
位移变换最不可替代的特性就是设定百分比偏移值，因为CSS世界中就没有几个属性的百分比值是相对于自身尺寸计算的
/*往左偏移自身宽度的一半，往上偏移自身高度的一半*/
transform: translate (-50%,-50%);
百分比值相对于自身计算的这个特性非常适合用来实现高宽不固定元素的水平垂直居中效果，例如，弹框元素想要居中定位
.dialog {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
然而对于绝对定位元素，如果可以，请尽量避免使用transform属性进行位置偏移，应改用margin属性进行偏移定位，这样就可以把transform属性预留出来，方便实现各种animation动画效果
2．rotate()旋转
例如，将第3个正方形旋转45度：
div.transform-3
{
200px;
height:100px;
background-color:red;
/*旋转45° */
transform:rotate(45deg);
}
3 缩放 scale()
缩放变换也支持x和y两个方向，因此，下面的语法都属于2D变换的语法：
/* 水平放大2倍，垂直缩小1/2 */
transform: scale(2,.5);
/*水平放大2倍*/
transform: scaleX(2);
/*垂直缩小1/2*/
transform: scaleY(.5);
下面3个图分别对应上面的值
-
缩放变换不支持百分比值，仅支持数值，因此scale(200%,50%)是无效的。
-
缩放变换支持负值。如果我们想要实现元素的水平翻转效果，可以设置transform:scaleX(-1)；
-
想要实现元素的垂直翻转效果，可以设置transform:scaleY(-1)。
-
如果水平缩放和垂直缩放的大小一样，我们可以只使用一个值，例如，
transform:scale(2)表示将元素水平方向和垂直方向的尺寸放大到现有尺寸的2倍。