Understanding CSS borders Border

Previous words

?? The border is a common property of the CSS box model properties, CSS3, But the border properties have been re-glowing. This article describes CSS borders in detail

Base style

?? A border is a space-delimited collection style, including border thickness (border width), border color, and border style, regardless of the order of precedence

    border: border-width border-color border-style    border: 1px solid red;

"border style"

?? If a border does not have a style, the border will not exist at all

?? About dashed dashed, under chrome/firefox, the line width to height ratio is 3/1, while in ie, the line width to height ratio is 2/1. So in ie, the dotted line appears to be more dense

?? On the point line dotted, under chrome, the point line is the square point, while under ie/firefox, the dots are dots.

border-style:none(默认)border-style:hidden/dotted/dashed/solid/double/groove/ridge/inset/outset(共9种)

"border width"

?? The width of the border cannot be negative and cannot be specified as a percent Value. This is because the bounding rectangle does not conform to the semantics because the device size is not larger. similarly, There are outline, box-shadow, text-shadow, etc.

?? The border width supports 3 keywords: this/medium/thick, which are 1px, 3px, 5px, and medium are the default Values. Medium is 3px because the border style double at least 3px is effective

    border-width: thin/medium(默认)/thick/<length>

"border color"

?? The default border color is the foreground color of the element itself, the text color of the element, or the text color of its parent element if the element has no Text. however, in a table, if you set only Border-style and do not set border, the border color is black, not the same as the text Color. similarly, there are text-shadow, box-shadow, etc.

    border-color: transparent/<color>

?? [note] in CSS2.1, the background positioning background-position can only be positioned relative to the upper left Corner. If you need to be relative to the right, you can use a transparent border to the right to achieve a similar effect

?? < demo box > click on the corresponding attribute values below to demonstrate

Border points

"precautions"

?? The border has several key points to pay special attention to:

?? 1, the border is drawn on the background of the element, if the border style has some kind of gap, you can see the background of the element through these gaps (compatibility issues)

?? 2, the same element border intersection is a slash, you can use the border to achieve the triangle

?? 3, the upper and lower border of the line element does not affect the row height, does not affect the layout; the left and right borders affect the layout

?? 4, in the CSS2.1, the background positioning background-position can only be positioned relative to the upper left Corner. If you need to be relative to the right, you can use a transparent border to the right to achieve a similar effect

"border unilateral"

        border-top/border-right/border-bottom/border-left

"border properties"

    border-width:        border-top-width    border-right-width        border-bottom-width    border-left-width    border-style:        border-top-style    border-right-style        border-bottom-style    border-left-style    border-color：        border-top-color    border-right-color border-bottom-color border-left-color

"four-value order"

    border-width: 1px 2px 3px 4px;//上右下左 border-width: 1px 2px 3px;//上(左右)下 border-width: 1px 2px;//(上下)(左右) border-width: 1px;//(上下左右)

Multi-Color border

?? Multi-Color border Border-colors can set multiple colors on a single border

?? [note] only Firefox support, need to add-moz-prefix, and can only four side write separately, otherwise invalid

    border-colors:<color><color>……    border: 10px solid black;    -moz-border-top-colors: red green; -moz-border-right-colors: green yellow; -moz-border-bottom-colors: yellow blue; -moz-border-left-colors: blue red; 

Rounded border

?? Rounded border Border-radius You can set rounded corners for borders (ie8-not supported), four-value order is top left, Upper right, bottom right, bottom left

<length>{1,4}[/<length>{1,4}]?//如果反斜杠存在，前面的值是水平方向的半径，后面的值是垂直方向的半径。如果没有则水平和垂直方向相等

?? There are a few things to note about rounded borders:

?? 1, <length> can be a specific value, can also be a percentage, but not a negative number

?? 2, Reset Border-radius No rounded corner, use none invalid, need to value 0

?? 3, Border-radius to have no effect

?? 4, If the value is a percentage, the horizontal direction of the fillet percentage relative to the width, the vertical direction of the fillet percentage relative to the height

"fillet corner"

border-top-left-radius/border-top-right-radius/border-bottom-right-radius/border-bottom-left-radiusborder-top-left-radius: 10px 20px;

?? [note] cannot be added when writing rounded corners

"four-value order"

?? The Four-value order is top-left, top-right, bottom-right, bottom-left

border-radius: 10px 20px 30px 40px / 20px 30px 40px 50px;

"diameter outside diameter"

?? Border-radius bore diameter = outside diameter-corresponding border width

?? element does not have an inner diameter effect when the Border-radius radius value is less than or equal to the border width

"special graphics"

Circular

?? The width of the element is the same, and the fillet radius is half the width of the height

div{    width: 100px;    height: 100px; border-radius: 50%;}

Semicircle

?? The width and height of the element are different, and the fillet radius is fit with the width

div{    width: 100px;    height: 50px; border-radius: 50px 50px 0 0;}

Sector

?? Element width height and one fillet radius are the same

div{    width: 50px;    height: 50px; border-radius: 50px 0 0 0;} 

