@function pxTorem($px) {
//$px為需要轉(zhuǎn)換的字號
@return $px / $browser-default-font-size * 1rem;
}
// 給容器添加邊框，注意不要覆蓋容器炒俱，設(shè)置z-index
.border {
position: relative;
}
.border:after {
content: '';
position: absolute;
top: 0;
width: 200%;
height: 200%;
left: 0;
border: 1px solid $default-border-color;
border-radius: pxTorem(26px);
transform: scale(0.5);
transform-origin: 0 0;
z-index: 1;
}
.border-t {
position: relative;
&:before {
content: ' ';
position: absolute;
left: 0;
top: 0;
right: 0;
height: 1px;
border-top: 1px solid $default-border-color;
color: #e5e5e5;
transform-origin: 0 0;
transform: scaleY(0.5);
z-index: 1;
}
}
.border-b {
position: relative;
&:after {
content: ' ';
position: absolute;
left: 0;
top: 100%;
right: 0;
height: 1px;
border-top: 1px solid $default-border-color;
color: #e5e5e5;
transform-origin: 0 0;
transform: scaleY(0.5);
z-index: 1;
}
}
.border-tb {
position: relative;
&:before {
content: ' ';
position: absolute;
left: 0;
top: 0;
right: 0;
height: 1px;
border-top: 1px solid $default-border-color;
color: #e5e5e5;
transform-origin: 0 0;
transform: scaleY(0.5);
z-index: 1;
}
&:after {
content: ' ';
position: absolute;
left: 0;
top: 100%;
bottom: 0;
right: 0;
height: 1px;
border-bottom: 1px solid $default-border-color;
color: #e5e5e5;
transform-origin: 0 100%;
transform: scaleY(0.5);
z-index: 1;
}
}
