Let’s start with the border, which is pretty straightforward, the edge of the box. < span style = “border-width: 0px; border-color: 0px; border-style: 0px; The default value of border-width is medium (3px), but the default value of border-style is None, so the element does not display a border by default. In practice, we mostly use solid lines with solid color borders, and most of the time we use shorthand to set three attributes at the same time, like border: 2px solid #F1F1F1; border-color = currentcolor; border-color = currentcolor; The color property of the element is set to the same color as the font of the element, which can also be set to transparent border.
The understanding and use of border is generally quite simple. Designers generally do not make too complicated border, but write according to the width and color value set in the design. It is important to note that border affects the calculation of width. Since box-sizing defaults to content-box, the border width will be added to width and height, resulting in a larger visual size. Box-sizing: border-box for convenience, avoid calculating the size manually. In addition, border-width does not support percentage values.
Several other border-styles can be used to draw graphics. > > < span style = “font-size: 16px; line-height: 16px; font-size: 16px; But more complex graphics are now typically implemented in images or SVG. So we don’t pay too much attention.
The need for rounded edges is also common in design drafts. You can also set the radius of the four corners by using the border-radius attribute. If the radius is set to more than 50% of the size of the element, the element will appear as a circle. There is another detail, the rounded corners are drawn on the outer edge of the border, the inside is not rounded.
CSS3 also added the border-image attribute, which can draw graphics on the border. Since the use of border is mainly for decoration, and border graphics are also mainly for more beautification of the interface, it can be considered if it involves scenes requiring complex decoration, and the compatibility should be acceptable now. However, I have not actually used it, and I will supplement it later.
There are also some applications for drawing simple graphics such as triangles, which mainly use the folding Angle and color of the frame to create the required graphics visually. Sometimes, however, there are other implementation methods such as Transform or Linear-gradient. If you encounter such scenes, you can compare them. Choose the easiest way.
Then let’s look at the padding. When introducing box models, we usually refer to margin and padding as inner margin, but I feel that the padding and border are more closely related, which can be understood as inner border. The default value is 0, and only the width (or length) can be set, without setting style or color, and the percentage of the width is calculated relative to the width of the contained block. For simplicity, my general rule is not to use padding, but if you use it occasionally, think box-sizing.
background
Then we look at background, and if positioning creates a layer on top of the page, background creates a layer underneath the page. Background-color sets the background color, which is transparent by default. You can also set background-image, which shows the image above the background color. After CSS3, multiple background images can be set, separated by commas, but there is still only one background color. To achieve multiple background colors, gradient can be used, but the type of gradient is image, so background-image should also be set.
Since displaying images on a page is a common requirement, using the IMG tag to display images requires HTML changes, so background-image is the main way to set images in CSS. Most of the background properties are used to set how the image should be displayed. First, the position and size of the image are determined by background-position and background-size. The default value of background-position is 0, that is, from the upper left corner. Background-size is auto by default. Display according to original size of picture. As a background image, it cannot be displayed beyond the range of the element, so there is a background-clip attribute to set the range of the background. By default, it is border-box, that is, the background does not exceed the outer border of the border. You can also set it to padding-box or content-box to make sense. However, there is also a background-origin attribute, which specifies the starting position of the background calculation reference. The value is also the three boxes, the default is the padding-box. In fact, they are all used to determine the calculation method of the image display. Unless there are complex background location requirements.
There are also two background attributes, background-repeat and background-attachment, which are reserved from the early stage of web technology and rarely used in modern times. In particular, background-repeat is very annoying by default and needs to be reset every time. The property name is long, so I set background-repeat: no-repeat globally. background-size: 100%; background-position: center; Because most of the time, the background image is centered around the size of the element.
decoration
The syntax of outline is similar to that of border, but the style of each edge cannot be set separately. In addition, outline cannot show the rounded corners of elements, because it is drawn at margin. It can not be used to expand the click area, but it does not affect the layout, so it is more suitable for drawing the mask, especially for the hollow effect, can be achieved by setting a large width of the outline. But now outline cannot follow the rounded corners of elements, so box-shadow is needed to create a hollow mask on rounded corners. CSS3 adds an outline-offset property to change the position of the outline drawn, which can be used if you encounter complex multiple borders.
Then there’s box-shadow. Originally, this attribute is used to add shadows to elements, but it is very powerful and can even generate arbitrary shapes, such as shadow-image. There is too much syntax and too little practical application, so we won’t go into more details. You can refer to the MDN documentation, and there are visual generation tools to generate box-shadow code. 00 0 100vh rgba(0,0,0,.7); 00 0 100vh rgba(0,0,0,.7); , the shadow generated by box-shadow will follow the rounding effect of the element. However, if the shadow size is too large, the rounding radius of the outer edge of the shadow may differ greatly from that of the element itself. To achieve the projection of the same radius inside and outside, it is still necessary to set the rounding Angle of nested multi-level elements respectively.