本文主要是介绍HTML(17)——圆角和盒子阴影，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
盒子模型——圆角
作用：设置元素的外边框为圆角
属性名：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
这篇关于HTML(17)——圆角和盒子阴影的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
