<!doctype html>

<html lang="en">

<head>

    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">

    <meta charset="UTF-8">

    <title>CSS3实现小于1px的边框(移动端)</title>

    <style type="text/css">

        *{margin: 0;padding: 0;-webkit-box-sizing:border-box;}

        .div-big{

            position: relative;

        }

        .div-small{

            height: 60px;

            line-height: 60px;

            padding-left: 10px;

            position: relative;

            font-size: 20px;

        }

        .div-small:after{

            content: "";

            display: block;

            position: absolute;

            left: -50%;

            width: 200%;

            height: 1px;

            background: #ededed;

            -webkit-transform:scale(0.5);

        }

    </style>

</head>

<body>

<div class="div-big">

    <div class="div-small">第一块</div>

    <div class="div-small">第二块</div>

</div>

</body>

</html>

CSS3实现小于1px的边框(移动端)的更多相关文章

  1. [半转]1px边框 移动端

    半转的意思是借鉴参考,搬砖,加了一些自己的想法. 在移动端里,因为存在2倍像素的问题,所以很多时候,移动端上的1px边框并不是意义上的.从下图红色框看到dpr:2.0 ,表示1px等于2倍的物理像素. ...

  2. 在移动端实现1px的边框

    由于分辨率 DPI 的差异,高清手机屏上的 1px 实际上是由 2×2 个像素点来渲染,有的屏幕甚至用到了 3×3 个像素点 所以 border: 1px 在移动端会渲染为 2px 的边框 与设计图产 ...

  3. css笔记--web端小于1px设计的处理方法

    HTML代码 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UT ...

  4. css3使用技巧：细线边框的3种不同的写法

    一般的app边框描边的线都小于一像素,那么我就像往常一样直接描了1px的边框,虽然是1px可是结果和app里的描边完全不一样“粗了”,所以就在网找了一下看看有没有解决方法,可是找了一会没找到,那咋办, ...

  5. CSS如何作小于1PX的边

    小于1PX的边能使页面变得更加精致,那么具体怎么做呢? 主要思路就是设置伪元素先放大再通过变换缩小. 代码如下 .border { position: relative;//如果有圆角 } .bord ...

  6. img 标签注意 默认img标签，有一个1px的边框 img{ border: 0; }

    默认img标签,有一个1px的边框 img{ border: 0; }

  7. input，button制作按钮IE6，IE7点击时1px黑边框的解决方法

    按钮在IE6中点击时1px黑边框的最常见的解决方法 首先设置按钮为none,然后在按钮外面套一层来实现边框的效果,部分代码如下 .btnbox{ border:solid 1px red;} .btn ...

  8. 移动端 1px 像素边框问题的解决方案（Border.css）

    前言 关于什么是移动端1像素边框问题,先上两张图,大家就明白了. 解决方案 将以下代码放在border.css文件中,然后引入 常用className border:整个盒子都有边框 border-t ...

  9. 移动端1px的边框

    我们知道,在移动端存在物理像素(physical pixel)和设备独立像素(density-independent pixel)的概念.物理像素也称为设备像素,它是显示设备中一个最微小的物理部件,每 ...

随机推荐

  1. font-size:0; 消除空白间隙

    使用font-size:0解决设置inline-block引起的空白间隙问题 一.空白间隙问题 在进行页面布局的时候为了页面代码所谓整洁刻度,往往会设置缩进或是换行,但是元素display为inlin ...

  2. mobx状态管理快速入门

    1.mobx状态管理   安装: creact-react-app mobx  

  3. OpenCV Machine Learning (C++)

    /*M/////////////////////////////////////////////////////////////////////////////////////////// IMPOR ...

  4. #1024-JSP结构

    JSP 结构 网络服务器需要一个JSP引擎,也就是一个容器来处理JSP页面.容器负责截获对JSP页面的请求. JSP容器与Web服务器协同合作,为JSP的正常运行提供必要的运行环境和其他服务,并且能够 ...

  5. PS4 Submission

    第一部分是param.sfo文件的设置: 另外,sce_sys目录下的icon0.png文件和pic1.png文件也可以手动修改成自己需要的样式,前者是在游戏中的logo,图片要求是512x512,p ...

  6. Day3 02判定两个对象的引用是否相同

    C#中类型分为值类型和引用类型 清楚了他俩的区别,像验证下,如果在C++中,就可以通过指针直接看地址,但是C#中,找了一会儿没找到方法(主要是我技术比较菜). 不过,用根基类的ReferenceEqu ...

  7. 关于 Visual stdio 编译报错：error MSB6006: “CL.exe”已退出

    网上查看,原因有多种. 1,我自己遇到的是这样的: 环境:VS2019,编译项目 image-master,中间自己重整了原来的目录,移动了很多文件.编译报错:error MSB6006: “CL.e ...

  8. Django项目执行时No Module Named ' ' 问题的解决情况

    出现这种问题的情况大致都是因为该模块未安装,使用 pip install xxx 进行安装,即可解决此类问题. 出现ModuleNotFoundError: No module named 'rest ...

  9. element-ui的rules全局验证

    原文:https://www.jianshu.com/p/6a29e9e51b61 rules.js var QQV = (rule, value, callback) => { debugge ...

  10. windows10下基于docker的bvlc/caffe环境搭建与使用

    docker 安装参见docker官网,当cmd出现以下图像时安装正确; 然后进行bvlc/caffe环境创建,有两种,一种是直接pull github的bvlc,一种是本地创建image,直接使用g ...