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= ...
随机推荐
- Java 仓储模式
使用的Spring boot +Jpa 项目层级: common里包含了model,以及一些viewModel等等 下面就是设计的仓储模式 先看下SysUser: @MappedSuperclass ...
- CF886F Symmetric Projections
题意:给你平面上n个点,问有多少条过原点的直线,使得这些点在该直线上的投影(做垂直,对应点)形成对称图形?n<=2000. 标程: #include<bits/stdc++.h> # ...
- Altera FPGA– Bit Slip
通过在接收端加延时,在延时间隙插入'0'或'1',以使最终接收和期望数据一致. BitSlip操作要注意几点: 1,BitSlip操作在rx_bitslip的上升沿即开始: 2,BitSlip操作开始 ...
- cookie的设置与销毁
<?php /* 2个参数设置cookie cookie随着浏览器的关闭,就失效了 ); /* 下面我们让cookir多活一会 3个参数来设置cookie,第3个参数指的就是cookie的声明周 ...
- 函数开始处的MOV EDI, EDI的作用
调试程序调试到系统库函数的代码时,总会发现系统函数都是从一条MOV EDI, EDI指令开始的,紧接着这条指令下面才是标准的建立函数局部栈的代码.对系统DLL比如ntdll.dll进行反汇编,可以发现 ...
- JS switch 分支语句
描述:根据一个变量的不同取值,来执行不同的代码. 语法结构: switch(变量) { case 值1: 代码1; break; case 值2: 代码2; break; case 值3: 代码3; ...
- Java核心-01 谈谈你对Java平台的理解
今天我要问你的问题是,谈谈你对 Java 平台的理解?“Java 是解释执行”,这句话正确吗? 典型回答 Java本身是一种面向对象的语言,最显著的特性有两个.一是所谓的“书写一次,到处运行”,能够非 ...
- 使用CEfSharp之旅(7)CEFSharp 拦截 http 请求 websocket 内容
原文:使用CEfSharp之旅(7)CEFSharp 拦截 http 请求 websocket 内容 版权声明:本文为博主原创文章,未经博主允许不得转载.可点击关注博主 ,不明白的进群19106581 ...
- ps photoshop
PS-前端切图教程(切jpg图和切png图) 参考线显示和隐藏:ctrol+h alt+v+e或者打开标尺然后从点击标尺就能拖拽出来,删除也是拖到标尺附近就删除 显示.隐藏标尺:ctrol+R 显示网 ...
- iOS逆向系列-Cycript
概述 Cycript 是Objective-C++.ES(JavaScript).Java等语法的混合物. 可以用来探索.修改.调试正在运行的Mac\iOS App. 通过Cydia安装Cycript ...