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「陰影」邊框？

回答

相關問題