stylus 移动端边框1像素问题解决方案
2024-08-31 18:29:10
border($border-width = 1px, $border-color = #ccc, $border-style = solid, $radius = 0)
// 为边框位置提供定位参考
position: relative; if $border-width == null
$border-width: 0; border-radius: $radius; &::after
// 用以解决边框layer遮盖内容
pointer-events: none;
position: absolute;
z-index: 999;
top: 0;
left: 0;
// 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: 1.49dppx)
width: 100%;
height: 100%;
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: 1.5dppx) and (max-resolution: 2.49dppx)
width: 200%;
height: 200%;
transform: scale(.5)
if $radius != null {
border-radius: $radius * 2;
} @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: 2.5dppx)
width: 300%;
height: 300%;
transform: scale(.33333)
if $radius != null {
border-radius: $radius * 3;
} transform-origin: 0 0;
最新文章
- C#字符串默认值
- JavaScript之闭包
- CDH自己安装方式Hbase master备份方式
- python4delphi Python could not be properly initialized. We must quit.
- struts2 mybatis spring hibernate 框架 pom.xml配置 下载地址
- opengl基础学习专题 (三) 多边形绘制的几种样式
- Newtonsoft.Json版本冲突时参考解决方案
- CXF之九 WS-Security
- Android 中退出程序的几种方法
- Windows Phone开发(46):与Socket有个约会
- 齐博cms 7.0 漏洞分析
- Java sax、dom、pull解析xml
- IOS微信分享功能简单实现
- QT5:C++实现基于Multimedia的音乐播放器(序)
- c# xml操作(二)
- [Swift]LeetCode132. 分割回文串 II | Palindrome Partitioning II
- bzoj3527: [Zjoi2014]力 fft
- 如何通过Chrome远程调试android设备上的Web网站
- WPF设计界面不执行代码
- Ubuntu18.04安装Guake下拉式终端
热门文章
- Python之Mail编程
- Vue -- element-ui el-table 的合计在第一行显示并可点击
- CAD教程-AL对其命令
- 洛谷 1775. [国家集训队2010]小Z的袜子
- redis代码解析-dictionary类型
- NEFU 109
- CommonJS,AMD,RequireJS的差别
- HDU 5372 Segment Game
- springMVC3.0(文件上传,@RequestMapping加參数,@SessionAttributes,@ModelAttribute,转发,重定向,数值获取,传參,ajax,拦截器)
- Toast分析——实现自己的Toast