方法1:
.border {
position: relative;
}
.border:before {
content: "";/* 注意这里为双引号 */
position: absolute; left:0; top:0;
200%;
height: 200%;
border: 1px solid #ff0000;
border-radius:5px;/* 也可以设置圆角 */
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scale(0.5, 0.5);
-ms-transform: scale(0.5, 0.5);
-o-transform: scale(0.5, 0.5);
transform: scale(0.5, 0.5);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
position: relative;
}
.border:before {
content: "";/* 注意这里为双引号 */
position: absolute; left:0; top:0;
200%;
height: 200%;
border: 1px solid #ff0000;
border-radius:5px;/* 也可以设置圆角 */
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scale(0.5, 0.5);
-ms-transform: scale(0.5, 0.5);
-o-transform: scale(0.5, 0.5);
transform: scale(0.5, 0.5);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
方法二:
.point5 {
position: relative;
}
.point5:after {
position: absolute;
content: '';
100%;
left: 0;
bottom: 0;
height: 1px;
background-color: #dddddd;
-webkit-transform: scale(1,.5);
transform: scale(1,.5);
-webkit-transform-origin: center bottom;
transform-origin: center bottom}