html怎么添加5px高的线,CSS 0.5px 细线边框的原理和实现方式

细线边框的具体实现方法有：伪元素缩放或渐变，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的边框