//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. JPA Query in 集合

    使用 :param的方式来传递参数,下面举个例子 @PersistenceContext ​​​​​​​EntityManager em @Override public List<Map> ...

  2. note : Get FilePathName from FILE_OBJECT

    转自:http://blog.csdn.net/lostspeed/article/details/11738311 封了一个函数, 从 FILE_OBJECT 中 得到 FilePathName 在 ...

  3. iptbales无法正常重启

    新主机iptables无法启动关闭和重启 一般是由于没有配文件导致 解决办法 直接touch /etc/sysconfig/iptables 然后就可以正常启动. 备注:一般存在于centos6系列中

  4. sublime 3打开中文乱码问题

    首先到官网 https://packagecontrol.io/installation#Simple 下载一个控制台支持的扩展包Package Control.sublime-package 在su ...

  5. spring boot项目开发中遇到问题,持续更新

    1.JPA中EntityManager不能执行建表语句,提示要加事务Error:javax.persistence.TransactionRequiredException: Executing an ...

  6. 5020: [THUWC 2017]在美妙的数学王国中畅游

    传送门 当年听llj讲的时候觉得这简直是个不可做的神题. 现在看来并不是很神,可能是我已经被剧透了的缘故... 一开始以为是函数套函数,懵蔽了好久,结果只是求和 被剧透了泰勒展开就比较水了..只要你不 ...

  7. java web项目部署到云服务器

    第一步把java web项目打包 成war包 第二步:在Build选里选择build Artfacts->water:war->Build war包建立完毕. 第三步:在官网下载winsc ...

  8. 第三周——重新clone项目、配置并编译

    重新clone项目的原因 因为实习尚未有公司邮箱,使用qq邮箱没有权限提交代码,因此使用晶哥的账号和gitlab, 但是git clone项目默认会关联账号(可能有某些配置项,但是找不到), idea ...

  9. 16.ajax_case08

    # 抓取简书博客总阅读量 # https://www.jianshu.com/u/130f76596b02 import requests import json import re from lxm ...

  10. 第四周课堂笔记4th

    编码     Ascii美国 一个字节表示一个字符,必能表示汉子 大写字母65-90  小写字母97-122 265个位置 8位表示一个字节,  8bit=1byte GBK  中国 只包含本国文字 ...