css實(shí)現(xiàn)0.5px線條解決移動(dòng)端兼容問題(推薦)

發(fā)布時(shí)間：2020-11-23 17:16:38 作者：前端·卡卡西

這篇文章主要介紹了css實(shí)現(xiàn)0.5px線條解決移動(dòng)端兼容問題(推薦),本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

【內(nèi)容】：

1. 利用background-image 漸變樣式

2.可以利用scale縮放

3.給偽元素設(shè)置邊框

在這里插入代碼片<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>0.5px線實(shí)現(xiàn)方法</title>
 <style type="text/css">
 /*標(biāo)準(zhǔn)1px邊框*/
 .b1{
 height: 40px;
 border: 1px solid #ff0000;
 }
 /*1.可以利用利用漸變樣式=>實(shí)現(xiàn).5px*/
 .a1{
 height: 1px;
 margin-top: 20px;
 background-image: linear-gradient(0deg, #f00 50%, transparent 50%);
 }
 /*2.可以利用縮放-發(fā)虛=>實(shí)現(xiàn).5px*/
 .a2{
 height: 1px;
 margin-top: 20px;
 background-color: #f00;
 -webkit-transform: scaleY(.5);
 transform:scaleY(.5);
 }
 /*3.四條邊框都需要的樣式*/
 .scale-half {
 margin-top: 20px;
 height: 100px;
 border:1px solid #f00;
 -webkit-transform-origin: 0 0;
 transform-origin: 0 0;
 -webkit-transform: scale(.5, .5);
 transform: scale(.5, .5);
 }
 /*4.給偽元素添加設(shè)置邊框*/
 .border3{
 position: relative;
 }
 .border3:before{
 content: '';
 position: absolute;
 width: 200%;
 height: 200%;
 border: 1px solid blue;
 -webkit-transform-origin: 0 0;
 -moz-transform-origin: 0 0;
 -ms-transform-origin: 0 0;
 -o-transform-origin: 0 0;
 transform-origin: 0 0;
 -webkit-transform: scale(.5, .5);
 -ms-transform: scale(.5, .5);
 -o-transform: scale(.5, .5);
 transform: scale(.5, .5);
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 }
 </style>
</head>
<body>
<div class="b1">正常1px邊框</div>
<div class="a1"></div>
<div class="a2"></div>
<div class="scale-half"></div>
<div class="border3">
 <div class="content">偽類設(shè)置的邊框</div>
</div>
</body>
</html>

到此這篇關(guān)于css實(shí)現(xiàn)0.5px線條解決移動(dòng)端兼容問題(推薦)的文章就介紹到這了,更多相關(guān)css實(shí)現(xiàn)0.5px線條內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！