HTML/CSS“阴影”边框？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5853162/
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
HTML/CSS "shadow" border?
提问by Matt
I tried looking in Chrome's Inspect Element,but I could not find out how this page here [ http://www.mousehuntgame.com/] makes a shadowtype border? On either side of the middle box [with all the page content], it fades to a darker blue, creating a shadow effect.
我尝试在 Chrome 的Inspect Element 中查找，但我无法找到此处 [ http://www.mousehuntgame.com/]页面如何制作阴影类型边框？在中间框（包含所有页面内容）的两侧，它会逐渐变暗为深蓝色，从而产生阴影效果。
I want to use that for my website. What's the code? Is it CSS? Thanks!
我想在我的网站上使用它。代码是什么？是 CSS 吗？谢谢！
回答by thirtydot
They're using an image:
他们正在使用图像：
(it's actually 1pxhigh, I just stretched it here for clarity)
（它实际上1px很高，为了清楚起见，我只是在这里拉伸了它）
You could do it with CSS3's box-shadow, see here for a rough example: http://jsfiddle.net/B9Uyj/1/
你可以用CSS3'sbox-shadow来做，看这里的粗略例子：http: //jsfiddle.net/B9Uyj/1/
To make box-shadowwork in older versions of IE, you can use CSS3 PIE. (It already works in IE9)
要box-shadow在旧版本的 IE 中工作，您可以使用CSS3 PIE。（它已经在 IE9 中工作了）
An image would be the easiest option here.
图像将是这里最简单的选择。
回答by robx
if you want CSS3 you can style your text with
如果你想要 CSS3，你可以用
text-shadow: red 2px 2px 2px;
do box shadow with
做盒子阴影
-moz-box-shadow: 6px 6px 5px #CCC;
-webkit-box-shadow: 6px 6px 5px #CCC;
box-shadow: 6px 6px 5px #CCC;
for simplicity of background gradients you can use this site http://gradients.glrzad.com/
为了简化背景渐变，您可以使用此站点 http://gradients.glrzad.com/
回答by kammy
This Css code will give solid border to division and Shadow, as used in the page in your link.
此 CSS 代码将为分区和阴影提供实心边框，如链接中的页面所用。
-moz-border-radius: 20px;
-khtml-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
overflow:hidden;
background:#F6E7B9;
-webkit-box-shadow:0 0 4em rgb(4,6,5);
-moz-box-shadow:0 0 3em rgb(6,7,8);
box-shadow:0 0 1em rgb(5,9,2);
border:20px solid skyblue;
font-family:Verdana, Geneva, sans-serif;
回答by Marty
I normally set the background-image of a container to be a whatever x 10 pixel image which would be 20 pixels on each side worth of shadow, and then repeat vertically. Assuming your whitespace is 960px wide with 20px each side of shadow, use:
我通常将容器的背景图像设置为任何 x 10 像素的图像，其阴影的每一侧为 20 像素，然后垂直重复。假设您的空白宽度为 960 像素，阴影的每一侧为 20 像素，请使用：
<div class="box">
content
</div>
CSS:
CSS：
div.box
{
background: url(image-with-shadow.png) repeat-y;
padding: 0 20px;
width: 960px;
}
Here's an example of an image to use: http://projectavian.com/repeat.png
这是要使用的图像示例：http: //projectavian.com/repeat.png
回答by iosfreak
I believe they are doing it with the images. Search 'active' and check out all their stuff in this stylesheet: http://www.mousehuntgame.com/css/en/tabbarview.css?v=98&t=1294342331
我相信他们是用图像来做的。搜索“active”并在此样式表中查看他们的所有内容：http: //www.mousehuntgame.com/css/en/tabbarview.css?v=98&t= 1294342331
