Bordure "shadow" HTML/CSS?

Question

J'ai essayé de regarder dans Inspecter l'élément de Chrome, mais je ne pouvais pas savoir comment cette page ici [http://www.mousehuntgame.com/] fait un shadow type border? De chaque côté de la boîte du milieu [avec tout le contenu de la page], il devient un bleu plus foncé, créant un effet d'ombre.

Je veux l'utiliser pour mon site Web. Quel est le code? Est-ce CSS? Merci!

Answer 1

Ils utilisent une image:

(il est en fait 1px haute, je viens étirées ici pour plus de clarté)

Vous pouvez le faire avec CSS3's box-shadow, voir ici pour un exemple grossier: http://jsfiddle.net/B9Uyj/1/

Pour que box-shadow fonctionne dans les anciennes versions d'Internet Explorer, vous pouvez utiliser CSS3 PIE. (Cela fonctionne déjà dans IE9)

Une image serait l'option la plus simple ici.

Answer 2

Normalement, l'image d'arrière-plan d'un conteneur doit être une image de x 10 pixels, ce qui correspond à 20 pixels de chaque côté de l'ombre, puis répéter verticalement. En supposant que votre espaces blancs est 960px de large avec 20px chaque côté de l'ombre, utilisez:

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

CSS:

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

Voici un exemple d'une image à utiliser: http://projectavian.com/repeat.png

Answer 3

Je crois qu'ils font avec les images. Recherche « active » et de vérifier tous leurs trucs dans cette feuille de style: http://www.mousehuntgame.com/css/en/tabbarview.css?v=98&t=1294342331

Answer 4

si vous voulez CSS3 vous pouvez le style de votre texte avec

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

faire ombre boîte avec

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

pour la simplicité de fond que vous gradients pouvez utiliser ce site http://gradients.glrzad.com/

Answer 5

Cette Css Le code donnera une bordure solide à la division et à l'ombre, tel qu'utilisé dans la page de votre lien.

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