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= ...
随机推荐
- @Formula
@Formula 计算临时属性. 相当于可以关联查询字段,然后放在实体中当做属性使用. 任务:在User实体层,增加一个额外的属性,来获取Test表中的name字段. 1 表结构 User表 Tes ...
- redis笔记_源码_字典dict
参考:https://redissrc.readthedocs.io/en/latest/datastruct/dict.html Expand: 条件: 新的table 大小: Rehash: 条件 ...
- C++ strcat_s
{ //如果用strcat() 连接时被连接的字符串是堆内存会 [损坏内存],使堆内存无法释放 建议用strcat_s() }
- thinkphp 批量配置
C配置方法支持批量配置,例如: $config = array('WEB_SITE_TITLE'=>'ThinkPHP','WEB_SITE_DESCRIPTION'=>'开源PHP框架' ...
- (转)Android开发把项目打包成apk
转:http://blog.csdn.net/luoyin22/article/details/7862742 做完一个Android项目之后,如何才能把项目发布到Internet上供别人使用呢?我们 ...
- Ubunto 无法连接ssh客服端
解决办法: (1)查看ip地址是否冲突 我在单位的虚拟机ip地址是192.168.14.85,与其它机器冲突了.改成了192.168.14.83 (2)关闭Ubuntu14.04的防火墙 root ...
- hexo 错误汇总
文章目录 发布文章遇到: 发布文章的时候出现错误: 代码推送到github,hexo g -d 半天推送不上去 记录一次hexo+coding hexo s本都没问题,hexo g -d 样式并未改变 ...
- java模拟页面表单登录
简单的通过表单的post请求提交到后台 package testpostlogin; import java.io.BufferedReader; import java.io.File; impor ...
- 04_Mybatis输入\出映射
1. 输入映射 通过paramterType指定输入参数的类型,类型可以是简单类型.hashmap.pojo的包装类. 1.1 传递pojo的包装对象 1.需求 完成用户信息的综合查询,需要传 ...
- POJ 3304 /// 判断线段与直线是否相交
题目大意: 询问给定n条线段 是否存在一条直线使得所有线段在直线上的投影存在公共点 这个问题可以转化为 是否存在一条直线与所有的线段同时相交 而枚举直线的问题 因为若存在符合要求的直线 那么必存在穿过 ...