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

Source: Internet
Author: User
Tags border image dotnet

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:

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.