文章介绍了如何使用CSS的border-radius属性创建圆角边框，当半径设为正方形的一半时，可以将正方形变为圆形。同时，文章还讲解了box-shadow属性来添加盒子阴影，包括水平、垂直偏移、模糊半径和颜色等参数。此外，text-shadow属性用于设置文字阴影，增加了文本的视觉效果。
圆角边框
圆与边框的交集形成圆角效果
border-radius: length;
<style>
div {
width: 300px;
height: 150px;
border-radius: 10px;
background-color: pink;
}
</style>
</head>
<body>
<div >
</div>
</body>
圆角边框的使用
- 参数可以是百分比或者数值形式
- 正方形变圆形
.one {
width: 300px;
height: 300px;
/* 半径设置为正方形一半则变成圆形 */
border-radius: 150px;
/* 两者相同 */
border-radius: 50%;
background-color: pink;
}
该属性是一个简写属性，可以写四个值，分别代表左上角、右上角、右下角、左下角
两个值时：对角线相等
也可以分开写：
border-top-left-radius,border-top-right-radius,border-bottom-right-radius,border-bottom-left-radius
盒子阴影
使用box-shadow属性为盒子添加阴影
语法：
box-shadow: h-shadow v-shadow blur spread color 
h水平（必选）、v垂直（必选）、blur模糊（可选,表示影子是虚的还是实的）、color阴影（可选）
默认外阴影，盒子阴影不占空间
h-shadow阴影偏移量，负值则阴影在元素左边，
blur值越大，模糊面积越大，阴影就越大越淡
spread取正值，阴影扩大。取负值，阴影收缩。默认为0，此时阴影和元素一样大
文字阴影
text-shadow设置
226
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
