CSS3兼容前面的CSS版本，因此，之前的学习没有白费！
我们今天先来学习前三大点：圆角边框、阴影、形变。
一、圆角边框（border-radius）
border-radius：左上、右上、右下、左下
border-radius：左上右下、右上左下
这个跟margin和padding有点类似，可以写四个（左上、右上、右下、左下），也可以写两个（左上右下、右上左下），也可以只写一个（左上右下右上左下）。
<head>
<style>
.box{
width: 100px;
height: 200px;
border: 1px solid red;
border-radius: 50px;
}
</style>
</head>
<body>
<div class="box"></div>
</body> 
radius
n. 半径；半径范围，周围；（剖）桡骨；（昆）径脉；（棘皮动物或腔肠动物的）辐射对称轴
border-radius的意思就是：设置边角为一段弧线，这段弧线是圆的一部分。其中，border-radius就是这个圆的半径。
border-radius数值越大，表明弧度越大（视觉上，更像一个圆）。
二、阴影（box-shadow）
<head>
<style>
.box{
width: 100px;
height: 200px;
border: 1px solid red;
border-radius: 50px;
box-shadow: 10px 50px 20px blue;
}
</style>
</head>
<body>
<div class="box"></div>
</body>效果如下：
分析：
例：box-shadow：10px 50px 20px blue;
表示：
x轴偏移量（水平向右偏移长度）
y轴偏移量（垂直向下偏移长度）
模糊半径（可以理解为阴影的清晰度，数值越大，越模糊
阴影颜色（不设置的话，默认为黑色）
三、形变：旋转、缩放、位移（transform）
transform：
rotate()：旋转。deg单位表示角度。意为将图形向右旋转多少度。
scale()：缩放。将图形缩放多少倍。
translate()：位移。将图形向右或者向下偏移多少。
这样有点抽象，我们来看一个例子：
（1）这是原先的图形：
<div class="box2">hello</div> .box2 {
width: 100px;
height: 100px;
margin: 200px 0 0 400px;
border: 1px solid red;
}
（2） 添加旋转样式代码：
transform: rotate(180deg);
（3） 添加缩放样式代码：
transform: scale(2);
（4）添加位移样式代码：
transform: translate(100px, 100px);
四、过渡效果
五、动画效果
六、媒体查询
七、flex布局
八、grid布局
学习结束，下节课见！
708
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
