As someone who frequently use the border. I often use is
border: 1px solid #c5c5c5; //宽度 边框样式 颜色
border: 1px dotted #c5c5c5;
But I frame the scope of the border really was not thinking very long though pointed box write with. Today, suddenly I found that my understanding of the border is incomplete ah. Because I've never analyzed up and down the border in the end is like.
<!doctype html>
<html lang="zh">
<head>
<style>
.base{
background-color: yellow;
border-top: 10px solid red;
border-bottom: 10px solid red;
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<div class="base"></div>
</body>
</html>
This view is a rectangular vertical. If you test, you will find around is rectangular. So my understanding of the border also stop there. But today I tested a whim and down about different colors.
.base{
border: 50px solid;
border-top-color: red;
border-bottom-color: red;
border-left-color: yellow;
border-right-color: yellow;
height: 100px;
width: 100px;
}
This result is what you think. It is really quite easy to think of, but I did not so understandable.
Looked at the map, I suddenly realized inside the box with sharp corners of the practice. Sure enough, to think more about ah. Or I are ignorant of their own.