主要代码
-moz-box-shadow: 0px 0px 8px 3px rgba(0, 0, 0, 0.2) inset;/* For Firefox3.6+ */
-webkit-box-shadow: 0px 0px 8px 3px rgba(0, 0, 0, 0.2) inset;/* For Chrome5+, Safari5+ */
box-shadow: 0px 0px 8px 3px rgba(0, 0, 0, 0.2) inset;
效果
image.png
全部代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3 四周内阴影</title>
<style>
.box-shadow {
width: 100px;
height: 100px;
background-color: #EC9404;
-moz-box-shadow: 0px 0px 8px 3px rgba(0, 0, 0, 0.2) inset;/* For Firefox3.6+ */
-webkit-box-shadow: 0px 0px 8px 3px rgba(0, 0, 0, 0.2) inset;/* For Chrome5+, Safari5+ */
box-shadow: 0px 0px 8px 3px rgba(0, 0, 0, 0.2) inset;
border-radius: 5px;
color: white;
padding: 5px;
line-height: 90px;
text-align: center;
}
</style>
</head>
<body>
<div class="box-shadow">box-shadow</div>
</body>
</html>