如何使用 CSS 对元素应用阴影效果
主题：HTML / CSS上一页|下一页
答案：使用 CSS box-shadow 属性
您可以使用 CSS box-shadow 属性在 a1 元素上应用阴影效果（如 Photoshop 阴影样式）。 box-shadow 可以应用于元素盒子的内部和外部。 试试下面的例子，看看它是如何工作的：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Box Shadow Effect</title>
<style>
.box{
width: 150px;
height: 150px;
background: #ccc;
}
.shadow-inside{
-moz-box-shadow: inset 0 0 10px #666; /* 对于基于 gecko 的浏览器 */
-webkit-box-shadow: inset 0 0 10px #666; /* 对于基于 webkit 的浏览器 */
box-shadow: inset 0 0 10px #666;
}
.shadow-outside{
-moz-box-shadow: 2px 2px 5px 3px #999;
-webkit-box-shadow: 2px 2px 5px 3px #999;
box-shadow: 2px 2px 5px 3px #999;
}
</style>
</head>
<body>
<div class="example">
<h2>Box Shadow Inside</h2>
<div class="box shadow-inside"></div>
<br>
<h2>Box Shadow Outside</h2>
<div class="box shadow-outside"></div>
</div>
</body>
</html>FAQ 相关问题解答
以下是与此主题相关的更多常见问题解答：
Advertisements