CSS新增样式----圆角边框、盒子阴影、文字阴影
/* 圆角边框 */
.rounded-corners {
border: 2px solid #008cba;
border-radius: 10px; /* 设置圆角的半径 */
}
/* 盒子阴影 */
.box-shadow {
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5); /* 水平偏移 垂直偏移 模糊半径 颜色 */
}
/* 文字阴影 */
.text-shadow {
text-shadow: 2px 2px 4px #000000; /* 水平偏移 垂直偏移 模糊半径 颜色 */
}
这段代码展示了如何使用CSS为元素添加不同类型的样式效果,包括圆角边框、盒子阴影以及文字阴影。通过这些样式,开发者可以创建更加丰富和具有深度的网页界面。
评论已关闭