CSS border (rounded corner, shadow, background image), css border

CSS border (rounded corner, shadow, background image), css border

 

1. rounded corner
Border-radiusIs to add a rounded border to the element.
Usage:
Border-radius: 10px;/* All corners use rounded corners with a radius of 10 PX */
Border-radius: 5px 4px 3px 2px;/* The Four radius values are the upper left corner, the upper right corner, the lower right corner, and the lower left corner, clockwise */
 
Solid circle:
Div {height: 100px;/* Consistent with width setting */width: 100px; background: # 9da; border-radius: 50px; /* set the four rounded corners to half the width or height value */}
Solid upper half circle:
Div {height: 50px;/* is half of width */width: 100px; background: # 9da; border-radius: 50px 50px 0 0; /* set the radius to at least the value of height */}

 

2. Shadow
Box-shadow: X axis offset Y axis offset [shadow blur radius] [shadow extended radius] [shadow color] [Projection mode];
Shadow blur radius: this parameter is optional. Its value can only be a positive value. If its value is 0, it indicates that the shadow has no blur effect. The greater the value, the blurrier the edge of the shadow;
Radius of shadow Extension: this parameter is optional. The value can be positive or negative. If the value is positive, the entire Shadow is extended. If the value is negative, the shadow is reduced;
 
Add a shadow to the box. The projection mode can be internal or external. The inset mode is internal and the default mode is external.
Sample Code:
.box_shadow{  box-shadow:4px 2px 6px #333333; }

3. Border
Background: url(xx.jpg) 10px 20px repeat;
// 10px 20px indicates the width of the cut image. There are three ways to extend the image: repeat, round, and stretch)