CSS div 内的阴影
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9665504/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Shadow inside of a div
提问by Tim Daubenschütz
Is it possible to display a shadow inside a div box without using pictures? Instead I want to use css commands.
是否可以在不使用图片的情况下在 div 框内显示阴影？相反，我想使用 css 命令。
So is there some command like: -webkit-box-shadow: 1px inset;?
那么是否有一些命令，例如：-webkit-box-shadow: 1px inset;？
回答by sandeep
Yup there is a command inset. like this:
是的，有一个命令inset。像这样：
-webkit-box-shadow: 0 0 1px 3px #000 inset;
-moz-box-shadow: 0 0 1px 3px #000 inset;
box-shadow: 0 0 1px 3px #000 inset;
You can generate from here http://css3generator.com/
您可以从这里生成http://css3generator.com/
回答by oezi
in CSS3 theres box-shadowwich can also be inset to do exactly what you need. this is supported by the following browsers:
在 CSS3中，也可以插入box-shadow来满足您的需求。以下浏览器支持此功能：
- chrome >= 10.0 (>= 4.0 with
-webkit-prefix) - firefox >= 4.0 (>= 3.5 with
-moz-prefix) - IE >= 9.0
- opera >= 10.5
- safari >= 5.1 (>= 5.0 with
-webkit-prefix)
- 铬 >= 10.0（>= 4.0 带
-webkit-prefix） - firefox >= 4.0（>= 3.5 带
-moz-prefix） - 浏览器 >= 9.0
- 歌剧 >= 10.5
- safari >= 5.1（>= 5.0 带
-webkit-prefix）
回答by Arunraj S
You can use Box shadow generatorfor shadow effects. I will give an example to show how to use the box shadow generator.
您可以使用 Box shadow generator来制作阴影效果。我将举一个例子来展示如何使用框阴影生成器。
Step 1: Go to : Box Shadow Generator
第 1 步：转到：框阴影生成器
Step 2: adjust the shadow property you want to add.
第二步：调整要添加的阴影属性。
Step 3: Then copy the css code using "copy text" button.
第 3 步：然后使用“复制文本”按钮复制 css 代码。
step 4: Then you can past the css code into the style sheet file.
第 4 步：然后您可以将 css 代码粘贴到样式表文件中。
Do like this.
这样做。
<html>
<head>
<title>Title</title>
<style type="text/css">
#banner{
position: absolute;
width: 100%;
height: 150px;
background-color: #4E6C88;
-webkit-box-shadow: -1px 9px 18px 0px rgba(0,0,0,0.75);
-moz-box-shadow: -1px 9px 18px 0px rgba(0,0,0,0.75);
box-shadow: -1px 9px 18px 0px rgba(0,0,0,0.75);
}
</style>
</head>
<body>
<div id="banner">
</div>
</body>
</html>
Thank you... ;)
谢谢... ;）
