css 温故而知新 1px的问题
解决方法1:
//border
@mixin border($pos, $color) {
content: "";
position: absolute;
transform-origin: 0 0;
-webkit-transform-origin: 0 0;
@if $pos=='top'{
#{$pos}: 0px;
left: 0px;
right: 0px;
border-#{$pos}: 1px solid $color;
transform: scaleY(.5);
-webkit-transform: scaleY(.5);
} @else if $pos=='bottom' {
#{$pos}: 0px;
left: 0px;
right: 0px;
border-#{$pos}: 1px solid $color;
transform: scaleY(.5);
-webkit-transform: scaleY(.5);
} @else {
top: 0px;
bottom: 0px;
#{$pos}: 0px;
border-#{$pos}: 1px solid $color;
transform: scaleX(.5);
-webkit-transform: scaleX(.5);
}
}
使用方式:
.div {
position:relative; &:after {
@include border("bottom", #d9d9d9)
left: pxToRem(30px); /* 美化,不喜欢可以不加 */
}
}
解决方式2:
.border { border: 1px solid #999 }
@media screen and (-webkit-min-device-pixel-ratio: 2) {
.border { border: 0.5px solid #999 }
}
@media screen and (-webkit-min-device-pixel-ratio: 3) {
.border { border: 0.333333px solid #999 }
}
css 温故而知新 1px的问题的更多相关文章
- css实现1px 像素线条_解决移动端1px线条的显示方式
使用CSS 绘制出 1px 的边框,在移动端上渲染的效果会出现不同,部分手机发现1px 线条变胖了,这篇文章整理2种方式实现1px 像素线条. 1.利用box-shadow + transform & ...
- css 温故而知新 slideDown/slideUp 新思路
默认设置高度为0; -webkit-transition:.3s all ease;transition:.3s all ease;opacity:0;height:0; 需要时添加高度即可 heig ...
- css 温故而知新 字体方向 将文字竖着显示
writing-mode: vertical-rl;
- CSS 温故而知新
如何让文字垂直居中 需要设置div的height,line-height 为一样的值,如下所示: <div class="ui-bar ui-bar-e" style=&qu ...
- CSS 温故而知新 background常用属性
1.background-repeat 不用说,常用直接no-repeat 2.background-size 常用的分为两个,一个是铺满:cover, 另一个是使图像适应宽高:contain 3.b ...
- CSS 温故而知新 断句失败
设置了一定的宽度和高度.但无论是下面哪句都无效. word-break: break-word; word-wrap: break-word; 原因竟然是因为 /* white-space: nowr ...
- css 温故而知新 select-option 文字方向居右
对select-option使用text-align:right;是无效的. 正确的姿势是:direction: ltr; 另外值得一提的是,通常还需要配合一点padding来美化.
- css中的1px并不总等于设备的1px(高分辨率不等 低分辨等)
在css中我们一般使用px作为单位,在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像素,这可能会造成我们的一个错觉,那就是css中的像素就是设备的物理像素.但实际情况却并非如此,css ...
- Retina屏实现1px边框
问题描述 通常我们实现边框的方法都是设置1px的边框,但是在retina屏上因为设备像素比的不同,边框在移动设备上的表现也不相同,例如在devicePixelRatio = 2的retina屏下会显示 ...
随机推荐
- [BZOJ3211]花神游历各国&&[BZOJ3038] 上帝造题的七分钟2 树状数组+并查集
3211: 花神游历各国 Time Limit: 5 Sec Memory Limit: 128 MBSubmit: 4057 Solved: 1480[Submit][Status][Discu ...
- js百度地图-简单的1个坐标点
要学习百度地图,最好的地方就是去看百度地图API: 案例: <!DOCTYPE html> <html> <head> <meta http-equiv=&q ...
- 51nod 1091 线段的重叠【贪心/区间覆盖类】
1091 线段的重叠 基准时间限制:1 秒 空间限制:131072 KB 分值: 5 难度:1级算法题 收藏 关注 X轴上有N条线段,每条线段包括1个起点和终点.线段的重叠是这样来算的,[10 2 ...
- [TopCoder8600]MagicFingerprint
题目大意: 定义magic(x)为将x按十进制顺序写下来,依次对相邻两个数写下差的绝对值,并去除前导0得到的新数. 若对得到的magic(x)重复进行多次magic,最后会变成一个一位数. 若最后变成 ...
- 【背包DP】【OpenJudge4978】宠物小精灵之收服
宠物小精灵之收服 总时间限制: 1000ms 内存限制: 65536kB [描述] 宠物小精灵是一部讲述小智和他的搭档皮卡丘一起冒险的故事. 一天,小智和皮卡丘来到了小精灵狩猎场,里面有很多珍贵的野生 ...
- iOS 耳机线控
当你使用iphone的时候听音乐的时候,播放器在后台运行的时候,你仍然可以通过耳机来进行操作,完成曲目切换,快进,快退等功能!当然你的程序不一定是播放器应用,但是我们仍然可以让它具有这个功能,让用户通 ...
- 【转】Kriging插值法
einyboy 原文LINK Kriging插值法 克里金法是通过一组具有 z 值的分散点生成估计表面的高级地统计过程.与插值工具集中的其他插值方法不同,选择用于生成输出表面的最佳估算方法之前,有效使 ...
- cocurrent包countdownlatch 倒计时门栓
latch 英[lætʃ]美[lætʃ]n. 门闩; 弹簧锁; 锁是每个类的成员变量,它是这个类的固有属性,当然要声明为成员变量. 成员变量的初始化是通过对象的构造函数的. 锁是每个类的成员变量,它是 ...
- hdu4099 Revenge of Fibonacci
题意:给定fibonacci数列,输入前缀,求出下标.题目中fibonacci数量达到100000,而题目输入的前缀顶多为40位数字,这说明我们只需要精确计算fibinacci数前40位即可.查询时使 ...
- java读取properties文件,并在配置文件中设置默认浏览器驱动
java中的properties文件是一种配置文件,主要用于表达配置信息,文件类型为*.properties,格式为文本文件,文件的内容是格式是"键=值"的格式,在properti ...