css_radius-corner语法分析

文章目录

• radius-coner
• • reference
  • Border Radius Property
  • • Syntax
    • Values
  • 正圆圆角语法现象分析
  • • • 1 Value:
      • 2 Values:
      • 3 Values:
      • 4 Values:
  • radius-corner的4个成分属性
  • 椭圆圆角和斜杠'/'语法

radius-coner

reference

• CSS Border Radius Generator - CSS Portal
• border-radius - CSS: Cascading Style Sheets | MDN (mozilla.org)
• CSS border-radius Property - CSS Portal
• w3c

Border Radius Property

• The CSS property border-radius allows you to make a rounded border or round the corners of an element. The value of the property determines the radius of the circle. When using the property, instead of drawing the usual right corners of the element, a rounded frame with rounded corners will be used according to an arc of a circle with a given radius:

  • 

• Fig.1 - Border-Radius Circle Example.

• The CSS property border-radius can contain from one to four values, separated by spaces.

• The number of values determines how the corner rounding radii are set.

Syntax

border-radius: [ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?

Values

• <length>
  • *Denotes the size of the circle radius or the semi-major and semi-minor axes of the ellipsis. *
  • *It can be expressed in any unit allowed by the CSS<length>data types. *
  • Negative values are invalid.
• <percentage>
  • *Denotes the size of the circle radius, or the semi-major and semi-minor axes of the ellipsis, using percentage values. *
  • *Percentages for the horizontal axe refer to the width of the box, percentages for the vertical axe refer to the height of the box. *
  • Negative values are invalid.

正圆圆角语法现象分析

• one to four values are possibly specified

• If more than one value is specified, corner rounding is set starting at the top left corner:

1 Value:

Example: div { border-radius: 10px; }
The first value - Sets the radius for all corners of the block.

2 Values:

Example: div { border-radius: 10px 20px; }
First value - Sets the radius for the top left and bottom right corners of the block.
Second value - Sets the radius for the top right and bottom left corners of the block.

3 Values:

Example: div { border-radius: 10px 20px 5px; }
First value - Sets the radius of the rounding of the top left corner of the block.
Second value - Simultaneously sets the radius for the top right and bottom left corners of the block.
Third value - Sets the radius of the bottom right corner of the block.

4 Values:

Example: div { border-radius: 10px 20px 5px 40px; }
First value - Sets the radius of the top left corner of the block.
Second value - Sets the radius of the top right corner of the block.
Third value - Sets the radius of the bottom right corner of the block.
The fourth value - Sets the radius of the bottom left corner of the block.

radius-corner的4个成分属性

• In addition to the border-radius property, you can also set the radius of each corner of the block separately using the following CSS propeties:

• border-top-left-radius - Rounds the top-left corner of an element.

• border-top-right-radius - Rounds the top-right corner of an element.

• border-bottom-left-radius - Rounds the bottom left corner of an element.

• border-bottom-right-radius - Rounds the bottom right corner of an element.

椭圆圆角和斜杠’/'语法

• The border-radius property also allows you to round off corners as an oval arc rather than a circle:

  • 

• Fig.2 - Border-Radius Ellipse Example.

To define an oval, a combination of two values is used, separated by an /symbol:

border-radius: 20px / 35px;

• The value to the left of the slash defines the horizontal radius and the value to the right defines the vertical radius.

• Each of the two parts (before and after the slash) follows the same rules as when creating round radius.

• This means that each part can contain from one to four values, separated by spaces.

• And the number of specified values will determine how the corner radii are set.

  • For example, the four values :

    • before the symbol / representthe horizontal radii for the top-left, top-right, bottom-right, and bottom-left corners.

    • The values after the symbol /respectively representthe vertical radii for the same corners.

    • Example: div { border-radius: 25px / 10px; }
      First value - Sets the radius of the horizontal radius of each corner of the block.
      Second value - Sets the radius of the vertical radius of each corner of the block.