这篇博客探讨了CSS中的阴影和圆角效果。首先展示了如何使用box-shadow属性创建元素的阴影效果，例如在`.box`类中设置了一个简单的阴影。接着，通过调整border-radius属性，展示了如何实现不同角的圆角效果，强调了可以根据个人喜好定制形状的可能性。博客还详细解释了border-radius属性的多个值如何控制不同角落的圆角大小，提供了一种增强网页设计多样性的方法。
阴影
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.box{
height: 10px;
width: 10px;
background: navajowhite;
box-shadow:2px 3px 1px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>呈现效果
圆角
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.box{
width: 10px;
height: 10px;
background: #888888;
border-radius:500px 200px 300px 401px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>效果
阴影和圆角都是css里面的效果，呈现出多种可玩性特别是圆角可以根据自己的喜好调整出自己想要的图案，需要用到类选择器border-radius属性
四个属性值，分别表示左上角、右上角、右下角、左下角的圆角大小
三个属性值，第一个值表示左上角，第二个值表示右上角和左下角（对角），第三个值表示右下角
两个属性值，第一个值表示左上角和右下角，第二个值表示右上角和左下角
扫一扫
409
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
