深圳网站开发工程师,虾米音乐 wordpress,静态网页设计素材,手机网站支持微信支付吗文章目录 前言使用伪类和transform使用border-image使用box-shadow使用媒体查询及scale使用viewport单位使用图片或SVG后言 前言 hello world欢迎来到前端的新世界 #x1f61c;当前文章系列专栏#xff1a;前端系列文章 #x1f431;#x1f453;博主在前端领域还有很多… 文章目录 前言使用伪类和transform使用border-image使用box-shadow使用媒体查询及scale使用viewport单位使用图片或SVG后言 前言 hello world欢迎来到前端的新世界 当前文章系列专栏前端系列文章 博主在前端领域还有很多知识和技术需要掌握正在不断努力填补技术短板。(如果出现错误感谢大家指出) 感谢大家支持您的观看就是作者创作的动力 使用伪类和transform
.hairline {position: relative;
}
.hairline::after {content: ;position: absolute;left: 0;bottom: 0;width: 100%;border-bottom: 1px solid #000;transform: scaleY(0.5);
}
使用border-image 使用border-image属性来创建一个渐变的边框效果从而可以实现1像素的边框线条。 /* CSS样式 */
.border-1px {border-width: 1px;border-style: solid;border-image: linear-gradient(to right, #000 0%, #000 100%);
}
使用box-shadow 通过设置box-shadow属性的模糊半径为0可以实现一个1像素的阴影效果从而达到1像素边框的视觉效果。 /* CSS样式 */
.shadow-1px {box-shadow: 0 0 0 1px #000;
}
使用媒体查询及scale 通过结合媒体查询以及CSS3的transform: scaleY属性可以根据设备像素比例对1px元素进行缩放以便在高清屏幕上显示清晰的1像素线条。 /* CSS样式 */
media only screen and (-webkit-min-device-pixel-ratio: 2) {.scale-1px {position: relative;}.scale-1px::after {content: ;position: absolute;left: 0;bottom: 0;width: 100%;height: 1px;background: #000;transform: scaleY(0.5);}
}
使用viewport单位 可以使用vw视窗宽度的百分比或vh视窗高度的百分比单位来代替像素单位在一定程度上解决高清屏幕下1px显示模糊的问题。 使用图片或SVG 对于边框或分隔线等特别细的元素可以考虑使用图片或SVG来代替纯CSS的绘制。 后言 创作不易要是本文章对广大读者有那么一点点帮助 不妨三连支持一下您的鼓励就是博主创作的动力
