摘要:本篇教程介绍了HTML+CSS入门 CSS 0.5px细线边框详解,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门。
本篇教程介绍了HTML+CSS入门 CSS 0.5px细线边框详解,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门。
<
细线边框的具体实现方法有:伪元素缩放或渐变,box-shadow模拟,svg画线,border-image裁剪等。要实现小于1px的线条,有个先决条件:屏幕的分辨率要足够高,设备像素比要大于1,即css中的1个像素对应物理屏幕中1个以上的像素点。
对于普通电脑,屏幕物理像素和css像素一一对应,显示的最小单位就是1px。而现在的手机,屏幕物理宽度一般都大于页面显示宽度。例如苹果6s的屏幕分辨率为1334x750像素,但是以375px的宽度显示页面,设备像素比就是750/375=2;此时在css中定义0.5px的宽度,实际上对应物理屏幕的1个像素点,这就是border小于1px的的实现基础。
<!-- @media鉴别设备像素比 -->
<style>
@media only screen and (-webkit-min-device-pixel-ratio: 2){
.fineLine{
-webkit-transform: scaleY(.5);
}
}
</style>
<!-- js获取设备像素比 -->
<script type="text/javascript">
var dpr = window.devicePixelRatio;
// 如下方法精确计算出了物理设备与css的像素比dppx。但实际使用中dpr更广泛,也足以满足一般需求
var dppx = window.screen.width/(window.innerWidth || document.documentElement.clientWidth);
</script>
一、缩放biefore/after伪元素
伪元素进行绝对定位,通过border或者background着色,适合画单线条:
<div class="fineLine"></div>
<style type="text/css">
.fineLine {
position: relative;
}
.fineLine:before,.fineLine:after{
position: absolute;
content: " ";
height: 1px;
width: 100%;
left: 0;
transform-origin: 0 0;
-webkit-transform-origin: 0 0;
}
.fineLine:before {
top: 0;
background: #000;
}
.fineLine:after {
bottom: 0;
border-bottom: 1px solid #000;
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
.fineLine {
-webkit-transform: scaleY(.667);
}
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
.fineLine {
-webkit-transform: scaleY(.5);
}
}
</style>
二、box-shadow模拟
box-shaodw适合模拟box四周都需要细线border的情况,而且支持border-radius。此例中演示的是dppx鉴别:
<div class="fineLine"></div>
<style type="text/css">
.fineLine {
box-shadow: 0 0 0 1px;
}
@media (min-resolution: 2dppx) {
.fineLine {
box-shadow: 0 0 0 0.5px;
}
}
@media (min-resolution: 3dppx) {
.fineLine {
box-shadow: 0 0 0 0.33333333px;
}
}
</style>
本文由职坐标整理发布,欢迎关注职坐标WEB前端HTML/CSS频道,获取更多HTML/CSS知识!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号