美文网首页
css实现物理像素1px

css实现物理像素1px

作者: 卢哎呦 | 来源:发表于2017-01-20 09:55 被阅读165次
//利用背景图来画一个
//左竖线
.thin-line{
    background: -webkit-linear-gradient(left, transparent 50%, #e5e5e5 50%) no-repeat top left;
    background-size: 1px 100%;
}
//下横线
.thin-line{
    background: -webkit-linear-gradient(bottom, transparent 50%, #e5e5e5 50%) no-repeat bottom left;
    background-size: 100% 1px;
}
//利用::after伪类元素来给一个绝对定位
div::after{
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    background: -webkit-linear-gradient(top, transparent 50%, #f2f2f2 50%) no-repeat bottom left;
    background-size: 100% 1px;
    width: 100%;
    height: 1px;
}

相关文章

  • viewport

    像素 物理像素 (pt) 设备独立像素 (px) dpr = 物理像素/设备独立像素 css中的1px并...

  • dpr

    dpr = 物理像素 / css像素在dpr = 2; 1px的css像素在设备中是2px的物理像素,这会导致在设...

  • 设备像素比>1的移动设备上,1px问题

    在设备像素比 (物理像素/逻辑像素)>1 的移动设备上,css 的1px 并不对应1物理像素,例如设备像素比为2的...

  • 有关viewport的一二三

    一、背景 通俗来讲,css中的1px对应电脑屏幕的1个物理像素,那么css中的像素就是屏幕的物理像素吗?这只是一个...

  • 移动端1px问题

    由于UI要求的1px是指设备的物理像素1px,而在css中的像素其实是逻辑像素,可以使用window.device...

  • css实现物理像素1px

  • 移动端 1px 边框的问题

    物理像素[设备像素] & 逻辑像素[CSS 像素] 背景 拿2倍屏来说,设备的物理像素要实现1像素,而DPR=2,...

  • 1像素边框问题

    0x001 基本问题 在移动端开发时CSS的像素显示是逻辑像素而并不是真实的物理像素,因此美工给出的图片的1px,...

  • 移动端边框「1px」的问题

    原因:由于现在的手机几乎都是retina屏,css设置的1px会被渲染成2px的物理像素(针对像素比等于2的屏幕)...

  • 媒体查询

    不同端的设备下,在css文件中,1px所表示的物理像素的大小是不同的,因此通过一套样式,是无法实现各端的自适应。由...

网友评论

      本文标题:css实现物理像素1px

      本文链接:https://www.haomeiwen.com/subject/diewbttx.html