1、CSS3新增样式
CSS3新增样式 | |
---|
边框圆角 | border-radius |
阴影 | shadow |
形变(旋转、缩放、位移) | transform: rotate() scale() translate() |
2、边框圆角(border-radius
)
border-radius 属性 | 值 |
---|
一个值 | 圆角的半径,当为50%时,盒子变成一个圆 |
两个值 | 左上右下、右上左下 |
四个值 | 左上、右上、右下、左下 |
3、边框阴影(box-shadow
)
box-shadow
值:x轴、y轴、模糊半径、颜色
4、形变(旋转、缩放、位移)
形变类型 | 值 |
---|
旋转 | rotate(45deg) :旋转45度 |
缩放 | scale(1.5) :放大1.5倍 |
位移 | translate(50%,50%) :x轴移动50%,y轴移动50% |
多个样式 | transform: rotate(45deg) scale(1.5) translate(100%, 50%) |
- 4.1、用
translate(-50%,-50%)
写垂直水平居中
.box {
position: absolute;
top: 50%;
left: 50%;
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;
border-radius: 50%;
box-shadow: 5px 5px 5px #333;
transform: rotate(45deg);
transform: scale(1.5);
transform: translate(50%, 50%);
transform: rotate(45deg) scale(1.5) translate(100%, 50%);
}
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>