CSS3 Common attributes (i)--borders, backgrounds

Today, the interface is extremely rich, the traditional html+css has not been able to keep up with the pace of the Times, in the CSS3, there are too many very useful properties, can be very convenient to make all kinds of cool effect, next, I will cite some of the commonly used CSS3 properties.

Border-radius: Rounded corners.

/* rounded corners of Four corners are 50px */ border-radius:50px   /* The rounded corner at the top right of the top left is 50px, and the rounded corner on the lower right of the left is 100px */ border-radius:10px 20px 30px 40px;   /* The first value is top left, the second value is upper right, the third value is lower right, and the fourth value is lower left */ -webkit-border-radius:50px  100px; /* Four Corner level is 50px, vertical is 100px */

Box-shadow: Element Shadow.

box-shadow:10px 20px 5px 10px red inset; /* The first value indicates the shadow horizontal offset (required), the second value indicates the shadow vertical offset (required), the third value indicates the shadow feather value (required), the fourth value represents the shadow size, the fifth value represents the shadow color (required), and the sixth value indicates the inner shadow */

Border-image: Border picture. The Border-image property can be used to add a background image to the border of an element. The ' Border-image ' property is a composite attribute used to set ' Border-image-source ', ' border-image-slice ', ' border-image-width ', ' Border-image-outset ' and the value of ' border-image-repeat '.

 border-image-source:url (1.png);  /*   */  border-image-slice:33;  /*   image bounds Inward offset 33%   */ border-image-width:20px;  /*   */ border-image-outset:20px;  /*   */ border-image-repeat:stretch;  /*   Whether the image border should be tiled (repeat), covered (round), or stretched (stretch default)  */ 

In the CSS3, background has some additions, and now the three commonly used new background properties are cited.

Background-size, controls the size of the background image.

background-size:100%;/*The background image width is the same as the element width, and the height is auto*/background-size:100% 100%;/*The background image is the same width and height as the element width, and the picture may be stretched*/background-size:100px;/*background Image width is 100px, height is auto*/background-size:100px 100px;/*background Image Width height is 100px, picture may be stretched*/Background-size:cover;/*The background image has a smaller edge that fills the entire element and the other side auto*/Background-size:contain;/*the large side of the background image is covered with the entire element, and the other side auto*/

Background-clip, the following can be assigned a value of three, namely: Border-box (Border Field), Padding-box (Inner spacing field), Content-box (Content field), which means the background in which area to display.

Background-origin, the same can be assigned three kinds, namely: border-box (Border Field), Padding-box (Inner spacing field), Content-box (Content field), which means the background picture in which area, Even if does not set the background positioning properties, the background image where the origin falls within.

CSS3 Common attributes (i)--borders, backgrounds