Rounded borders, shadows, picture borders, outlines, box-sizing

border-radius@3 rounded border

Property description: Set or get the rounded border of the object, compound property

Grammar template:

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

Default value: set per individual property

Property value description:

<length>：用长度值设置对象的圆角半径长度，不允许负值;

<percentage>：用百分比设置对象的圆角半径长度，不允许负值;

Applicable elements: all elements

Is it inheritable: No

Whether it is animated or not: set according to each independent property

Script interface: borderRadius

Note: Provide 2parameters, separated 2by parameters “/”. Each parameter is allowed to set 1~4parameter values. The first 1parameter represents the horizontal radius, and the third 2parameter represents the vertical radius. If the first 2parameter is omitted, it defaults to the first parameter:

• Horizontal radius: If all four parameter values ​​are provided, the four corners will be acted on in the order of top left top-left, top right top-right, bottom right bottom-right, and bottom left .bottom-left
• If only one is provided, it will be used for all four corners
• If two are provided, the first one is used for top left top-leftand bottom right bottom-right, and the second one is used for top right top-rightand bottom left.bottom-left
• If three are provided, the first is used for top left top-left, the second is used for top right top-rightand bottom left bottom-left, and the third is used for bottom right.bottom-right
• The vertical radius also follows the above 4point

---

---

border-top-left-radius@3

Property description: Set or get the upper left corner rounded border of the object

Grammar template:

border-top-left-radius：[ <length> | <percentage> ]{
    
    1,2}

default value: 0

Property value description:

<length>：用长度值设置对象的左上角(top-left)圆角半径长度，不允许负值;

<percentage>：用百分比设置对象的左上角(top-left)圆角半径长度，不允许负值;

Applicable elements: all elements

Is it inheritable: No

Is it animated: Yes

**Script interface: **borderTopLeftRadius

Note: Provide 2parameters, 2separated by spaces. Each parameter is allowed to set 1parameter values. The first 1parameter represents the horizontal radius, and the third 2parameter represents the vertical radius. If the 2parameter is omitted, it defaults to the 1parameter value

---

---

border-top-right-radius, border-bottom-right-radius, border-bottom-left-radiusattributes are the same as the border-top-left-radius attribute and will not be described here.

---

---

box-shadow@3 object shadow

Property description: Set or get object shadow

Grammar template:

box-shadow：none | <shadow> [ , <shadow> ]*

<shadow> = inset? && <length>{
    
    2,4} && <color>?

default value: none

Property value description:

none：无阴影;

<length>①：第1个长度值用来设置对象的阴影水平偏移值，可以为负值;

<length>②：第2个长度值用来设置对象的阴影垂直偏移值，可以为负值;

<length>③：如果提供了第3个长度值则用来设置对象的阴影模糊值，不允许负值;

<length>④：如果提供了第4个长度值则用来设置对象的阴影外延值，可以为负值;

<color>：设置对象的阴影的颜色;

inset：设置对象的阴影类型为内阴影，该值为空时，则对象的阴影类型为外阴影;

Applicable elements: all elements

Is it inheritable: No

Whether it is animated: Yes, except when switching between inner and outer shadows

Script interface: boxShadow

Note: Multiple sets of effects can be set, and each set of parameter values ​​is separated by commas.

---

---

border-image@3image border

Property description: Set or get the border style of the object to fill with an image, compound property

Grammar template:

border-image：<' border-image-source '> || <' border-image-slice '> [ / <' border-image-width '> | / <' border-image-width '>? / <' border-image-outset '> ]? || <' border-image-repeat '>

Default value: set per individual property

Property value description:

/***css3中添加的新属性***/

Applicable elements: set according to each independent attribute

Is it inheritable: None

Whether it is animated or not: set according to each independent property

Script interface: borderImage

Note: Use image overrides <border-style>to define border styles. When <border-image>is noneor the image is not visible, <border-style>the border style effect defined by will be displayed

---

---

border-image-source

Property description: Set or get the border style of the object using the image path

Grammar template:

border-image-source：none | <image>

default value: none

Property value description:

none：无背景图片;

<image>：使用绝对或相对地址指或者创建渐变色来确定图像;

Applicable elements: all elements, except table elements set <border-collapse>tocollapse

Is it inheritable: No

Is it animated: No

Script interface: borderImageSource

---

---

border-image-slice@3

Property description: Set or get the segmentation method of the object's border background image

Grammar template:

border-image-slice：[ <number> | <percentage> ]{
    
    1,4} && fill?

default value: 100%

Property value description:

/***css3中添加的新属性***/

Applicable elements: all elements, except table elements set <border-collapse>tocollapse

Is it inheritable: No

Is it animated: No

Script interface: borderImageSlice

Note: This attribute specifies to separate the image from the top, right, bottom, and left directions, divide the image into 4corners 4, and share the edges with the middle area 9. The middle area is always transparent (that is, there is no image filling) unless the key is added. Characterfill

---

---

border-image-width@3

Property description: Set or get the border thickness of the object

Grammar template:

border-image-width：[ <length> | <percentage> | <number> | auto ]{
    
    1,4}

default value: 1

Property value description:

<length>：用长度值指定宽度，不允许负值;

<percentage>：用百分比指定宽度，参照其包含块进行计算，不允许负值;

<number>：用浮点数指定宽度，不允许负值;

auto：如果auto值被设置，则 <border-image-width> 采用与 <border-image-slice> 相同的值;

Applicable elements: all elements, except table elements set <border-collapse>tocollapse

Is it inheritable: No

Is it animated: No

Script interface: borderImageWidth

Note: This attribute is used to specify how thick the border is to be used to carry the cropped image. This attribute can be omitted and is <border-width>defined by the external

---

---

border-image-outset@3

Property description: Set or get the extension of the object's border background image

Grammar template:

border-image-outset：[ <length> | <number> ]{
    
    1,4}

default value: 0

Property value description:

<length>：用长度值指定宽度，不允许负值;

<number>：用浮点数指定宽度，不允许负值;

Applicable elements: all elements, except table elements set <border-collapse>tocollapse

Is it inheritable: No

Is it animated: No

Script interface: borderImageOutSet

Note: This attribute is used to specify the value defined by the outward extension of the border image. That is, if the value is 10px, the image will be extended outward based on the original value 10pxand then displayed .

---

---

border-image-repeat@3

Property description: Set or get the tiling method of the object's border image

Grammar template:

border-image-repeat：[ stretch | repeat | round | space ]{
    
    1,2}

default value: stretch

Property value description:

stretch：指定用拉伸方式来填充边框背景图;

repeat：指定用平铺方式来填充边框背景图，当图片碰到边界时，如果超过则被截断;

round：指定用平铺方式来填充边框背景图，图片会根据边框的尺寸动态调整图片的大小直至正好可以铺满整个边框;

space：指定用平铺方式来填充边框背景图，图片会根据边框的尺寸动态调整图片的之间的间距直至正好可以铺满整个边框;

Applicable elements: all elements, except table elements set <border-collapse>tocollapse

Is it inheritable: No

Is it animated: No

Script interface: borderImageRepeat

Note: This attribute is used to specify the filling method of the border background image. 0-2Parameter values ​​can be defined , namely horizontal and vertical directions. If 2the values ​​​​are the same, they can be merged into 1, indicating that the border background image is filled in the same way in both horizontal and vertical directions; if 2the values ​​​​are both stretch, they can be omitted.

outline outline

Property description: Set or get the characteristics of the object outline,

**Default:**Do not display

**General description:** Most of the content is the same as border

Special attribute values:

outline-offset:	[length]px;
轮廓线的偏移量，正值向外偏移，否则向元素内部偏移
caret-color   光标的颜色


outline：<outline-width> || <outline-style> || <outline-color>

<outline-width>：指定轮廓边框的宽度;

<outline-style>：指定轮廓边框的样式;

<outline-color>：指定轮廓边框的颜色;

**Usage scenario:**The blinking border of the input text box can use outlines

Notice:

• Contour lines are also called decorative lines. They do not occupy space, so they overlap. If you want no overlap, you can set the margin value.
• The attributes related to outlines do not occupy layout space and will not affect the size of elements, but they will also cause cascading.
• outlinesMay be non-rectangular
• <border>It is not allowed to split itself into <border-top>, <border-right>, <border-bottom>, like attributes.<border-left>
• The outline attribute can be extended to outline-width, outline-style, and outline-color attributes. Its characteristics are similar to border and will not be described here.

Additional example: Triangle

• code

<head>
<style>
    div{
      
      
        width: 0px;
        height: 0px;
        border-style: solid;
        border-width: 40px;
        border-color: black yellow transparent rgba(0, 0, 0, 0);
    }
</style>
</head>
<body>
    <div></div>
</body>

• Solution

  Bold the border, set the content size to 0, so there is no content, the border will occupy the entire container, and then only keep any one or both sides of the border to display a triangle (the bevel problem of adjacent margins is explained above)

outline-offset@3

Property description: Set or get the value of the line outline offset container outside the object

Grammar template:

outline-offset：<length>

default value: 0

Property value description:

/***css3中添加的新属性***/

Applicable elements: all elements

Is it inheritable: No

Whether it is animated: Yes, when the value <length>is

Script interface: outlineOffset

Note: outline-offset The boundary is used borderas the reference point. From 0the beginning, positive values border​​extend outward from the boundary, and negative values border​​shrink inward from the boundary.

---

---

## box-sizing@3

Property description: set or get

Grammar template:

box-sizing：content-box | border-box

default value: content-box

Property value description:

content-box：padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和，即 ( Element width = width + border + padding )此属性表现为标准模式下的盒模型;

border-box：padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 ( Element width = width )此属性表现为怪异模式下的盒模型;

Applicable elements: all elements that accept <width>and<height>

Is it inheritable: No

Is it animated: No

Script interface: boxSizing