Border border properties in CSS using the summary

Beginner CSS Friends may feel Borderproperty is simply a simple draw border. In fact, border is the control of the object's border edge width, color, dashed, solid lines and other styles. You can control a single border, or you can control all the borders. Use the Border property to create more effects. In CSS, you can use the border syntax to make a variety of design changes to the border, such as setting the width of the border, style, color, and so on, can also hide the border, in principle, CSS for the border design is not limited to the P block or span border, can also be applied to other page elements of the Edge box, such as the border of the page title, the border of the picture (img border) ... And so on, all major browsers support CSS border properties. The following is a detailed description of the use of the border border property.

Start with a free course on PHP Chinese web

1. Learn the CSS Border style course in Html/css QuickStart

2. Watch the CSS box model of the Geek College CSS and CSS3 video tutorial-border video Tutorial

Border Border Properties

1. A detailed description of the border property of CSS

1) Border-width: does not support the percentage, support keywords, thin (1px), medium (default, 3PX, the default is 3PX because only if the border is 3px and above, Border-style is effective ), Thick (5px)

2) Border-style: There are different values, the following analysis for different values when the application A.solid: can achieve triangular, trapezoidal;b.dashed: Dashed, in Chrome/firefox browser, the ratio of dashed lines to solid lines is 3 : 1 (sparse), in IE, the ratio is 2:1 (dense);c.dotted: Point line, in the Chrome/firefox browser, is the square point, in IE browser, is a dot (can be used to achieve round corner effect); D.double: Double line, calculation rule, double line width is always equal, intermediate interval +-1, for example, 3px=1 (inner) +1 (intermediate interval) +1 (outside), can achieve three bar graphics;e.inset (concave), outset (outer convex), Ridge (Groove) : Outdated style, poor compatibility, no use of scenes

2. Detailed CSS style border properties

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), dotted (dotted line)

The Border-color property sets the possible values for the color of the border: Red, #f00, #ff0000, RGB (255,0,0), Transparent

Border-left property settings Left border

Border-right Property Set Right border

Border-top Property Set Top border

Border-bottom Property Set Bottom border

3. Border usage you don't know

Idea: When the bottom and horizontal lines parallel, we directly by controlling the aspect ratio to achieve the triangle effect we want, when it is not coincident with the horizontal line, this time is more complex, you need to use the aspect ratio and CSS3 in the transform attribute and the rotate combination, Let our triangles show the effect we want (here is just an introduction to the idea, not to concrete implementation, which has to do with the knowledge of mathematics can own Baidu).

4. Summary of methods for building deformable borders using CSS's border property

Border by definition is the meaning of the border, in the CSS, you can use the border syntax to make a variety of design changes, such as setting the width of the border, style, color, etc., can also hide the border, in principle, CSS for border design is not limited to the P block or span Border of a page, such as the border of a page title, the border of a picture (img border) ... And so on, all major browsers support CSS border properties.

5. Border Triangle shading and multi-border sorting and relaying

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

So properties can also be set separately, Border-top-width | Border-top-style | Border-top-color;

A single attribute can also have a combined notation:

Border-width: Upper right lower left; (clockwise direction)

Border-width: up or down;

Border-width: up or down;

Border-width: Four directions;

Border-style | Border-color can also be set as such;

6. Css:border Properties

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

multiple sides

The side styles solid,dashed and dotted are the most commonly used Border-style property values, and there are several other values that we can use, including Groove and Ridge.

Related questions

1. About the 0.5px setting for CSS implementation border?

2. FireFox Border Style exception

3. About Border-image

4. CSS3 How to achieve border-image fillet problem

"Recommended"

1. PHP Chinese Web free video tutorial: "Php.cn lonely Nine Cheap (2)-css video Tutorial"

2. PHP Chinese Web free video tutorial: CSS video tutorial