首页 > 代码库 > 实现 1像素border
实现 1像素border
border-1px($color) position: relative &:after display: block position: absolute left: 0 bottom: 0 width: 100% border-top: 1px solid $color content: ‘ ‘ border-none() &:after display: none
使用时首先
1
|
@import "../../common/stylus/mixin.styl" ; |
为匹配不同设备,定义基本样式
@media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5) .border-1px &::after -webkit-transform: scaleY(0.7) transform: scaleY(0.7) @media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2) .border-1px &::after -webkit-transform: scaleY(0.5) transform: scaleY(0.5)
转自:http://www.cnblogs.com/jiangyangchang/p/6530385.html
注: 先定义一个 mixin (mixin 是 css 预处理器提供的一个方法,它可以通过定义一个函数,比如 border-1px($color),在其中定义的css代码,可以在其他css中直接通过调用函数来引用)
通过对伪类的缩放,来实现在不同屏幕下的1px 效果。
为了方便引用,
实现 1像素border
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。