小于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. python装饰器的详细解析

    什么是装饰器? python装饰器(fuctional decorators)就是用于拓展原来函数功能的一种函数,目的是在不改变原函数名(或类名)的情况下,给函数增加新的功能. 这个函数的特殊之处在于 ...

  2. python中str函数isdigit、isdecimal、isnumeric的区别

    num = "1" #unicodenum.isdigit() # Truenum.isdecimal() # Truenum.isnumeric() # True num = & ...

  3. Object.is()

  4. Spark流处理调优步骤

    总体运行状况: 这里的每个批处理任务间隔是10s一次,所以Total Delay是14s,那么对于下一个批处理任务来说就是延迟了14 - 10 = 4s . Total Delay   -  每个批处 ...

  5. [综] meanshift算法

    Meanshift,聚类算法 http://www.cnblogs.com/liqizhou/archive/2012/05/12/2497220.html 记得刚读研究生的时候,学习的第一个算法就是 ...

  6. Batch Close process

    @echo offecho.rem Kill all chrome drivertaskkill /im chromedriver.exe /f pause

  7. 基础 - 获得CPU主频

    // 获得cpu主频.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <windows.h> #include ...

  8. 长短记忆神经网络LSTM

    转载: https://www.jianshu.com/p/dcec3f07d3b5 https://blog.csdn.net/dream_catcher_10/article/details/48 ...

  9. 一些恶作剧的vbs程序代码

    恶作剧的vbs代码,这里提供的都是一些死循环或导致系统死机的vbs对机器没坏处,最多关机重启一下就可以了,将下面的任意一段代码保存为*.vbs即可 循环弹窗: do msgbox "hi&q ...

  10. form转化json

    ;(function($){ /** * 依赖jquery-1.4.2 * 依赖jquery.json-2.2,参考http://code.google.com/p/jquery-json/ * 用于 ...