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 1px
high, 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-shadow
work 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