stylus实现边框1px
2024-08-28 22:17:54
//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: ;
最新文章
- MySQL Database on Azure新功能
- tomcat的debug模式启动不了
- linux centos yum安装LAMP环境
- java map的默认排序问题
- 黑马程序员-nil Nil NULL NSNull 野指针和空指针
- Atitit.异步的实现模式attilax大总结
- JavaScript基础20——element对象
- Java实现cache的基本机制
- Unity3D细节整理:AssetBundle对应的各种格式文件的类型
- nginx 学习八 高级数据结构之基数树ngx_radix_tree_t
- 编译升级php
- Mysql字符集设置 2 图
- Java基础中的一些注意点(续)
- Statusbar出现透明及界面下方出现空白
- vmware中ubuntu更新内核后无法进入桌面,鼠标“漂移”滑动
- Asp.Net WebAPI 中Cookie 获取操作方式
- 写一个兼容性比较好的拖拽DEMO
- windows phone 8的新特性
- 拿来之笔 希望铭记 笔记 出处 http://www.jianshu.com/p/acb8885283dc
- 【vue】vue +element 搭建项目,加(解)密