小于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. 面向对象+JAVA基础

    泛泛的研究了面向对象的前五章,感觉没有代码的参照理解的知识看过就忘,所以又在推荐下开始了JAVA基础,希望不会鄙视我目前么有一本书能完整看完的记录... public class LeapYear { ...

  2. WebSocket是什么原理?为什么可以实现持久连接?

    作者:Ovear 链接:https://www.zhihu.com/question/20215561/answer/40316953来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载 ...

  3. java中的可释放资源定义,类似c#中的using

    public static class FileDuplicator implements AutoCloseable { Scanner in = null; PrintWriter out = n ...

  4. Linux 下安装FastDFS v5.08 的php扩展

    php扩展也需要依赖于FastDFS一些库文件,所以请先安装FastDFS,具体请看我之前的文章.   一.安装目录 php安装目录 /data/nmp/php FastDFS源码目录 /data/w ...

  5. linux下一些重要命令的了解

    linux下一些比较重要的命令: du命令: 查看使用空间: 格式: du [选项][文件] 参数: -a  显示目录中个别文件的大小. -b  显示目录或文件大小时,以byte为单位. -c  除了 ...

  6. Redis 集群知识点及命令

    Redis 集群命令 备注 cluster nodes 查看集群包含的节点 cluster meet <ip> <port> 将 ip 和 port 所指定的节点添加到 nod ...

  7. golang http proxy反向代理

    本文介绍golang中如何进行反向代理. 下面例子中, proxy server接收client 的 http request,转发给true server,并把 true server的返回结果再发 ...

  8. icomoon:生成字体图标的方法并应用

    字体图标任意缩放不会失真,也大大减少请求数量,非常好用. 在线生成工具:https://icomoon.io/app/#/select 在线SVG图库(阿里),  用于导入:http://www.ic ...

  9. AIUI开放平台:多轮对话返回前几轮语槽数据

    编写云函数: AIUI.create("v2", function(aiui, err){ // 获取 response response = aiui.getResponse() ...

  10. Excel--按内容分页打印

    当我们有这样一张表,需要按不同城市分页打印,每页带标题行,可按以下步骤:1.点击城市一列任一单元格,点击“开始”——>“排序和筛选”(升序): 2.点击“数据”-->“分类汇总”: 分类字 ...