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 @@
line-height: 40px;
font-size: 14px;
margin: 20px;
background-color: #dfdfdf;
}
.btn.radius {
border-radius: 15px;
}
.box {
width: 375px;
margin: 0 auto;
......@@ -22,19 +28,21 @@
flex-wrap: wrap;
}
[retain] {
--retain-border-color: #999999;
--retain-border-radius: 10px;
--retain-border-color: #0048ff;
--retain-border-radius: 15px;
}
</style>
</head>
<body>
<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: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>
<div retain="round" class="btn radius">四周边框(圆角)</div>
</div>
</body>
</html>
\ No newline at end of file
retain.css
/*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-border-color: #d4d4d4;
--retain-border-radius: 40px;
......@@ -105,6 +96,10 @@
transform: scale(0.5);
}
[retain~="round"]:after {
border-radius: calc(var(--retain-border-radius) * 2);
}
[retain~="border:top"]:before,
[retain~="border:left"]:before,
[retain~="border"]:after,
......@@ -141,6 +136,10 @@
-webkit-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) {
......@@ -164,6 +163,10 @@
-webkit-transform: scale(0.3333);
transform: scale(0.3333);
}
[retain~="round"]:after {
border-radius: calc(var(--retain-border-radius) * 3);
}
}
/* 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