Summary of the use of border attributes in css

Friends who are new to CSS may think that the border attribute is just a simple border draw. In fact, border controls the border width, color, dashed line, solid line and other styles of the object. You can control a single border or all borders. More effects can be created using the border attribute. In CSS, you can use the border syntax to make various design changes to the border, such as setting the width, style, color, etc. of the border. You can also hide the border. In principle, CSS is not limited to border design. The border of p block or span can also be applied to the border of other web page elements, such as the border of the web page title, the border of the image (img border)... etc. All major browsers support the CSS border attribute. The following is a detailed explanation of the use of the border attribute.

First learn free courses related to php Chinese website

1. Learn"HTML/CSS Quick Start"中css border style Course

2. Watch"Geek Academy CSS and CSS3 Video Tutorial"的CSS Box Model-Border Video tutorial

##border border property

1.

Detailed introduction to the border attribute of CSS

1) border-width: does not support percentage, supports keywords, thin (1px), medium ( Default value, 3px, the reason why the default value is 3px is that border-style is only valid when the border is 3px and above

fruit), thick (5px)

2) border-style : has different values. The following analyzes the applications of different values.

a.solid: Triangle and trapezoid can be realized; b.dashed: Dotted line, in chrome/Firefox browser, dotted line and solid The ratio of lines is 3:1 (thin), in IE browser, the ratio is 2:1 (dense); c.dotted: dotted line, in chrome/Firefox browser, it is square dots , in the IE browser, it is a dot (you can use dots to achieve a rounded corner effect); d.double: double line, calculation rule, the width of the double line is always equal, and the interval between them is +-1, for example , 3px=1 (inside) + 1 (middle interval) + 1 (outside), you can achieve a three-bar pattern; e.inset (inside concave), outset (outer convex), ridge (groove) ): Outdated style, poor compatibility, no usage scenarios

2. Detailed explanation of the border attribute of css style

border-width Property sets the width of the border

Possible values: pixels

border-style Property sets the style of the border

Possible values: solid (straight line), dashed (dashed line), dotted (point Wire)

border-color property sets the color of the border Possible values: red,#f00,#ff0000,rgb(255,0,0),transparent

border-left property setting Left border

border-right property sets the right border

border-top property sets the top border

border-bottom property sets the bottom border

3. Usage of border that you don’t know

Idea: When the base is parallel to the horizontal line, we directly control the aspect ratio to achieve the triangle effect we want; when it does not coincide with the horizontal line It gets more complicated at this time. We need to use the aspect ratio combined with the transform attribute and rotate in CSS3 to make our triangle show the effect we want (here is just an introduction to the idea, not the specific implementation, which involves To learn about mathematics, you can use Baidu yourself).

4. Summary of the method of constructing a deformed border using the border attribute of CSS

border, as the name suggests, means border. In CSS, you can use the border syntax to Make many various design changes to the border, such as setting the width, style, color, etc. of the border, and you can also hide the border. In principle, CSS border design is not limited to the borders of p blocks or spans, but can also be applied to On the borders of other web page elements, such as the border of the web page title, the border of the image (img border), etc., all major browsers support the CSS border attribute.

5. Border triangle shadow and multiple border arrangement and retelling

The border can be set independently according to the direction, up, down, left and right, border-top | border-bottom | border-left | border-right ;

So attributes can also be set individually, border-top-width | border-top-style | border-top-color ;

Single attributes can also be written in combination:

border-width: top, right, bottom, left; (clockwise)

border-width: top, left, right, bottom;

border-width: top, bottom, left, left;

border-width: four directions;

border-style | border-color can also be set like this;

6. CSS: Border attribute

Expand knowledge Many designers have been using the knowledge listed in this chapter so far, however, there are some ways we can expand further!

Multiple Edges When applying multiple edges to an element, there are various techniques you can refer to.

Border style Solid, dashed and dotted are the most commonly used border-style attribute values, and there are several other values ​​we can use, including groove and ridge.

Related Questions and Answers

1. About the 0.5px setting of border in CSS?

2. FireFox border style exception

3. About border-image

4. How to implement border-image rounded corners in css3

[Related recommendations]

1. PHP Chinese website free video tutorial: "php.cn Dugu Jiujian (2 )-css video tutorial》

2. Free video tutorial on php Chinese website: CSS video tutorial

The above is the detailed content of Summary of the use of border attributes in css. For more information, please follow other related articles on the PHP Chinese website!