1、CSS3新增样式
| CSS3新增样式 | |
| 边框圆角 | border-radius |
| 阴影 | shadow |
| 形变（旋转、缩放、位移） | transform: rotate() scale() translate() |
2、边框圆角（border-radius）
border-radius属性 |
值 |
| 一个值 | 圆角的半径，当为50%时，盒子变成一个圆 |
| 两个值 | 左上右下、右上左下 |
| 四个值 | 左上、右上、右下、左下 |
3、边框阴影（box-shadow）
box-shadow值：x轴、y轴、模糊半径、颜色
4、形变（旋转、缩放、位移）
- 4.1、用
translate(-50%,-50%)写垂直水平居中
/* 垂直水平居中 */ .box { position: absolute; /* 左上角那个点水平居中 */ top: 50%; left: 50%; /* x、y轴向左上角移动，把中心点回归到盒子中间 */ transform: translate(-50%, -50%); }
5、源代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box { width: 100px; height: 100px; border: 1px solid black; /* 1、border-radius:圆角的半径，圆形：50% */ /* 四个值：左上、右上、右下、左下 */ /* 两个值：左上右下、右上左下 */ border-radius: 50%; /* 2、box-shadow:x轴、y轴、模糊半径、颜色 */ box-shadow: 5px 5px 5px #333; /* 3、形变 */ /* rotate(45deg):旋转45度 */ transform: rotate(45deg); /* scale(1.5)：放大1.5倍 */ transform: scale(1.5); /* translate(50%,50%)：x轴移动50%，y轴移动50% */ transform: translate(50%, 50%); /* 多个形变 */ transform: rotate(45deg) scale(1.5) translate(100%, 50%); } /* 垂直水平居中 */ .box { position: absolute; /* 左上角那个点水平居中 */ top: 50%; left: 50%; /* x、y轴向左上角移动，把中心点回归到盒子中间 */ transform: translate(-50%, -50%); } </style> </head> <body> <div class="box"></div> </body> </html>
