細線邊框的具體實現方法有：偽元素縮放或漸變，box-shadow模擬，svg畫線，border-image裁剪等。要實現小于1px的線條，有個先決條件：屏幕的分辨率要足夠高，設備像素比要大于1，即css中的1個像素對應物理屏幕中1個以上的像素點。

對于普通電腦，屏幕物理像素和css像素一一對應，顯示的最小單位就是1px。而現在的手機，屏幕物理寬度一般都大于頁面顯示寬度。例如蘋果6s的屏幕分辨率為1334x750像素，但是以375px的寬度顯示頁面，設備像素比就是750/375=2；此時在css中定義0.5px的寬度，實際上對應物理屏幕的1個像素點，這就是border小于1px的的實現基礎。

@media only screen and (-webkit-min-device-pixel-ratio: 2){

.fineLine{

-webkit-transform: scaleY(.5);

}

}

var dpr = window.devicePixelRatio;

// 如下方法精確計算出了物理設備與css的像素比dppx。但實際使用中dpr更廣泛，也足以滿足一般需求

var dppx = window.screen.width/(window.innerWidth || document.documentElement.clientWidth);

一、縮放biefore/after偽元素

偽元素進行絕對定位，background著色要優于border著色，適合畫單線條：

.fineLine {

position: relative;

}

.fineLine:before,.fineLine:after{

position: absolute;

content: " ";

height: 1px;

width: 100%;

left: 0;

transform-origin: 0 0;

-webkit-transform-origin: 0 0;

}

.fineLine:before {

top: 0;

background: #000;

}

.fineLine:after {

bottom: 0;

border-bottom: 1px solid #000;

}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {

.fineLine:after,.fineLine:before {

-webkit-transform: scaleY(.667);

}

}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {

.fineLine:after,.fineLine:before {

-webkit-transform: scaleY(.5);

}

}

二、box-shadow模擬

box-shaodw適合模擬box四周都需要細線border的情況，而且支持border-radius。此例中演示的是dppx鑒別：

.fineLine {

box-shadow: 0 0 0 1px;

}

@media (min-resolution: 2dppx) {

.fineLine {

box-shadow: 0 0 0 0.5px;

}

}

@media (min-resolution: 3dppx) {

.fineLine {

box-shadow: 0 0 0 0.33333333px;

}

}

css3寫出0.5px的邊框

一說到0.5px的邊框,我們一般認為是不行的,因為在ps中0.5px的線也是做不出來的,這個計算機的像素有關系. 廢話不多說了,0.5px 其實用的是css3新特性,box-shadow:陰影設置 代 ...

css給div添加0.5px的邊框

具體代碼實現如下:

CSS3實現0.5px的邊框

前端頁面細節處理好了才會顯得精致.邊框在網頁中是常見的一種樣式了.雖然不把它處理為0.5px看上去沒毛病,但是想讓你做的東西征服更多的人,這些細節處理是必須的. 今天主要說一下如何讓邊框顯示0.5px ...

css 0.5px

1. 利用css3新屬性scale(好用推薦) 其實現的關鍵就是利用before或after偽元素,寬高同時設為200%,然后再縮放0.5,自然就是0.5px了 代碼如下: div { positon ...

CSS 3中細線邊框如何實現？

在app應用開發中,我們常常都需要用到css3來設置應用的樣式.由于app都是在移動設備上進行展示,所以邊框描邊的線一般都小于1px,而以往我們使用的都是1px及以上的.那么問題來了,對于小于1px的 ...

0.5px的邊框

總結

以上是生活随笔為你收集整理的html怎么添加5px高的线,CSS 0.5px 细线边框的原理和实现方式的全部內容，希望文章能夠幫你解決所遇到的問題。

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