Elliptic

?? The element width is different, and the horizontal and vertical radii correspond to the width of the height

div{    width: 120px;    height: 80px; border-radius: 120px/80px;} 

Box Shadow

?? Box Shadow Box-shadow can set shadows for elements (ie8-not supported)

box-shadow: none(默认)box-shadow: (h-shadow v-shadow blur spread color inset)+;h-shadow: 水平阴影位置(必须)v-shadow: 垂直阴影位置(必须)blur: 模糊距离(可选)spread: 阴影尺寸(可选)color: 阴影颜色，默认和文本颜色一致(可选)inset: 内部阴影(可选) box-shadow:10px 10px red,20px 20px blue;

?? When using the box shadow box-shadow, there are a few things to note:

?? 1, multiple shadows can be used, but too much will cause poor performance

?? 2, The border is above the shadow, the inner shadow above the background picture, the background picture above the back color, the back color on the outside shadow

?? 3. The inner Shadow has no effect on the element

?? 4, the first write the shadow at the top level

?? 5, this property and Border-radius same strain, if the Border-radius is set to a fillet, then the final rendering of Box-shadow will also be rounded

"simulate border"

box-shadow: 0 0 0 10px blue;

?? < demo box > click on the corresponding attribute values below to demonstrate

Picture border

?? Picture Border Border-image You can set the picture in the border position (ie10-not Supported)

border-image: none(默认)border-image: border-image-source || border-image-slice [ / border-image-width? | / border-image-outset ]? || border-image-repeat;

?? [note] the function of this property is to replace border-style, if Border-image is none, the value of Border-style is displayed

border-image: url(‘img.img‘) 27 fill / 27 / 27px repeat;

"border-image-source"

?? Picture path of the border

border-image-source:url(‘test.img‘);

"border-image-slice"

?? Picture border the position of four cutting lines

border-image-slice:  <number> | <percentage> fill

?? When using border-image-slice, there are a few things to note:

?? 1, if not write units, the value of the default unit is PX

?? 2. Fill indicates that the middle part of the picture border will remain

?? 3, the four-value direction is the upper right lower left, represents the direction of the cutting line, the cutting is high-wide and wide

?? 4, The picture border is displayed in the border range, if the border width is not equal to the slice slice value, the picture border will be scaled down so that the picture border appears in the border range

?? 5, If the slice value is negative, or greater than the width or height of the box will be 100%, Four Corners will display the entire background picture

?? 6, if the right-cut and left-cut larger than the box width, then the upper and lower part of the empty; if the upper and lower cuts are greater than the box height, the middle left and right parts are empty

"border-image-width"

?? Border Width Border-image-width. If this value is specified, the width of the border picture is determined by the value, otherwise it is determined by the Box's border Width. The value can be expressed as a specific pixel, a number (several times), and a percentage, followed by a four-value order

border-image-width: <length> | <percentage> | <number> | auto 

"border-image-outset"

?? Border-image-outset represents the amount of border image area beyond the border, which can be expressed in pixels and numbers (expressed in multiples of several times), followed by a four-value order

border-image-outset:0(默认)border-image-outset: <length> | <number>

"border-image-repeat"

?? How the border picture is arranged

border-image-repeat: stretch(拉伸,默认) | repeat(重复) | round(平铺) [1,2]//第一个值表示水平方向的排列方式，第二个值表示垂直方向的排列方式

?? In the above attribute value, the repeat is the middle of the border is tiled at both ends, which may cause the edges of the ends to be cut, while the round will scale the slice of the border background image so that it appears exactly

"button implementation"

div{    display: inline-block;    border-image: url(‘button.png‘) 16 fill/ auto / 5px;}

Application

"three-way Bar effect"

&emsp;&emsp; Three bars can be implemented using a border, the above two bars using the double style of the upper border, the following bar using the bottom border of the solid style<Style> .box{color:red; width: 60px; height: 10px; border-top: 30px double; border-bottom: 10px solid; transition:color 0.5s;} .box:hover{ color:pink;} </style>< div class= "box" > </div>         

"cross effect"

<Style>. box{position:relative;color:blue;Border4PX solid;Width40px;Height40px;Transition:color0.2s;}. box: before{Content"";Border-top:10px solid;display:block;position:absolute;Width30px;Top15px;Left5px;}. box: after{ content: ""; position:absolute; top: 5px; left : 15px; border-left:10px solid; height: 30px;} . Box: hover{ color:lightblue;} </style><div class="box" ></div>   

"envelope effect"

?? You can use the picture border border-image to achieve the effect of an air envelope. Picture borders are implemented using linear gradients

<Style>. box {Width200px;Height100px;Padding10px;Border10px solid;Border-image:repeating-linear-gradient (-225deg, Red 0, red 10px, transparent 10px, Transparent 20px,  #58a 20px,  #58a 30px, transparent 30px, Transparent Span class= "hljs-number" >40px) 20;} </style>< div class= "box" contenteditable = "true" > Please modify text </< Span class= "hljs-name" >div>            

Understanding CSS borders border