console 命令行工具 X clear

console

<html>
<head></head>
<body>
	<div class="border">1条边框</div>
	<div class="border1">4条边框</div>

</body>
</html>

/* 使用伪元素

优点：全机型兼容，实现了真正的1px，而且可以圆角。

缺点：暂用了after 伪元素，可能影响清除浮动。
 */

.border {
    width: 300px;
    height: 200px;
    position: relative;
}

.border::after {
    position: absolute;
    content: '';
    background-color: red;
    /* display: block; */
    width: 100%;
    height: 1px;
    transform: scale(1, 0.5);
    top: 0;
    left: 0;
}

.border1 {
    width: 300px;
    height: 200px;
    text-align: center;
    line-height: 200px;
    position: relative;
}

.border1::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    /* display: block; */
    width: 200%;
    height: 200%;
    border: 1px solid red;
    transform: scale(0.5);
    transform-origin: left top;
    border-radius: 20px;
}