In addition to Weibo, there is also WeChat
Please pay attention
WeChat public account
Shulou
2025-01-18 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Network Security >
Share
Shulou(Shulou.com)06/01 Report--
The border is an obscure common property in the CSS box model properties. With the arrival of CSS3, the border properties are glowing again. This article will introduce the CSS frame in detail
Basic style
A border is a collection style separated by spaces, including border thickness (border width), border color, and border style, regardless of order.
Border: border-width border-color border-style border: 1px solid red
[border style]
If a border has no style, the border will not exist at all
For dashed dashed, under chrome/firefox, the dashed aspect ratio is 3x1, while under IE, the dashed aspect ratio is 2max 1. Therefore, the dotted line is relatively dense under IE.
With regard to the dot line dotted, under chrome, the dot line is the square point, while under IE/firefox, the dot line is the dot.
Border-style:none (default) border-style:hidden/dotted/dashed/solid/double/groove/ridge/inset/outset (9 total)
[border width]
The width of the border cannot be negative and cannot be specified as a percentage value. This is because the border does not become larger because of the size of the device, so the percentage unit is not semantic. Similarly, there are outline, box-shadow, text-shadow, etc.
The border width supports three keywords: this/medium/thick, which are 1px, 3px, and 5px, respectively, and medium is the default value. Medium is 3px because the border style double at least 3px is effective
Border-width: thin/medium (default) / thick/
[border color]
The default border color is the foreground color of the element itself, the text color of the element; if the element does not have any text, the border color is the text color of its parent element. However, in a table, if you set only border-style and not border, the border color is black, not the same as the text color. Similarly, there are text-shadow, box-shadow, etc.
Border-color: transparent/
[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 on the right to achieve a similar effect
Click the following corresponding attribute values to demonstrate
Border key point
[notes]
The border has the following main 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 (there is a compatibility problem).
2. The border of the same element intersects with an oblique line, and a triangle can be realized with a frame.
3. The upper and lower borders of the elements in the line do not affect the row height and do not affect the layout; the left and right borders will affect the layout
4. In CSS2.1, the background positioning background-position can only be located relative to the upper left corner. If you need to be relative to the right, you can use a transparent border on 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
[quaternary order]
Border-width: 1px 2px 3px 4pxram / upper right, lower right and left border-width: 1px 2px 3pxTracacter / upper (left) lower border-width: 1px 2pxTracer / (upper and lower) (left and right) border-width: 1pxWTX / (top, bottom, left) multicolor border
Multicolor border border-colors can set multiple colors on one border
[note] only firefox supports it. It needs to be prefixed with-moz-, and only four sides can be written separately. Otherwise, it is invalid.
Border-colors:... 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
Fillet border
Fillet border border-radius can fillet the border (not supported by IE8-). The order of four values is top left, top right, bottom right and bottom left.
Border-radius: none (default) border-radius: {1Magne 4} [/ {1je 4}]? / / if the backslash exists, the front value is the horizontal radius, and the subsequent value is the vertical radius. If not, the horizontal and vertical directions are equal.
There are the following considerations about the fillet border:
1. It can be a specific value or a percentage, but not a negative number
2. Reset border-radius does not have rounded corners. It is invalid to use none. A value of 0 is required.
3. Border-radius pair
It has no effect.
4. If the value is percentage, the horizontal fillet percentage is relative to the width and the vertical fillet percentage is relative to the height
[fillet single corner]
Border-top-left-radius/border-top-right-radius/border-bottom-right-radius/border-bottom-left-radiusborder-top-left-radius: 10px 20px
[note] do not add / when writing fillet single corner
[quaternary order]
The order of four values is upper left, upper right, lower right and lower left.
Border-radius: 10px 20px 30px 40px / 20px 30px 40px 50px
[inner diameter and outer diameter]
Border-radius inner diameter = outer diameter-corresponding border width
When the border-radius radius value is less than or equal to the border width, the element has no inner diameter effect
[special graphics]
Circle
The width and height of the element are the same, and the fillet radius is half of the width and height.
Div {width: 100px; height: 100px; border-radius: 50%;}
Semicircle
The width and height of the elements are different, and the fillet radius should match the width and height.
Div {width: 100px; height: 50px; border-radius: 50px 50px 00;}
Fan shape
The width and height of the element is the same as the radius of a fillet
Div {width: 50px; height: 50px; border-radius: 50px 000;}
Ellipse
The width and height of elements are different, and the horizontal and vertical radii correspond to width and height, respectively.
Div {width: 120px; height: 80px; border-radius: 120pxUniver 80px;} Box Shadow
Box Shadow box-shadow can set shadows for elements (not supported by IE8-)
Box-shadow: none (default) box-shadow: (h-shadow v-shadow blur spread color inset) +; h-shadow: horizontal shadow position (must) v-shadow: vertical shadow position (must) blur: blur distance (optional) spread: shadow size (optional) color: shadow color, default is consistent with text color (optional) inset: inner shadow (optional) box-shadow:10px 10px red,20px 20px blue
When using box shadow box-shadow, there are a few considerations:
1. Multiple shadows can be used, but too much will result in poor performance
2. The frame is above the inner shadow, the inner shadow is above the background picture, the background picture is above the background color, and the background color is above the outer shadow
3. Inner shadow pair
The element has no effect.
4. The shadow written first is at the top.
5. This attribute is in line with border-radius. If it is set to fillet through border-radius, the final rendering of box-shadow will also be fillet.
[simulated frame]
Box-shadow: 0 0 0 10px blue
Click the following corresponding attribute values to demonstrate
Picture frame
Picture frame border-p_w_picpath can set the picture in the border position (not supported by IE10-)
Border-p_w_picpath: none (default) border-p_w_picpath: border-p_w_picpath-source | | border-p_w_picpath-slice [/ border-p_w_picpath-width? | / border-p_w_picpath-outset]? | border-p_w_picpath-repeat
[note] this attribute is used to replace border-style. If border-p_w_picpath is none, the value of border-style is displayed.
Border-p_w_picpath: url ('img.img') 27 fill / 27 / 27px repeat
[border-p_w_picpath-source]
The picture path of the border
Border-p_w_picpath-source:url ('test.img')
[border-p_w_picpath-slice]
The position of the four cutting lines in the picture frame
Border-p_w_picpath-slice: | fill
When using border-p_w_picpath-slice, there are a few considerations:
1. If the unit is not written, the default unit of the specific value is px.
2. Fill indicates that the middle part of the picture frame will be retained.
3. The four-value direction is the upper right, the lower left, which represents the direction of the cutting line, and the cutting is high, wide, high and wide.
4. The picture frame is displayed within the range of the frame. If the width of the frame is not equal to the slice slice value, the frame of the picture will be enlarged and reduced proportionally so that the frame is displayed exactly within the range of the frame.
5. If the slice value is negative, or if it is greater than the width or height of the box, it will be 100%, and the four corners will display the entire background picture.
6. if the right and left cuts are greater than the width of the box, the upper middle and lower middle are empty; if the upper and lower cuts are greater than the height of the box, the middle left and middle right are empty
[border-p_w_picpath-width]
Border width border-p_w_picpath-width. If you specify this value, the border picture width is determined by this value, otherwise it is determined by the border width of the box. The value can be expressed in terms of specific pixels, numbers (representing multiples), and percentages, following a quaternion order.
Border-p_w_picpath-width: | auto
[border-p_w_picpath-outset]
Border-p_w_picpath-outset represents the amount by which the image area of the frame exceeds the frame, which can be expressed in specific pixels and numbers (several times), following a quaternary order.
Border-p_w_picpath-outset:0 (default) border-p_w_picpath-outset: |
[border-p_w_picpath-repeat]
The arrangement of border pictures
Border-p_w_picpath-repeat: stretch (stretch, default) | repeat (repeat) | round (Tile) [1Magne2] / / the first value indicates horizontal arrangement, and the second value represents vertical arrangement.
In the above property values, repeat is tiled from the middle of the border to both ends, which may cause the edges at both ends to be cut, while round scales the slice of the background image of the frame so that it is displayed exactly
[button realization]
Div {display: inline-block; border-p_w_picpath: url ('button.png') 16 fill/ auto / 5px;}
Application
[triple bar effect]
three bars can be implemented using borders. The top two bars use the double style of the top border, and the lower bar uses the solid style of the lower border. Box {color: red; width: 60px; height: 10px; border-top: 30px double; border-bottom: 10px solid; transition: color 0.5s;} .box: hover {color:pink;}
[cross effect]
.box {position: relative; color: blue; border: 4px solid; width: 40px; height: 40px; transition: color 0.2s;} .box: before {content: "; border-top:10px solid; display: block; position: absolute; width: 30px; top:15px; left:5px;} .box: after {content:"; position: absolute; top: 5px; left: 15px Border-left:10px solid; height: 30px;} .box: hover {color: lightblue;}
[envelope effect]
You can use the picture frame border-p_w_picpath to achieve the effect of an airmail envelope. The picture frame is implemented using a linear gradient.
Box {width: 200px; height: 100px; padding: 10px; border: 10px solid; border-p_w_picpath: repeating-linear-gradient (- 225deg, red 0, red 10px, transparent 10px, transparent 20px, # 58a 20px, # 58a 30px, transparent 30px, transparent 40px) 20;} Please modify the text
Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.
Views: 0
*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.
Continue with the installation of the previous hadoop.First, install zookooper1. Decompress zookoope
"Every 5-10 years, there's a rare product, a really special, very unusual product that's the most un
© 2024 shulou.com SLNews company. All rights reserved.