CSS3实现0.5px边框
用CSS设置边框宽度为0.5px,可以使边框看起来更加细腻,特别是在移动端,设计师会有这样的要求。
但遗憾的是,大多数Android手机并不能识别0.5px。因此我们可以使用CSS3来变通的实现0.5px的边框需求。
.content{
position:relative;
}
.content:before{
content: '';
position: absolute;
width: 200%;
height: 1px;
bottom: 0;
border-bottom: 1px solid #d6e4ed;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scale(.5,.5);
transform: scale(.5,.5);
-webkit-box-sizing: border-box;
box-sizing: border-box
}
大致原理是:通过CSS3插入一个伪元素,该元素宽度为父级2倍,高度为1px,然后通过css3缩放将其缩小一倍,从未实现一个0.5px的边框。
CSS3实现0.5px边框的更多相关文章
- CSS3实现0.5px的边框
前端页面细节处理好了才会显得精致.边框在网页中是常见的一种样式了.虽然不把它处理为0.5px看上去没毛病,但是想让你做的东西征服更多的人,这些细节处理是必须的. 今天主要说一下如何让边框显示0.5px ...
- css写出0.5px边框(一)
在移动端会出现线条太粗的现象,简单来说,是因为手机端的像素单位和ui的图比例是2:1,所以ui图的1px边框对我们来说就是0.5px,但是浏览器渲染的最小单位就是1px,下面给几种方法用css写出0. ...
- 实现0.5px边框线
实现0.5px边框方法 方案一:利用渐变(原理:高度1px,背景渐变,一半有颜色,一半透明) CSS部分 .container { width: 500px; margin: 0px auto; } ...
- [转]retina屏下支持0.5px边框的情况
2014-12-31更新:截至到IOS8.1,safari仍不支持@supports待safari支持@supports, 就可以利用0.5px了! 2014-7-25更新:1. 修正dpr = 1. ...
- div背景透明内容不透明与0.5PX边框兼容设置
1.问题:设置 border-width:0.5px; 并兼容安卓和苹果移动端. 兼容:苹果IOS的 safari 支持浮点数边框,安卓浏览器不支持,会四舍五入到1px.不同浏览器效果额不同 解 ...
- 0.5px的边框
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 移动端页面0.5px border的实现
移动端上经常发现1px边框异常的粗,因此,决定用伪类配合css3来实现0.5px边框 代码如下: <!doctype html> <html lang="en"& ...
- 移动端 Retina屏border实现0.5px
首先来看一下造成Retina边框变粗的原因 其实这个原因很简单,因为css中的1px并不等于移动设备的1px,这些由于不同的手机有不同的像素密度.在window对象中有一个devicePixelRat ...
- 总结一下各种0.5px的线
在PC端用1px的边框线,看起来还好,但在手机端看起来就很难看了,而0.5px的分割线会有种精致的感觉.用普通写法border:solid 0.5px red;iPhone可以正常显示,android ...
随机推荐
- USACO Mooo Moo
洛谷 P2214 [USACO14MAR]哞哞哞Mooo Moo 洛谷传送门 JDOJ 2416: USACO 2014 Mar Silver 3.Mooo Moo JDOJ传送门 Descripti ...
- 关于DML的一些使用
DML是一种非常简单的标记语言,它帮助基于现有命令的输出发现和执行新命令.许多WinDbg命令(以及扩展命令)都支持DML.例如,下面是lm D命令,它显示DML输出: 在上面的命令输出中,当我单击“ ...
- 简要说明盒子模型和flex布局
盒子模型:可以看做是一个盒子,包括外边距.边框.内边距.实际内容. flex布局:弹性布局,灵活性好. 当给元素设置display:flex时,它就是flex容器,它的所有子元素自动成为容器成员,称为 ...
- Seminar Schedule
Seminar Schedule (C2017 | 2019.9-12 | 3rd semester S0500783) *************************************** ...
- 第08组 Beta冲刺(4/5)
队名:955 组长博客:点这里! 作业博客:点这里! 组员情况 组员1(组长):庄锡荣 过去两天完成了哪些任务 文字/口头描述 ? 测试新功能中 展示GitHub当日代码/文档签入记录 接下来的计划 ...
- c++功能与方法笔记
1. windows判断创建目录 #include <Shlwapi.h> #pragma comment(lib, "shlwapi.lib") //windows ...
- 作业15-JDBC数据库编程
参考资料 本次作业参考文件 MySQL操作视频 数据库相关jar文件请参考QQ群文件. 1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结与数据库相关内容. 2. 使用数据库技术改造 ...
- 《Linux就该这么学》培训笔记_ch19_使用PXE+Kickstart无人值守安装服务
<Linux就该这么学>培训笔记_ch19_使用PXE+Kickstart无人值守安装服务 文章最后会post上书本的笔记照片. 文章主要内容: 无人值守系统 部署相关服务程序 配置DHC ...
- 非mvn项目转为mvn项目并构建mvn私服
非mvn项目转为mvn项目并构建mvn私服 一.背景 公司里的系统是老系统,没有使用mvn,但是现在准备使用持续集成(CI),就要用到mvn,所以现在需要将老项目转为mvn项目,并且非mvn项目也是不 ...
- python数据分析4之自动采集数据
1 数据采集的重要性 数据采集是数据挖掘的基础,没有数据,挖掘也没有意义.很多时候,我们拥有多少数据源,多少数据量,以及数据质量如何,将决定我们挖掘产出的成果会怎样 2 四类采集方式 3 如何使用开放 ...