Skip to content

R
retain.css
Commit 628d5824 by zhengxiao
Options

fix: 修复圆角边框在不同dpi下的自适应问题

parent 03bbf75b
Showing with 25 additions and 12 deletions
index.html
...@@ -13,7 +13,13 @@ ...@@ -13,7 +13,13 @@
line-height: 40px; line-height: 40px;
font-size: 14px; font-size: 14px;
margin: 20px; margin: 20px;
background-color: #dfdfdf;
} }
.btn.radius {
border-radius: 15px;
}
.box { .box {
width: 375px; width: 375px;
margin: 0 auto; margin: 0 auto;
...@@ -22,19 +28,21 @@ ...@@ -22,19 +28,21 @@
flex-wrap: wrap; flex-wrap: wrap;
} }
[retain] { [retain] {
--retain-border-color: #999999; --retain-border-color: #0048ff;
--retain-border-radius: 10px; --retain-border-radius: 15px;
} }
</style> </style>
</head> </head>
<body> <body>
<div class="box"> <div class="box">
<div retain="border:right border:left" class="btn">左右边框</div>
<div retain="border:top border:bottom" class="btn">上下边框</div>
<div retain="border:top" class="btn">上边框</div> <div retain="border:top" class="btn">上边框</div>
<div retain="border:bottom" class="btn">下边框</div> <div retain="border:bottom" class="btn">下边框</div>
<div retain="border:left" class="btn">左边框</div> <div retain="border:left" class="btn">左边框</div>
<div retain="border:right" class="btn">右边框</div> <div retain="border:right" class="btn">右边框</div>
<div retain="border" class="btn">四周边框</div> <div retain="border" class="btn">四周边框</div>
<div retain="round" class="btn">四周边框(圆角)</div> <div retain="round" class="btn radius">四周边框(圆角)</div>
</div> </div>
</body> </body>
</html> </html>
\ No newline at end of file
retain.css
/*retain 1px border start*/ /*retain 1px border start*/
/*
<div retain="border:top" class="btn">上边框</div>
<div retain="border:bottom" class="btn">下边框</div>
<div retain="border:left" class="btn">左边框</div>
<div retain="border:right" class="btn">右边框</div>
<div retain="border" class="btn">四周边框</div>
<div retain="round" class="btn">四周边框(圆角)</div>
*/
[retain] { [retain] {
--retain-border-color: #d4d4d4; --retain-border-color: #d4d4d4;
--retain-border-radius: 40px; --retain-border-radius: 40px;
...@@ -105,6 +96,10 @@ ...@@ -105,6 +96,10 @@
transform: scale(0.5); transform: scale(0.5);
} }
[retain~="round"]:after {
border-radius: calc(var(--retain-border-radius) * 2);
}
[retain~="border:top"]:before, [retain~="border:top"]:before,
[retain~="border:left"]:before, [retain~="border:left"]:before,
[retain~="border"]:after, [retain~="border"]:after,
...@@ -141,6 +136,10 @@ ...@@ -141,6 +136,10 @@
-webkit-transform: scale(0.6666); -webkit-transform: scale(0.6666);
transform: scale(0.6666); transform: scale(0.6666);
} }
[retain~="round"]:after {
border-radius: calc(var(--retain-border-radius) * 1.5);
}
} }
@media (-webkit-device-pixel-ratio: 3) { @media (-webkit-device-pixel-ratio: 3) {
...@@ -164,6 +163,10 @@ ...@@ -164,6 +163,10 @@
-webkit-transform: scale(0.3333); -webkit-transform: scale(0.3333);
transform: scale(0.3333); transform: scale(0.3333);
} }
[retain~="round"]:after {
border-radius: calc(var(--retain-border-radius) * 3);
}
} }
/* retain 1px border end */ /* retain 1px border end */
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment