小于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. win32网络模型之重叠I/O

    网上大部分重叠I/O的基本概念都讲得很清楚,但是大多讲得不是很深入,实际用起来很多问题.这里只对完成实例的通知进行讨论,对问题进行总结. 重叠IO异步读写后,在某一时刻"完成"后会 ...

  2. String引用数据类型

    一.String类的第一种方式 (原文地址:https://blog.csdn.net/wangdajiao/article/details/52087302)1.直接赋值 例:String str ...

  3. xgboost实例代码

    # -*- coding: utf-8 -*- import xgboost as xgb import csv import jieba jieba.load_userdict('wordDict. ...

  4. 第三章 C#程序结构[3.2 选择结构的应用(Windows窗体应用程序)(四)]

    [案例]设计一个顾客选购商品的系统.其中,顾客身份有两类,一类是VIP,另一类是普通会员:商品种类有3种.分别是上衣.裤子和鞋子.其中,VIP享受8折优惠和商店赠送的礼品,而普通会员都不享受.单击[确 ...

  5. ubuntu12.04 64bit libncurses5-dev和libncurses5-dev:i386共存性问题讨论

    ubuntu12.04 64bit 编译kernel(或者make menuconfig)源码时出现如下错误: HOSTLD scripts/kconfig/mconf scripts/kconfig ...

  6. PAT 乙级1093 字符串A+B (20 分)

    1093 字符串A+B (20 分) 给定两个字符串 A 和 B,本题要求你输出 A+B,即两个字符串的并集.要求先输出 A,再输出 B,但重复的字符必须被剔除. 输入格式: 输入在两行中分别给出 A ...

  7. Linux vim快捷键

    1  替换    r  替换  先按r再按要替换的内容 2  按yy复制当前行  按p是粘贴 3 # add at 18-10-25 #-------------------------------- ...

  8. Scrapy实战篇(二)之爬取链家网成交房源数据(下)

    在上一小节中,我们已经提取到了房源的具体信息,这一节中,我们主要是对提取到的数据进行后续的处理,以及进行相关的设置. 数据处理 我们这里以把数据存储到mongo数据库为例.编写pipelines.py ...

  9. [UE4]VR成像原理

    一.双眼成像原理 二.3D电影成像原理 模拟人眼.用2个摄像机拍摄,模拟人的左眼和右眼 播放的时候2个投影仪分别同时播放左右摄像机拍摄到内容,观众带上3D眼镜,左眼只能看到左摄像机的内容(过滤右摄像机 ...

  10. 0003 - 基于xml的Spring Bean 的创建过程

    一.目录 前言 创建 Bean 容器 加载 Bean 定义 创建 Bean Spring Bean 创建过程中的设计模式 总结 二.前言 2.1 Spring 使用配置 ApplicationCont ...