//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. BCZM : 1.6

    https://blog.csdn.net/kabini/article/details/2311946 题目大意: 水房能容纳饮料的总量是V,有一批饮料,每种饮料单个容量都是2的方幂,每种饮料信息如 ...

  2. 从别人git下载项目下来然后运行

    1点击clone or  download 2.自由选择 3.拉到你想放的位置,我是放到桌面上的 4. cmd 打开,进入你 的下载到桌面的项目 5. # install dependencies n ...

  3. 关于IDEA中maven项目中在pom.xml导入依赖报错的解决方法

    报错详情 今天使用springcloud中的hystrix做服务降级的时候,导入下面的依赖,出现红色波浪线的报错信息 <dependency> <groupId>org.spr ...

  4. LUOGU P2290 [HNOI2004]树的计数(组合数,prufer序)

    传送门 解题思路 \(prufer\)序,就是所有的不同的无根树,都可以转化为唯一的序列.做法就是每次从度数为\(1\)的点中选出一个字典序最小的,把这个点删掉,并把这个点相连的节点加入序列,直到只剩 ...

  5. 双线程DP

    1.传纸条 好像是一道普及组水题? //Twenty #include<cstdio> #include<iostream> #include<cstring> # ...

  6. VS中检测数据库链接

    在程序中链接数据库,总要为链接语句发愁.可以尝试在链接前,从VS中测试下链接,测试成功的话,可以直接将链接语句复制到程序中. 在VS中,选择“工具”——“连接到数据库”,如下:

  7. 如何打开rdb文件

    后缀名是RDB用什么软件打开不能用记事本打开后是乱码不知用什么软件写入的... RDB文件是QQ2009SP以后的替代DB文件的一种新的文件格式,是一种数据库文件请下载 百度搜索下载:rdb打包解包工 ...

  8. Docker系列(八):Kubernetes横空出世背后的秘密

    Docker与CoreOS的恩怨情仇 2013年2月,Docker建立了一个网站发布它的首个演示版本, 3月,美国加州Alex Polvi正在自己的车库开始 他的 第二次创业 有了第一桶金的Alex这 ...

  9. AtCoder ABC 129F Takahashi's Basics in Education and Learning

    题目链接:https://atcoder.jp/contests/abc129/tasks/abc129_f 题目大意 给定一个长度为 L ,首项为 A,公差为 B 的等差数列 S,将这 L 个数拼起 ...

  10. Java 10的10个新特性,将彻底改变你写代码的方式!

    Java 9才发布几个月,很多玩意都没整明白,现在Java 10又快要来了.. 这时候我真尼玛想说:线上用的JDK 7 甚至JDK 6,JDK 8 还没用熟,JDK 9 才发布不久不知道啥玩意,JDK ...