Legend of the box model, content, padding, margin, not a worry, finally met the friendliest border properties. border of friendship can be seen from the name, this property designer design elements original intention was to get hold of the "Border." In not so many broken thing on the computing space, how much is how much. And the other three brothers different, border even calculate the percentage of the value of the thing are saved, perhaps not with the thickness of the element size of the border about the necessary connection, such as a box length and width of 200, 400 and a length and width of the box, their border is 1px, not because the box bigger, thicker borders have to follow, this is not in line with our aesthetic. Let's start to explore the border of the property as well as some practical tips.
1. To understand the various types of border-style
Common border-style There are four types: none, solid, dashed and dotted.
The default value of border-style is none, that is not involved in the calculation, which is somewhat similar to display: none, so if you simply set the border-width and border-color display will not have a border. If you want your border, make sure to set the border-style property is not none.
Usually none attribute is used to reset a certain border style, of course, we can also set a certain border-width: 0, their effect is the same, according to the older test, write the highest rendering performance:
<style>
div{
border:1px solid;
border-bottom:0 none;
}
</style>
The most common is a solid border-style attribute, but much introduction, is a solid line property.
In addition to the solid line, the broken line there are two attributes, namely Dashed (dashed line) and dotted (dotted). Here only the author describes these two attributes behave differently in different browsers, not related to the question "line spacing", in fact, if you need self-defined interval dashed, border-image or the need to use svg, which are outside the scope of this book, so the two do not dwell on the dotted line.
In addition to solid and broken lines, border-style, there are several unusual properties, are double (double frame), the inset from (concave), OUTSET (outer recess), the latter two have almost no, double frame border-width should pay attention when in use> = 3px double-line border in order to show the effect of, you only need to remember border-widht = + double double spacing know why border-width to> 3 of this style to take effect .
The default value of 2.border-color
If you do not, then set the border-color, border-color color color values will take as their default values, write a test to test
<div class="filePost"></div>
<style>
body{
margin: 0;
}
.filePost {
display: inline-block;
width: 76px; height: 76px;
color: #ccc;
border: 2px dashed;
position: relative;
}
.filePost:hover {
color: #34538b;
}
.filePost::before, .filePost::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
}
.filePost::before {
width: 20px;
border-top: 4px solid;
margin: -2px 0 0 -10px;
}
.filePost::after {
height: 20px;
border-left: 4px solid;
margin: -10px 0 0 -2px;
}
</style>
Results as shown below:
When the mouse is moved, I just changed the color of color can make the color change along the border, no need to modify before, after pseudo-class border-color, very easy to use features.
3. Construction of the basic pattern with the characteristic angle of the border
border property can be achieved very good compatibility triangular graphic effects reason that turned angle characteristic in the border-style inconspicuous inset / outset is in use due to solid. Let's take a look at the border draw a four-color border of the "Corner characteristics."
<div class="colors"></div>
<style>
.colors{
width: 200px;
height: 200px;
border: 30px solid;
border-color: red yellow green blue;
}
</style>
Since the markdown editor supports tags language, so we can directly preview the final results are as follows (Tip: You can check the following elements to see the CSS styles directly through a browser)
Can clearly be seen, four directions up and down is formed by connecting "ladder" frame, characterized in trapezoidal base reaches zero can be converted into a triangle, we set the length and width are 0, you can use to generate four properties border the corner of the triangle, this time we re-use border-color: transpaorent way to hide some border, many useful graphics can be achieved. I offer the following example of a trapezoidal rounded corners effect, of course, now you can use the border-radius, then goose css2 does not seem to support this property.
<div class="radius">模拟圆角</div>
<style>
.radius {
display: inline-block;
line-height: 36px;
padding: 0 40px;
color: #fff;
background-color: #cd0000;
position: relative;
}
.radius:before,
.radius:after {
content: "";
position: absolute;
left: 0; right: 0;
border-style: solid;
}
.radius:before {
top: -2px;
border-width: 0 2px 2px;
border-color: transparent transparent #cd0000;
}
.radius:after {
bottom: -2px;
border-width: 2px 2px 0;
border-color: #cc0000 transparent transparent;
}
</style>
In addition to the above example, there is still a common border with the realization of a triangle and the like, there is not much to expand, as long as you want, border can do many more.
Box model four families to come to an end this chapter, the next chapter is about the content of inline elements, it was very "hate" Use inline elements do not know whether to read the next chapter in the development of improved, food is original sin.
Finally, I recommend a push in the front-end learning exchange group 685 910 553 Advanced ( front-end information-sharing ), no matter which direction you are on Earth,
whether you are welcome to work in a few years you settled in! (Within the group regularly offer free collection of some of the main group of free learning materials and books tidied face questions and answers document!)
If you have any objection to this article, then please write your comments in the article comments at.
If you find this article interesting, please share and forward, or you can look at, you acknowledge and encouragement of our articles.
Wish everyone in the programming this road, farther and farther.