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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 08:21:03  来源:igfitidea点击:

HTML/CSS "shadow" border?

htmlcssborder

提问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