New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
使用border-image实现类似iOS7的1px底边 #4
Labels
Comments
使用图片当更改颜色的时候,显得不灵活了。 |
颜色会发虚,并且无法支持3倍分辨率啊 |
还好没遇到这么变态的需求过。 |
发现一个1px边框生成器,http://retinahairlinegenerator.com/ |
= =.膜拜。。你好能折腾。。 |
这个好咯 |
怎么我这还是一样,没啥变化呢? |
OSX10.10和iOS8.0支持半像素了 @media (-webkit-min-device-pixel-ratio: 2) {
.one-pixel-border {
border-width: 0.5px;
}
} |
我表示遇到过 |
使用伪类+缩放完美实现1px 预览效果 |
Closed
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
使用border-image实现类似iOS7的1px底边
iOS7已经发布有一段时间,扁平化设计风格有很多值得称赞的地方,其中有很多设计细节都是值得研究的。
首先,来看下面iOS设置的截图中的border:
从上面的截图可以看到iOS7的设计是非常精细的,border是一根非常细的线。这篇文章将说明如何使用border-image实现iOS7的border效果。
在看下面的内容之前,需要先了解devicePixelRatio和border-image,不熟悉的同学请自行脑补:
border
属性实现效果我们在实现border时通常都是使用
border
属性,如下:显示效果对比:
上面这张图片可以看到,在手机上
border
无法达到我们想要的效果。这是因为devicePixelRatio特性导致,iPhone的devicePixelRatio==2,而border-width: 1px
描述的是设备独立像素,所以,border被放大到物理像素2px显示,在iPhone上就显得较粗。使用
border-image
属性实现物理1px通常手机端的页面设计稿都是放大一倍的,如:为适应iphone retina,设计稿会设计成640*960的分辨率,图片按照2倍大小切出来,在手机端看着就不会虚化,非常清晰。
同样,在使用
border-image
时,将border设计为物理1px,如下:样式设置:
显示效果对比:
这里在手机上的效果和iOS7已经非常接近了。
样例:http://maxzhang.github.com/examples/border1px/index.html
Note: border.png也可以直接使用的base64替代
结束语
博客迁移到GitHub的第一篇文章,Hello GitHub!
The text was updated successfully, but these errors were encountered: