盒子模型——圆角
作用:设置元素的外边框为圆角
属性名:border-radius
属性值:数字+px/百分比
也可以每个角设置不同的效果,从左上角顺时针开始赋值,没有取值的角与对角取值相同。
正圆
给正方形盒子设置圆角属性值为宽高的一半/50%
例如:
div {
width: 200px;
height: 200px;
background-color: aqua;
border-radius: 100px;
}
也可以写成:border-radius:50px; 效果与上面一样。
胶囊
border-radius设置为高度的一半即可
<style>
div {
width: 500px;
height: 200px;
background-color: aqua;
border-radius: 100px;
}
</style>
盒子模型——阴影
属性名:box-shadow
属性值:x轴偏移量 Y轴偏移量 模糊半径 扩散半径 颜色 内外阴影
注:
- X轴偏移量和Y轴偏移量必须书写
- 默认是外阴影,内阴影需要添加inset
<style>
div {
width: 200px;
height: 200px;
background-color: aqua;
border-radius: 100px;
box-shadow: 2px 5px 10px 1px rgba(0, 0, 0, 0.5);
}
</style>
阴影也可以在里边,只需在box-shadow最后加上inset