HTML/CSS“阴影”边框？

我试着在Chrome的检查元素，，但我不明白如何在此页[http://www.mousehuntgame.com/]使一个影子类型边界？在中间框的任一侧（包含所有页面内容），它会变成深蓝色，从而产生阴影效果。HTML/CSS“阴影”边框？

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

来源

2011-05-02 Matt

您应该添加截图，因为链接可能在未来死亡。 – 2013-04-08 17:34:42

他们使用的图像：

（它实际上是1px高，我只是伸在这里为清楚起见）

您可以用CSS3's box-shadow做到这一点，在这里看到了一个粗略的例子：http://jsfiddle.net/B9Uyj/1/

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

图像将是最简单的选择。

来源

2011-05-02 03:16:54 thirtydot

是的，盒子影很快就会成为主流。 http://caniuse.com/#search=box-shadow – 2011-05-02 03:20:38

我检查了链接，这很漂亮。谢谢！ – Matt 2011-05-02 15:21:18

我通常将容器的背景图像设置为任何x 10像素图像，每个像素值为20像素，然后垂直重复。假设你的空白是960像素宽，20像素阴影的两侧，使用方法：

<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

来源

2011-05-02 03:12:16 Marty

我相信他们正在做的它与图像。在这个样式表搜索“活动”，并检查了所有的东西：http://www.mousehuntgame.com/css/en/tabbarview.css?v=98&t=1294342331

来源

2011-05-02 03:12:34 iosfreak

，如果你想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/

来源

2011-05-02 03:26:48 robx

这个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;

来源

2013-09-23 15:36:33 kammy

HTML/CSS“阴影”边框？

回答

相关问题