Question

我尝试查看Chrome的 Inspect Element，，但我无法了解此页面[http://www.mousehuntgame.com/]如何制作 shadow 类型边框？在中间框的两侧[包含所有页面内容]，它会渐变为深蓝色，从而产生阴影效果。

我想将它用于我的网站。代码是什么？是CSS吗？谢谢！

Answer 1

他们正在使用图片：

（它实际上是1px高，为了清晰起见，我只是将它拉伸到这里）

您可以使用CSS3's box-shadow执行此操作，请参阅此处查看粗略示例：http://jsfiddle.net/B9Uyj/1/

要使box-shadow在旧版IE中运行，您可以使用CSS3 PIE。（它已经在IE9中运行）

图像将是最简单的选择。

Answer 2

如果您想要CSS3，可以使用

设置文本样式

text-shadow: red 2px 2px 2px;

用

做框阴影

-moz-box-shadow: 6px 6px 5px #CCC;
-webkit-box-shadow: 6px 6px 5px #CCC;
box-shadow: 6px 6px 5px #CCC;

为了简化背景渐变，您可以使用此网站 http://gradients.glrzad.com/

Answer 3

此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;

Answer 4

我通常将容器的背景图像设置为x 10像素的图像，每个像素的阴影都是20像素，然后垂直重复。假设你的空白是960px宽，每边阴影20px，请使用：

<div class="box">
     content
</div>

CSS：

div.box
{
     background: url(image-with-shadow.png) repeat-y;
     padding: 0 20px;
     width: 960px;
}

以下是要使用的图片示例：http://projectavian.com/repeat.png

Answer 5

我相信他们正在用图像做这件事。搜索“有效”并查看此样式表中的所有内容：http://www.mousehuntgame.com/css/en/tabbarview.css?v=98&t=1294342331

HTML / CSS“阴影”边框？

5 个答案: