/*
** 四边框
*/
.border(@color: #dbdbdb; @radius: 0) {
&:after {
content: " ";
width: 200%;
height: 200%;
position: absolute;
top: 0;
left: 0;
border: 1px solid @color;
-webkit-transform: scale(0.5);
transform: scale(0.5);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
box-sizing: border-box;
border-radius: @radius;
z-index: 2;
}
}
/*
** 上边框
*/
.border-top(@color: #dbdbdb; @left: 0) {
&:before {
content: " ";
position: absolute;
left: @left;
top: 0;
right: 0;
height: 1px;
border-top: 1px solid @color;
color: @color;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
z-index: 2;
}
}
/*
** 下边框
*/
.border-bottom(@color: #dbdbdb; @left: 0) {
&:after {
content: " ";
position: absolute;
left: @left;
bottom: 0;
right: 0;
height: 1px;
border-bottom: 1px solid @color;
color: @color;
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
z-index: 2;
}
}
/*
** 左边框
*/
.border-left(@color: #dbdbdb; @top: 0) {
&:after {
content: " ";
position: absolute;
left: 0;
top: 0;
width: 1px;
bottom: 0;
border-left: 1px solid @color;
color: @color;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scaleX(0.5);
transform: scaleX(0.5);
z-index: 2;
}
}
/*
** 右边框
*/
.border-right(@color: #dbdbdb; @top: 0) {
&:before {
content: " ";
position: absolute;
right: 0;
top: 0;
width: 1px;
bottom: 0;
border-right: 1px solid @color;
color: @color;
-webkit-transform-origin: 100% 0;
transform-origin: 100% 0;
-webkit-transform: scaleX(0.5);
transform: scaleX(0.5);
z-index: 2;
}
}
