小于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. django无法同步mysql数据库 Error:1064

    [问题] 具体问题:新建django工程,使用django的manage.py的 migrate命令进行更改. 在初始化数据库表时,失败,错误信息为 django.db.migrations.exce ...

  2. Eslint 能自动格式化代码,为什么还要用 Prettier?

    ESLint 与 Prettier 区别: ESLint:代码检测工具:可以检测出你代码中潜在的问题,比如使用了某个变量却忘记了定义: Prettier:代码格式化工具:作为代码格式化工具,能够统一你 ...

  3. mongodb集群配置主从模式

    测试环境 操作系统:CentOS 7.2 最小化安装 主服务器IP地址:192.168.197.21 master-node 从服务器IP地址:192.168.197.22 slave-node 关闭 ...

  4. 强制找回gitlab管理员密码

    强制找回gitlab管理员密码 最近使用gitlab的时候发现管理员密码忘记,现将找回密码的操作过程记录下来. 1.在gitlab登录窗口 如果密码忘记了登录不进入,可以先尝试点击登录框下方的Forg ...

  5. mySQL 判断表是否存

    select `TABLE_NAME` from `INFORMATION_SCHEMA`.`TABLES` where `TABLE_SCHEMA`='数据库名' and `TABLE_NAME`= ...

  6. ionic3 热更新发布步骤记录

    1.安装基本框架npm install -g ionic@latest npm install -g cordova ionic 验证版本号 ionic –version cordova -versi ...

  7. NFC应用于公交卡

    NFC应用于公交卡https://www.cnblogs.com/liuzhaoyzz/p/7115098.html 带有NFC功能的安卓手机可以给实体公交卡充值,手机虚拟公交卡现在有两种方案,一种是 ...

  8. 1、Shiro 安全框架与Spring 整合详解

    Apache Shiro 是一个安全认证框架,和 Spring Security 相比,在于他使用了比较简洁易懂的认证和授权方式.其提供的 native-session(即把用户认证后的授权信息保存在 ...

  9. vmware中的linux虚拟机配置以nat模式上网,并用xshell连接该虚拟机

    1.  首先确保宿主机上的vmnet8处于启用状态 2.  以管理员身份运行vmware >> 编辑 >> 虚拟机网络编辑器 >> 选中Vmnet8 >> ...

  10. DevExpress的42种窗体样式

    在Winform环境下DevExpress标题栏皮肤 第一步:引用DLL文件,安装DevExpress后在引用>程序集>扩展: DevExpress.BonusSkins.v12.2.dl ...