html 边框圆角和阴影的基础用法
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 200px;
height: 200px;
background-color: #4CAF50;
border-radius: 15px; /* 设置边框圆角 */
box-shadow: 5px 5px 10px #888888; /* 设置阴影效果 */
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
这段代码创建了一个类名为 .box
的 div 元素,并通过内部样式表设置了其宽度、高度、背景颜色、边框圆角和阴影。border-radius
属性设置了元素边框的圆角度,box-shadow
属性设置了元素的阴影,包括阴影的水平偏移、垂直偏移、模糊半径和颜色。
评论已关闭