css3 实现版像素边框
2016-05-19 11:07
573 查看
一.思路
普通的1px黑色实线边框:border: 1px solid #000;
半像素边框当然不是简单地把1px改为0.5px(没测试过,可能会被解析成1或者0),border-width的值只能是自然数
类似的,outline, box-shadow等等也没有办法画出0.5px的细线
常规思路是不可行的,我们可以用伪元素 + 缩放巧妙地实现,具体步骤如下:
设置目标元素作为定位参照
.thinner-border {position: relative; /* 只要不是默认值static即可 */}
给目标元素添加一个伪元素before或者after,并设置绝对定位
.thinner-border:before {content: '';position: absolute;}
给伪元素添上1px的边框
border: 1px solid red;
设置伪元素的宽高为目标元素的2倍
width: 200%;height: 200%;
缩小0.5倍(变回目标元素的大小)
transform-origin: 0 0;transform: scale(0.5, 0.5);
把border包进来
box-sizing: border-box;
简言之就是先放大再缩回来,border-box是关键,否则边框不会一起缩放
二.具体实现
上面已经分步骤写得很清楚了,拼在一起就是完整实现:.thinner-border {
position: relative;
}
.thinner-border:before{
content: '';
position: absolute;
width: 200%;
height: 200%;
border: 1px solid #000;
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scale(0.5, 0.5);
-ms-transform: scale(0.5, 0.5);
-o-transform: scale(0.5, 0.5);
transform: scale(0.5, 0.5);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
功能是给class值指定了thinner-border的block和inline-block元素添上半像素的边框,因为inline元素的width和height有一些限制,伪元素获取到的200%要比实际值小,边框的宽高也会比期望的小
三.Demo
1像素边框,block半像素边框,block
1像素边框,inline半像素边框,inline-block
半像素边框,inline,边框太窄
1/4像素边框
边框效果用移动浏览器看更明显,变化的是线宽而不是颜色
注意:虽然理论上边框可以任意细(1/n px),但由于存在精度的问题(精度影响边框的宽高),所以半像素边框是最有实用意义的,虽然也存在问题:如果宽高是奇数则边框位置会偏移0.5px,实际应用中尚可接受
相关文章推荐
- 【转载】CSS3 filter:drop-shadow滤镜与box-shadow区别应用
- JS、CSS以及img对DOMContentLoaded事件的影响
- CSS3文本溢出显示省略号
- CSS笔记---文字两边对齐
- CSS3实现DIV圆角完整代码
- css相关
- CSS3中的动画效果
- CSS Sprite
- css的简介
- 初探CSS与html格式
- IE6,IE7,FF | CSS + DIV 兼容问题综合解决方案
- 背景半透明CSS兼容设置
- css+div教程
- 用js触发CSS3-transition过渡动画
- CSS3基础
- CSS文本属性
- CSS中的字体背景和盒子模型
- css样式汇总(转载)
- CSS应用:径向渐变
- CSS清除浮动