Border and cssborder of CSS attributes

Border and cssborder of CSS attributes

I believe that the border attribute of css is no stranger to everyone. I just want to add a border to the element. What is the impact of different box models on the width and height of the element, I believe everyone is familiar with it. I will not go into details here, but I will only talk about things that people do not pay attention to at ordinary times.

0. border-color and color

Generally, when using the border attribute, you should directly write border: 1px solid # ccc; similar to this.

But do you know what the color of border is like when you don't set the color for it? I believe there will be many people who say, Black!

It is indeed black, but why is it black? Because the color attribute of the element is black by default when the color attribute is not set for the element, that is, when border-color is not set, border-color = color.

<Div class = "wrap"> <div class = "red"> border color is not set </div>

* {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

How is the border in four directions actually made up? I believe many people will know about it. Here I will write another article. I only need to work with transparent (transparent) to implement many triangles and other figures, you can try it on your own.

<div class="box"></div>

.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 high-level Layout

Use border to implement high-level layout on both sides of the left and right, and use margin-left negative values.

<Ul class = "list"> <li class = "item"> <span class = "left"> height on the left </span> here are some main contents </li> <li class = "item"> <span class = "left"> height on the left </span> here are some main contents </li> <li class = "item"> <span class = "left"> height on the left </span> here are some main contents </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;}

 

Reference:

Border for deep understanding of CSS