4.CSS3新增样式
圆角
border-radius:左上 右上 右下 左下
如果设置两个值,第一个值表示左上和右下,第二个值表示右上和左下
<div class="radius"></div>
.radius{
height: 300px;
width: 300px;
background-color: red;
border: 1px solid black;
margin: 0 auto;
}
在样式中添加 border-radius: 50%;
.radius{
height: 300px;
width: 300px;
background-color: red;
border: 1px solid black;
margin: 0 auto;
border-radius: 50%;
}
得到
将角度设置为50%可以得到圆形
阴影
box-shadow: x轴偏移量 y轴偏移量 模糊半径 阴影颜色(不设置颜色默认为黑色)
box-shadow:10px 20px 30px blue
<div class="box"></div>
.box{
height: 300px;
width: 300px;
background-color: chartreuse;
margin: 0 auto;
border-radius: 50%;
/* box-shadow: 10px 10px 10px blue; */
}
添加box-shadow后:
.box{
height: 300px;
width: 300px;
background-color: chartreuse;
margin: 0 auto;
border-radius: 50%;
box-shadow: 10px 10px 10px blue;
}
形变
旋转(rotate)
旋转前:
<div class="transform"></div>
.transform{
width: 300px;
height: 300px;
margin: 0 auto;
background-color: red;
}
旋转后:
.transform{
width: 300px;
height: 300px;
margin: 100px auto;
background-color: red;
transform: rotate(50deg);
}
缩放(scale)
transform:scale(倍数)
缩放前:
<div class="transform"></div>
.transform{
width: 300px;
height: 300px;
margin: 100px auto;
background-color: red;
/* transform: rotate(50deg); */
}
缩放后:
.transform{
width: 300px;
height: 300px;
margin: 100px auto;
background-color: red;
/* transform: rotate(50deg); */
/* 放大1.5倍 */
transform: scale(1.5);
}
#### 位移(translate)
**transform:translate(x坐标移动的距离,y坐标移动的距离)**
**距离可以为像素值也可以为百分比**
位移前:
```html
<div class="transform"></div>
.transform{
width: 300px;
height: 300px;
margin: 100px auto;
background-color: red;
/* transform: rotate(50deg); */
/* 放大1.5倍 */
/* transform: scale(1.5); */
/* transform: translate(100px,100px); */
}
位移后:
.transform{
width: 300px;
height: 300px;
margin: 100px auto;
background-color: red;
/* transform: rotate(50deg); */
/* 放大1.5倍 */
/* transform: scale(1.5); */
transform: translate(100px,100px);
}
使得div垂直水平居中的方法
将元素设置为绝对定位,然后用偏移量位移
transform: translate(-50%,-50%);
.transform{
width: 300px;
height: 300px;
background-color: red;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}