You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
142 lines
3.4 KiB
142 lines
3.4 KiB
/*水平线*/
|
|
.uni-hr {
|
|
width: 100%;
|
|
position: relative;
|
|
height: 1px;
|
|
}
|
|
|
|
@media screen and (-webkit-min-device-pixel-ratio: 1.5) {
|
|
.uni-hr {
|
|
transform: scaleY(0.5);
|
|
}
|
|
}
|
|
|
|
/*边框样式*/
|
|
.uni-border-l {
|
|
border-left: 1upx solid #dddddd;
|
|
}
|
|
|
|
.uni-border-r {
|
|
border-right: 1upx solid #dddddd;
|
|
}
|
|
|
|
.uni-border-t {
|
|
border-top: 1upx solid #dddddd;
|
|
}
|
|
|
|
.uni-border-b {
|
|
border-bottom: 1upx solid #dddddd;
|
|
}
|
|
|
|
.uni-border {
|
|
border: 1upx solid #dddddd;
|
|
}
|
|
|
|
@media screen and (-webkit-min-device-pixel-ratio: 1.5) {
|
|
.uni-border-l {
|
|
border: none;
|
|
background-image: -webkit-linear-gradient(0deg, #dddddd, #dddddd 50%, transparent 50%);
|
|
background-image: linear-gradient(270deg, #dddddd, #dddddd 50%, transparent 50%);
|
|
background-size: 1upx 100%;
|
|
background-repeat: no-repeat;
|
|
background-position: left;
|
|
}
|
|
|
|
.uni-border-r {
|
|
border: none;
|
|
background-image: -webkit-linear-gradient(0deg, #dddddd, #dddddd 50%, transparent 50%);
|
|
background-image: linear-gradient(270deg, #dddddd, #dddddd 50%, transparent 50%);
|
|
background-size: 1upx 100%;
|
|
background-repeat: no-repeat;
|
|
background-position: right;
|
|
}
|
|
|
|
.uni-border-t {
|
|
border: none;
|
|
background-size: 100% 1upx;
|
|
background-repeat: no-repeat;
|
|
background-position: top;
|
|
background-image: linear-gradient(0, #dddddd, #dddddd 50%, transparent 50%);
|
|
background-image: -webkit-linear-gradient(90deg, #dddddd, #dddddd 50%, transparent 50%);
|
|
}
|
|
|
|
.uni-border-b {
|
|
border: none;
|
|
background-size: 100% 1upx;
|
|
background-repeat: no-repeat;
|
|
background-position: bottom;
|
|
background-image: linear-gradient(0, #dddddd, #dddddd 50%, transparent 50%);
|
|
background-image: -webkit-linear-gradient(90deg, #dddddd, #dddddd 50%, transparent 50%);
|
|
}
|
|
|
|
.uni-border {
|
|
border: none;
|
|
background-image: -webkit-linear-gradient(270deg, #dddddd, #dddddd 50%, transparent 50%),
|
|
-webkit-linear-gradient(180deg, #dddddd, #dddddd 50%, transparent 50%),
|
|
-webkit-linear-gradient(90deg, #dddddd, #dddddd 50%, transparent 50%),
|
|
-webkit-linear-gradient(0, #dddddd, #dddddd 50%, transparent 50%);
|
|
background-image: linear-gradient(180deg, #dddddd, #dddddd 50%, transparent 50%),
|
|
linear-gradient(270deg, #dddddd, #dddddd 50%, transparent 50%),
|
|
linear-gradient(0deg, #dddddd, #dddddd 50%, transparent 50%),
|
|
linear-gradient(90deg, #dddddd, #dddddd 50%, transparent 50%);
|
|
background-size: 100% 1upx, 1upx 100%, 100% 1upx, 1upx 100%;
|
|
background-repeat: no-repeat;
|
|
background-position: top, right top, bottom, left top;
|
|
}
|
|
}
|
|
|
|
.border,
|
|
.border--bottom,
|
|
.border--left,
|
|
.border--right,
|
|
.border--surround,
|
|
.border--top,
|
|
.border--top-bottom {
|
|
position: relative;
|
|
}
|
|
|
|
.border--bottom::after,
|
|
.border--left::after,
|
|
.border--right::after,
|
|
.border--surround::after,
|
|
.border--top-bottom::after,
|
|
.border--top::after,
|
|
.border::after {
|
|
content: ' ';
|
|
position: absolute;
|
|
pointer-events: none;
|
|
box-sizing: border-box;
|
|
-webkit-transform-origin: center;
|
|
transform-origin: center;
|
|
top: -50%;
|
|
left: -50%;
|
|
right: -50%;
|
|
bottom: -50%;
|
|
-webkit-transform: scale(0.5);
|
|
transform: scale(0.5);
|
|
border: 0 solid #eee;
|
|
}
|
|
|
|
.border--top::after {
|
|
border-top-width: 1px;
|
|
}
|
|
|
|
.border--left::after {
|
|
border-left-width: 1px;
|
|
}
|
|
|
|
.border--right::after {
|
|
border-right-width: 1px;
|
|
}
|
|
|
|
.border--bottom::after {
|
|
border-bottom-width: 1px;
|
|
}
|
|
|
|
.border--top-bottom::after {
|
|
border-width: 1px 0;
|
|
}
|
|
|
|
.border--surround::after {
|
|
border-width: 1px;
|
|
}
|
|
|