The border of CSS properties

CSS Border Properties I believe everyone is not unfamiliar, is to add a border to the element, in different box model, will give the element of the width of the impact of how, I believe we are very familiar with, here will not repeat, only to say that we usually do not pay attention to things.

0.border-color and color

When you use border property, you should usually write the border:1px solid #ccc directly. It looks like this.

But do you know what color it is when you don't set the color for border? I'm sure there will be a lot of people saying, black!

It's black, but why is it black? Because the element color property is black by default when no color attribute is set for an element, that is, when Border-color is not set, Border-color=color.

<p class= "wrap" >  <p class= "Red" > No color set for border </p></p>

* {margin:0; padding:0;}. Wrap {  position:relative;  width:400px;  height:400px;  margin:50px Auto;}. Red {  width:100px;  height:100px;  color:red;  BORDER:2PX solid;}

1.border and graphics

Four direction of the border is actually how to compose, I believe a lot of people know, here again write a write, only need to cooperate with transparent(transparent), you can achieve a lot of graphics, such as triangles, we can try it yourself.

<p class= "box" ></p>

. box {  position:absolute;  border-top:20px solid red;  border-left:20px solid blue;  border-right:20px solid Green;  border-bottom:20px solid Yellow;}

2.border and equal height layouts

Use border to achieve high-left and right-side layouts, with margin-left negative values

<ul class= "List" >  <li class= "Item" >    <span class= "left" > LH high </span>    Here are some of the main things  </li>  <li class= "Item" >    <span class= "left" > LH high </span>    Here are some of the main things  </li>  <li class= "Item" >    <span class= "left" > LH high </span>    Here are some of the main things  </ Li></ul>

* {margin:0; padding:0;}. list {  margin:50px;}. item {  width:500px;  List-style:none;  border-left:200px solid Green;  background-color:red;}. Left {  margin-left: -200px;  margin-right:200px;}