在CSS3中，有多种方式可以创建阴影效果。以下是一些常用的方法：
box-shadow 属性box-shadow 是最常用的创建阴影效果的方法。它允许你为元素添加一个或多个阴影。
box-shadow: [水平偏移量] [垂直偏移量] [模糊半径] [扩展半径] [颜色];
.box {
width: 200px;
height: 100px;
background-color: #fff;
box-shadow: 10px 10px 5px 0 rgba(0, 0, 0, 0.5);
}
text-shadow 属性text-shadow 用于为文本添加阴影效果。
text-shadow: [水平偏移量] [垂直偏移量] [模糊半径] [颜色];
h1 {
color: #fff;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
filter 属性filter 属性可以用来应用多种图形效果，包括阴影。
filter: drop-shadow([水平偏移量] [垂直偏移量] [模糊半径] [颜色]);
.box {
width: 200px;
height: 100px;
background-color: #fff;
filter: drop-shadow(10px 10px 5px rgba(0, 0, 0, 0.5));
}
outline 属性虽然 outline 不是真正的阴影效果，但它可以用来创建类似的效果。
outline: [宽度] [样式] [颜色];
.box {
width: 200px;
height: 100px;
background-color: #fff;
outline: 2px solid rgba(0, 0, 0, 0.5);
}
box-shadow 和 text-shadow 支持多个阴影，可以通过逗号分隔。filter 属性在某些旧版浏览器中可能不被支持，使用时需要注意兼容性。通过这些方法，你可以轻松地在CSS3中创建各种阴影效果。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
