stylus实现边框1px
//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的更多相关文章
- table边框1px
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 移动端边框1px的实现
查看京东的移动端1px实现原理,用的是:after和css3的scale(0.5)缩放. border-right fr:after{ height:100%; content:' '; width: ...
- retina屏实现border边框1px
.border { position: relative; width: 300px; height: 200px; } .border:after { border: 1px solid #ff33 ...
- css样式表格边框1px hover时为2px 实现方式
//css .flclass-cont .flclass-cont-box{width:%;display:inline-block;font-size:;margin:10px;position:r ...
- 移动端1px边框解决方案
在retina屏中,像素比为2(iPhone6/7/8)或3(iPhone6Plus/7Plus/8Plus),1px的边框看起来比真的1px更宽. 使用伪类加transform的方式 元素本身不定义 ...
- 1px解决方案--集锦
没有废话,直接上代码 汇聚各种版本,持续更新中.... 1.sass @charset "utf-8"; /** * @module 背景与边框 * @description 为元 ...
- CSS3学习笔记(3)-CSS3边框
p{ font-size: 15px; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid #aaa; width: 99%; ...
- Vue-cli3.0开发笔记
安装 npm install -g @vue/cli # OR yarn global add @vue/cli 版本为3.X vue --version 创建项目 vue create hello- ...
- vue项目常见需求(项目实战笔记)
一.起步 1.引入reset.css解决手机之间不同分辨率的问题(reset.css为别人封装的css文件) import './assets/styles/reset.css' 使用方式 1rem= ...
随机推荐
- springboot EL @Value
一,springboot中 看一下代码: @Controller public class HelloController { //读取枚举值 @Value("#{T(com.example ...
- iptables 命令大全
1.连续端口配置 iptables可以方便的配置多个端口.其中根据端口的连续性,又可分为连续端口配置和不连续端口配置. 如: -A INPUT -p tcp –dport 21:25 -j DROP/ ...
- [JZOJ3234] 阴阳
题目 题目大意 有一棵树,每条边有\(0\)或\(1\)两种颜色. 求满足存在\((u,v)\)路径上的点\(x\)使得\((u,x)\)和\((x,v)\)路径上的两种颜色出现次数相同的点对\((u ...
- expect离线安装
expect5.45.4.tar.gz和tcl8.4.11-src.tar.gz压缩包请前往以下链接下载: https://download.csdn.net/download/gangzi221/1 ...
- 正则表达式 判断内容是否为合法的url
var strUrl= "^((https|http|ftp|rtsp|mms)?://)" + "?(([0-9a-z_!~*'().&=+$%-]+: )?[ ...
- https://stackoverflow.com/与程序相关的IT技术问答网站
https://stackoverflow.com/ Stack Overflow是一个与程序相关的IT技术问答网站.用户可以在网站免费提交问题,浏览问题,索引相关内容,在创建主页的时候使用简单的HT ...
- iOS之SceneKit.h文件简介
1.SceneKit简介 SceneKit(SK)是WWDC12推出的OS X平台的Cocos 3D渲染引擎框架.支持粒子效果,物理模拟,脚本事件,多程渲染,支持iOS平台.SceneKit整合了Co ...
- substring常用的两种方法
1.public String substring(int beginIndex, int endIndex) 第一个参数int为开始的索引,对应String数字中的开始位置, 第二个参数是截止的索引 ...
- 4_9.springboot2.x之使用外置servlet容器原理解析
问题概述 嵌入式Servlet容器: 应用打成可执行的jar 优点:简单.便携: **缺点:**默认不支持JSP.优化定制比较复杂(使用定制器[ServerProperties.自定义WebServe ...
- Spark如何读写hive
原文引自:http://blog.csdn.net/zongzhiyuan/article/details/78076842 hive数据表建立可以在hive上建立,或者使用hiveContext.s ...