Create a card image with rounded border and shadow, and create a shadow card with rounded border

Create a card image with rounded border and shadow, and create a shadow card with rounded border

Create a card image with rounded border and shadow

• Border-radius
• Use shadow box-shadow for cards

Create a rectangle at the bottom of the image using shadow

The internal elements directly overwrite the entire Shadow.

HTML section

<! Doctype html> 
CSS Section
<Style type = "text/css"> body {margin: 25px ;}. shadow {width: 290px; background-color: # FFF; box-shadow: 0 10px 10px 0 rgba (0,0, 0, 0.2 ); /* 0 shadow horizontal offset value (positive and negative values are recommended) 10px shadow vertical offset value (positive and negative values are recommended) 10px shadow Fuzzy Value rgba (0.2, 0) shadow color */margin-bottom: 25px;/* bottom margin */border-radius: 25px;/* Set rounded corner */-moz-border-radius: 25px; /* Old Firefox browser */} img {border-radius: 25px 25px 0px 0px;/* set the upper right and lower right corner */-moz-border-radius: 25px 25px 0px 0px;/* Old Firefox browser */}. container {text-align: center;/* text center */padding-bottom: 10px;/* bottom padding */} </style>
Image Display

This article ends here
 
 
Reference link http://www.w3school.com.cn/cssref/pr_box-shadow.asp for this article