CSS中的圆角和阴影
CSS中创建圆角和阴影可以使用border-radius
属性来创建圆角,使用box-shadow
属性来创建阴影。
以下是创建圆角和阴影的示例代码:
/* 创建圆角 */
.rounded-corners {
border-radius: 10px; /* 设置圆角的半径为10像素 */
}
/* 创建阴影 */
.shadow-effect {
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
/* 水平偏移 垂直偏移 模糊半径 颜色 */
}
在HTML中使用这些样式:
<div class="rounded-corners shadow-effect">这是一个圆角且带有阴影的盒子</div>
这段代码会创建一个带有圆角和阴影的盒子。border-radius
属性让盒子的四个角变得圆润;box-shadow
属性在盒子下方添加了一个阴影,阴影的颜色为半透明的黑色。
评论已关闭