當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

retina屏下的1px线的实现

發布時間：2023/12/20 编程问答 20 豆豆

生活随笔收集整理的這篇文章主要介紹了 retina屏下的1px线的实现小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

作者 |?chokcoco

來源 |?https://chokcoco.github.io

retina屏下的1px線的實現，適用于 dpr：2 的情況。

法一：使用漸變實現，使用兩種顏色填充 1px 寬內容
法二：使用縮放實現，對 1px 高度線條進行0.5倍縮放
法三：base64 編碼實現
法四：base64 編碼嵌入SVG實現

HTML代碼如下：

<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="msapplication-tap-highlight" content="no" />
<title>retina屏下的1px線的實現</title>
</head>

<body>
<div class="border_normal">正常使用1px border效果（本DEMO請在移動端環境下查看）</div>
<div class="border_gradient">法一：使用漸變實現，使用兩種顏色填充 1px 寬內容 </div>
<div class="border_scale">法二：使用縮放實現，對 1px 高度線條進行0.5倍縮放</div>
<div class="border_base64">法三：base64 編碼實現</div>
<div class="border_svg">法四：base64 編碼嵌入SVG實現</div>
</body>

SCSS代碼如下：

body {
// overflow: hidden;
}

div {
width: 100vw;
height: 80px;
margin: 30px auto;
background-color: rgba(0, 0, 0, 0.1);
text-align: center;
padding-top: 20px;
font-size: 16px;
box-sizing: border-box;
}

/*border-top:1px*/
.border_normal,
.border_gradient,
.border_scale,
.border_boxshadow,
.border_base64,
.border_svg{
border-top: 1px solid #999;
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.border_gradient {
background-image: linear-gradient(to top, transparent 50%, #999 50%);
background-size: 100% 1px;
background-repeat: no-repeat;
background-position: top center;
border-top: 0 none;
padding-top: 1px;
}

.border_scale {
position: relative;
padding-top: 1px;
border-top: 0 none;
}
.border_scale:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 200%;
border-top: 1px solid #999;
transform: scale(0.5);
transform-origin: 0 0;
box-sizing: border-box;
}
.border_base64 {
padding-top: 1px;
border-top: 0 none;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAQSURBVBhXY5g5c+Z/BhAAABRcAsvqBShzAAAAAElFTkSuQmCC);
background-position: 0 0;
background-repeat: repeat-x;
background-size: 1px 1px;
}

.border_svg {
border-top: 0 none;
background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#999' x='0' y='0.5' width='100%' height='0.5' /></svg>");
background-position:0 0;
background-repeat:no-repeat;
}

}

總結

以上是生活随笔為你收集整理的retina屏下的1px线的实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

px
Retina