小于1PX的边能使页面变得更加精致,那么具体怎么做呢?

主要思路就是设置伪元素先放大再通过变换缩小。

代码如下

.border {
position: relative;
//如果有圆角

}

.border:before {
left: 0;
border-radius: 20px;//如果有圆角
content: '';
position: absolute;
width: 200%;
height: 200%;
border: 1px solid #9A9A9A;
-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(0.5, 0.5);
-ms-transform: scale(0.5, 0.5);
-o-transform: scale(0.5, 0.5);
transform: scale(0.5, 0.5);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

CSS如何作小于1PX的边的更多相关文章

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

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

  2. CSS3实现小于1px的边框(移动端)

    <!doctype html> <html lang="en"> <head> <meta content="width=dev ...

  3. css样式表格边框1px hover时为2px 实现方式

    //css .flclass-cont .flclass-cont-box{width:%;display:inline-block;font-size:;margin:10px;position:r ...

  4. CSS製作動畫效果(Transition、Animation、Transform)

    CSS 2D Transforms https://www.w3schools.com/css/css3_2dtransforms.asp CSS 3D Transforms https://www. ...

  5. css中em小于1时chrome字体大小和firefox字体大小不一致的问题

    css中em设置为0.8,结果页面显示,chrome字体比firefox字体大了不少. chrome有默认字体大小,默认为12px.设置的字体大小小于12px时,也是按照12px来显示. firefo ...

  6. border.css(解决移动端1px问题)

    由于某些机型分辨率过高,会导致1px变成2-多px像素的问题,引用bordercss解决 @charset "utf-8"; .border, .border-top, .bord ...

  7. css移动端适配 1px边框的解决方案

    .border{ width: 100px; height: 100px; position: relative; } //加上媒体查询更严谨一些 dpr为2的设配才进行缩放,dpr为1的设备边框就是 ...

  8. css设置字体小于12px

    p { white-space: nowrap; font-size: .12rem; -webkit-transform-origin-x: 0; //缩小后文字居左 -webkit-transfo ...

  9. 解决CSS小于12px的文字在谷歌浏览器显示问题

    做前端设计的人经常要接触CSS方面的问题,估计有不少人会遇到Chrome谷歌浏览器中CSS设置字体小于12px显示不正常,强创网络在做magento模板过程中就遇到了,起初以为是自己写的CSS的问题, ...

随机推荐

  1. arch 安装准备--包管理的使用pacman

    -------https://wiki.archlinux.org/index.php/Pacman/Tips_and_tricks#List_of_installed_packageshttps:/ ...

  2. jdk1.7安装和配置

    jdk1.7 安装引用 https://jingyan.baidu.com/article/ff41162596a77912e4823716.html

  3. .Net Core 项目在Windows服务中托管【转载】

    本文以创建的WebAPI项目为例子进行讲解(本人使用VS Code创建的项目) 1.使用VS Code创建WebAPI项目(项目名称自定义) 2.在创建的项目csproj项目文件中,确认是否存在运行时 ...

  4. zabbix之 自定义内存使用率监控报警

    配置zabbix当内存剩余不足15%的时候触发报警   zabbix默认的剩余内存报警:Average Lack of available memory on server {HOST.NAME}{T ...

  5. 《Linux内核原理与分析》第四次作业

    跟踪分析Linux内核的启动过程 使用实验楼的虚拟机打开shell 使用 gdb 跟踪调试内核 使用 qemu qemu -kernel linux-3.18.6 /arch/x86/boot/baI ...

  6. 理念的创新——从keep和得到app谈起

    浅谈keep创新之路 不得不说,这是一个健康越来越重要的时代,也是身体素质越来越被重视的一个年代.随着交通工具日新月异地发展,我们不太需要再徒步远行,甚至连骑自行车的机会也越来越少,这给我们的出行带来 ...

  7. myibatis的坑--text类型的字段查询缺失

    问题:某个字段的类型为text(或者mediumtext,longtext)的时候,用selectByQuery语句查询出来的结果不包含该字段内容. myibatis 用mybatis-generat ...

  8. JAVA 集合操作总结

    1.Collection 1.基本操作 对集合的基础操作 1.boolean add(Object o) //添加对象到集合 2.boolean remove(Object o) //删除指定的对象 ...

  9. 6.8 出口条件循环:do while

    while循环和for循环都是入口条件循环,即在循环的每次迭代之前检查测试条件,所以有可能根本不执行循环体中的内容.C语言还有出口条件循环(exit-condition loop),即在循环的每次迭代 ...

  10. [sql]sql函数coalesce返回第一个非空的值

    下面来看几个比较有用的例子: 首先,从MSDN上看看这个函数的使用方法,coalesce函数(下面简称函数),返回一个参数中非空的值.如: SELECT  COALESCE(NULL, NULL, G ...