In web design, adding shading to a picture is a great way to beautify it, often in design. Without Photoshop, just how do you add a shadow to a picture with CSS? Here's a very simple way.
How to achieve this effect? It's really simple, and here's all the code:
<html>
<head>
<style type= "Text/css" >
img{
border-top:1px solid #dcd7c8;
border-left:1px solid #dcd7c8;
border-right:1px solid #dcd7c8;
padding:5px 5px 9px 5px;
Background:url (shad_bottom.png) repeat-x NRC left;
}
</style>
</head>
<body>
<img src= "flower.jpg" alt= "Flower"/>
</body>
</html>
The three border properties of the IMG tag are to add three borders to the top, left, and right of the picture, and the color of the border should be the color closest to the real shadow, which looks like a real shadow. The Padding property leaves some space around the picture, the lower part of the picture leaves 9px of space to facilitate the addition of the background image, because the lower shadow effect is actually a 4px picture in the horizontal tile result, so to set aside 9px space, so minus the background image 4px space, The space around the picture looks the same. Zooming in on the bottom of the background picture is actually like this:
Of course, the shadow of this method is simply shadow effect, and no shadow gradient effect, but for our general web design is enough. Here's a more complicated English article about how to add shadows to a picture with CSS, if you want to make a more complex shadow effect, refer to it.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
