css- border -1.1

Disclaimer: This article is a blogger original article, shall not be reproduced without the bloggers allowed. https://blog.csdn.net/caishu1995/article/details/88341831

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>

Up and down the border 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;
}

Up and down the border 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.

Guess you like