//1px的实现
border($border-width = 1px, $border-color = #ccc, $border-style = solid, $radius = )
// 为边框位置提供定位参考
position: relative; if $border-width == null
$border-width: ; border-radius: $radius; &::after
// 用以解决边框layer遮盖内容
pointer-events: none;
position: absolute;
z-index: ;
top: ;
left: ;
// fix当元素宽度出现小数时,边框可能显示不全的问题
// overflow: hidden;
content: "\0020";
border-color: $border-color;
border-style: $border-style;
border-width: $border-width; // 适配dpr进行缩放
@media (max--moz-device-pixel-ratio: 1.49), (-webkit-max-device-pixel-ratio: 1.49), (max-device-pixel-ratio: 1.49), (max-resolution: 143dpi), (max-resolution: .49dppx)
width: %;
height: %;
if $radius != null {
border-radius: $radius;
} @media (min--moz-device-pixel-ratio: 1.5) and (max--moz-device-pixel-ratio: 2.49), (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 2.49),(min-device-pixel-ratio: 1.5) and (max-device-pixel-ratio: 2.49),(min-resolution: 144dpi) and (max-resolution: 239dpi),(min-resolution: .5dppx) and (max-resolution: .49dppx)
width: %;
height: %;
transform: scale(.)
if $radius != null {
border-radius: $radius * ;
} @media (min--moz-device-pixel-ratio: 2.5), (-webkit-min-device-pixel-ratio: 2.5),(min-device-pixel-ratio: 2.5), (min-resolution: 240dpi),(min-resolution: .5dppx)
width: %;
height: %;
transform: scale(.)
if $radius != null {
border-radius: $radius * ; transform-origin: ;

stylus实现边框1px的更多相关文章

  1. table边框1px

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 移动端边框1px的实现

    查看京东的移动端1px实现原理,用的是:after和css3的scale(0.5)缩放. border-right fr:after{ height:100%; content:' '; width: ...

  3. retina屏实现border边框1px

    .border { position: relative; width: 300px; height: 200px; } .border:after { border: 1px solid #ff33 ...

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

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

  5. 移动端1px边框解决方案

    在retina屏中,像素比为2(iPhone6/7/8)或3(iPhone6Plus/7Plus/8Plus),1px的边框看起来比真的1px更宽. 使用伪类加transform的方式 元素本身不定义 ...

  6. 1px解决方案--集锦

    没有废话,直接上代码 汇聚各种版本,持续更新中.... 1.sass @charset "utf-8"; /** * @module 背景与边框 * @description 为元 ...

  7. CSS3学习笔记(3)-CSS3边框

    p{ font-size: 15px; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid #aaa; width: 99%; ...

  8. Vue-cli3.0开发笔记

    安装 npm install -g @vue/cli # OR yarn global add @vue/cli 版本为3.X vue --version 创建项目 vue create hello- ...

  9. vue项目常见需求(项目实战笔记)

    一.起步 1.引入reset.css解决手机之间不同分辨率的问题(reset.css为别人封装的css文件) import './assets/styles/reset.css' 使用方式 1rem= ...

随机推荐

  1. C#学习笔记----反射基础

    反射基础 反射用于在程序运行过程中,获取类里面的信息或发现程序集并运行的一个过程.通过反射可以获得.dll和.exe后缀的程序集里面的信息.使用反射可以看到一个程序集内部的类,接口,字段,属性,方法, ...

  2. 数据库MySQL--数据操作语言DML(插入、修改、删除)

    例子文件:https://files-cdn.cnblogs.com/files/Vera-y/girls.zip 一.插入 方式一: 语法: insert into 表名(列名,.....) val ...

  3. 廖雪峰Java16函数式编程-2Stream-7其他操作

    1. 排序 Stream<T> sorted(); //按元素默认大小排序(必须实现Comparable接口) Stream<T> sorted(Comparator<? ...

  4. 模拟MySQL命令

    staff_table 1,Alex Li,22,13651054608,IT,2013-04-01 2,Jack Wang,30,13304320533,HR,2015-05-03 3,Rain L ...

  5. redis 本地连接可以 远程连接不上问题

    1.所连主机防火墙关一下. 1:查看防火状态 systemctl status firewalld service  status iptables  2:暂时关闭防火墙 systemctl stop ...

  6. 在ubuntu下编写python

    一般情况下,ubuntu已经安装了python,打开终端,直接输入python,即可进行python编写. 默认为python2 如果想写python3,在终端输入python3即可. 如果需要执行大 ...

  7. ps快速将白底图片变为透明图片

    方法一: 如果图层有锁图标,则要点击它,然它消失.然后选中魔棒工具,然后点击图片上要透明的区域,按下backspace键即可. 方法二: 转载自:https://blog.csdn.net/sunyi ...

  8. QT之QByteArray

    1.拷贝内容到QByteArray 1.使用append函数 //结合结构体的(char*)强制转化使用,command.append((char*)&e2_System_Para_t, si ...

  9. php 取某一日期的前一天

    代码为: $date = “2009-01-01”;$time = strtotime($date) – 3600*24;echo date(‘Y-m-d’,$time); 或者一句:echo dat ...

  10. python编码(31-01)

    以什么方式编码,就以什么方式解码! 第一种编码与解码方式: encode()编码 decode()解码 type()查看数据类型 repr()查看数据内容 s = '你好'print(type(s)) ...