html - How to give outer glow effect to column in HTML/CSS?

Question

I am creating a website, and I want to create this effect of giving an outer glow shadow to the main column in the page ..

This page serves as an example: http://royalwatches.pk/

Note that the main column has a shadow effect on both left and right sides, to make the column appear to be 'in front' of the background.

This picture also show's what I'm talking about:

enter image description here

This is the page where I want to replicate this effect: http://blu-rays.pk/index.php

Can someone guide me on what CSS/HTML changes need to be done ?

Sidenote: Putting this all in jsfiddle seemed impractical, which is why I've mentioned the sites instead ..

score 11 · Accepted Answer

您可以使用box-shadow属性。

CSS

img{
    box-shadow: 0px 0px 5px gray;
}

或者在你的情况下：

#wrapper{
    box-shadow: 0px 0px 5px gray;
}

注意：删除background-imagefrom #wrapper。

score 2 · Accepted Answer

请记住添加代码，以便阴影在更多浏览器中可见，如下所示：

#wrapper { 
-moz-box-shadow:    0px 0px 5px gray;
-webkit-box-shadow: 0px 0px 5px gray;
box-shadow:         0px 0px 5px gray;
}

2 回答 2