Css3 early adopters (3): use the new feature of css3 to implement (elliptical) rounded border and image border

Many corner borders implemented by CSS are available on the Internet, but these methods are complicated. Currently, the css3 standard provides a simple method to implement corner borders, elliptical corner borders, and image borders. In css3, the border-radius and border-image attributes are added to the border definition to implement these functions. The border module of css3 defines the following attributes:

Attribute name	Attribute Value
Border	Border-width | border-style | border-color
Border-top	Border-top-width | border-top-style | border-top-color
Border-top-Width	Number | thin | medium | thick
Border-top-style	None | hidden | dotted | dashed | Solid | double | groove | ridge | inset | outset
Border-top-color	Color
Border-Right	Border-right-width | border-right-style | border-right-color
Border-right-Width	Number | thin | medium | thick
Border-right-style	None | hidden | dotted | dashed | Solid | double | groove | ridge | inset | outset
Border-right-color	Color
Border-bottom	Border-bottom-width | border-bottom-style | border-bottom-color
Border-bottom-Width	Number | thin | medium | thick
Border-bottom-style	None | hidden | dotted | dashed | Solid | double | groove | ridge | inset | outset
Border-bottom-color	Color
Border-left	Border-left-width | border-left-style | border-left-color
Border-left-Width	Number | thin | medium | thick
Border-left-style	None | hidden | dotted | dashed | Solid | double | groove | ridge | inset | outset
Border-left-color	Color
Border-radius	Number | % {} [/number | % {}]? Border-top-left-radius border-top-right-radius border-bottom-left-radius
Border-top-left-radius	Number | %
Border-top-right-radius	Number | %
Border-bottom-right-radius	Number | %
Border-right-left-radius	Number | %
Border-Image	Border-image-source border-image-slice border-image-width border-image-outset border-image-repeat
Border-image-Source	None | URL
Border-image-slice	[% | Number] {1, 4} & fill?
Border-image-Width	[Length | % | Number | auto] {1, 4}
Border-image-outset	[Length | Number] {1, 4}
Border-image-repeat	[Stretch | repeat | round | space | none] {1, 2}
Border-collapse	Collapse | separate
Box-break	Continuous | each-box
Box-shadow	Inset | [length, length | color] | none

Border-radius forms an oval rounded corner of 1/4 at the four corners of the element. If no border exists, that is, the Border width is 0, the rounded corner of the background still exists. This attribute is represented in the form of a/B, where a represents the horizontal radius, and B represents the vertical radius. The two values can be either a length value or a percentage value. The percentage is calculated based on the width of the element. Border-radius is a short form. It also represents the elliptical angle of the four corners. It is set in the order of top-left, top-right, bottom-right, and bottom-left. Note: The method in Firefox is as follows: -Moz-border-radius-topleft,-moz-border-radius-topright,-moz-border-radius-bottomright, and-moz-border-radius-bottomleft.

For example, border-radius: 10px is equivalent to border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px ;.

The following is an example to illustrate these usage.

About rounded border and elliptical border:

If you set a value, the horizontal and vertical radius of the four corners is 10px. If there is no border, the background is still rounded. The style in this example:

-Moz-border-radius: 10px; border-radius: 10px; border-width: 2px 2px 0 0; Background-color: RGB (255,239,217 );

If two values are set, the first value indicates top-left and bottom-right, and the second value indicates top-right and bottom-left, that is, the opposite corner is the same. The code for this style is:

-Moz-border-radius: 10px 20px; border-radius: 10px 20px;

If three values are set, the second value indicates top-right and bottom-left. The code for this style is:

-Moz-border-radius: 10px 20px 40px; border-radius: 10px 20px 40px;

If the value is four, it is set in the order of top-left, top-right, bottom-right, and bottom-left. Note: browsers using WebKit engines such as chrome, Safari, and sogou (not tested) are not fully supported, -WebKit-border-radius supports only one value or two values, representing the two radius of the elliptic.

The style of the browser using the WebKit engine is different from that of fireofx. The style of the same effect is as follows:

-WebKit-border-radius: 10px 20px;-moz-border-radius: 10px/20px

Set a single rounded corner:

-WebKit-border-top-right-radius: 20px;-moz-border-radius-topright: 20px; border-top-right-radius: 20px;

About the image border:

Border-Image

: It is the abbreviated form of border-image-source border-image-slice border-image-width border-image-outset border-image-repeat;
Border-image-Source

: Set the image address. If none is set, no border image is displayed. Other style settings are displayed;
Border-image-slice

: Sets the offset from the top, right, bottom, and left edges of the image to the inner. If it is set as a percentage, it indicates the size of the image. The width of the image in the horizontal direction and the height of the image in the vertical direction. If it is set to a number, it is only the size of the image coordinate. Fill indicates that the middle part is retained.
Border-image-Width

: Set the Border Width border-image-repeat: Set the zoom and Paster Mode

The following is a simple example:

The border image is used as an example. However, the three browsers of this style have different effects. It seems that these property Browsers Do not support very well. This style code:

-Moz-border-image: URL (http://dotnet.aspx.cc/Images/copyright.gif) 16 16 round stretch;-WebKit-border-image: URL (http://dotnet.aspx.cc/Images/copyright.gif) 16 16 round stretch; border-width: 16px

The effects of the above examples are as follows: