Front-end note Nine, background, borders, and patch-related properties

Common background-related properties : The following properties are set within a style

background: Sets the background style of an object, and it is not recommended to control it directly through this property. background-attachment: Sets whether the background picture is scrolled or fixed with the contents of the object, with optional values:Scroll: Scrolls with content scrollingfixed: Background image fixation Background-color: Sets the background color and overwrites the background color if the background image is set Background-image: Setting a background picture, using the URL () function background-position: Sets the position of the object's background picture, the first is the horizontal axis, and the second represents the ordinate background-repeat: Sets whether the background picture is tiled and optional:Repeat: Tilingno-repeat: Uneven shoprepeat-x: Tile only horizontallyrepeat-y: Tile only vertically Background-clip: Sets the range of background overrides and supports the following property values border-box: Specifies the background overlay border area (border), Inner patch area (padding), content area (contents). no-clip: Specifies the background overlay border area (border), Inner patch area (padding), content area (contents). padding-box: Specifies the background overlay inner patch area (padding), content area (contents). Content-box: Specifies that the background covers only the content area (contents). Background-origin: Sets the starting point of the background overlay, similar to the previous background-position, an optional property valueborder: Specifies that the background picture is overwritten from the bounding areapadding: Specifies that the background image is overwritten from the inner patch areaContent : Specifies that the background picture is overwritten from the content area background-size: Sets the size of the background picture, with two values representing the width and height of the picture, available values:value: For example 20pt, direct sizeA percentage, such as 80%, that represents the percentage of the width or height of the component in which it residesAuto: Specifies that the background picture is scaled to maintain aspect ratioWhen Background-origin and background-size are used in Safari, Chrome, if you don't read, you can specify multiple background images in the previous add-webkit-, and each attribute needs to be specified, separated by commas border-related properties Border: Composite properties, you can set the thickness of the border, line, color, etc. Border-color: Sets the color of the borderprovides 4 values, indicating the color of the top, right, bottom, and left four borders, respectivelyprovides 3 values, representing the color of the top, left, and bottom three borders, respectivelyprovides 2 values, indicating the color of the top, bottom, and left borders, respectivelyprovides 1 values, which indicates the color of the upper and lower left and right common Border-style: Sets the border style of the component, the number of values and the same Border-width: Sets the line width of the border, the number of values and the same Border-top: Composite property, setting the style of the top border Border-top-color: Sets the color of the top border Border-top-style: Sets the style of the top border Border-top-width: Sets the top border of the line width top to the left, right, Bottom for the left border, the right border, the bottom box where the color can be any valid color value, the line width can be any valid length value, linear can support the following values:None: No BorderHidden: Hide Borderdotted: Dot line borderdashed: Dashed borderSolid: Solid line borderDouble: two-line bordergroove:3d Groove Borderridge:3d convex groove Borderinset:3d Recessed Borderoutset:3d Bulge Border Gradient Border border-top-colors: Sets the color of the top border, if the width of the top border is npx, you can set n colors, and if the number of colors is less than n, the last color will overwrite the remaining width border-right-colors,border-bottom-colors Border-left-colors The main note: This gradient border is not implemented in the actual code rounded Border Border-radius:Set fillet radius for Four Corners Border-top-left-radius: Sets the corner radius of the upper-left corner Border-top-right-radius,border-bottom-left-radius, Border-bottom-right-radius Picture Border： Border-image: The following format:<border-image-source> <border-image-slice>[/<border-image-width>]?<border-image-repeat >among them,Border-image-source: Specifies the border picture, which can be none or the URL () the specified pictureBorder-image-slice: Specifies whether 1~4 values or percentages represent how the border picture is split. For example, 10 20 30 40 means that the distance from the bottom right of the left border is 10px 20px 30px 40px and parallel to the corresponding border cutting line cut, the middle of the picture is discarded, the other part as a border, unless the fourth value is added after the &&fill border-image-width: Specify the width of the image, four valuesBorder-image-repeat: Set the overlay of the border picture, support stretch,repeat,round three kinds of, respectively, the extension overlay, tile overlay, take the whole tile three kinds patch-related properties internal patch related properties: padding: 4 values can be set to indicate the internal distance between the upper and lower left and right four sides, set 3, 2, a value is the same as the previous correspondence Padding-top: Set the top of the inner patch distance padding-bottom,padding-left, Padding-right external Patch related properties: margin: Set the external patch distance, correspondence relationship and padding consistent margin-top,margin-bottom,margin-left,margin-right

Front-end note Nine, background, borders, and patch-related properties