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 ...
随机推荐
- 【转】C++ 异常机制分析
阅读目录 C++异常机制概述 throw 关键字 异常对象 catch 关键字 栈展开.RAII 异常机制与构造函数 异常机制与析构函数 noexcept修饰符与noexcept操作符 异常处理的性能 ...
- for循环的嵌套之打印倒三角的星星
var str = ''; for(var i = 1; i<=10;i++) { for(var j = i; j<=10;j++) { str = str + '★' ; { str ...
- Unix/Linux系统下的nobody用户是什么?
1.Windows系统在安装后会自动建立一些用户帐户,在Linux系统中同样有一些用户帐户是在系统安装后就有的,就像Windows系统中的内置帐户一样. 2.它们是用来完成特定任务的,比如nobody ...
- Spring Boot进阶系列三
Thymeleaf是官方推荐的显示引擎,这篇文章主要介绍怎么让spring boot整合Thymeleaf. 它是一个适用于Web和独立环境的现代服务器端Java模板引擎. Thymeleaf的主要 ...
- leetcode 763. 划分字母区间
题目描述: 字符串 S 由小写字母组成.我们要把这个字符串划分为尽可能多的片段,同一个字母只会出现在其中的一个片段.返回一个表示每个字符串片段的长度的列表. 示例 1: 输入: S = "a ...
- asp.net core api 跨域配置
项目前后端分离,前端请求接口例如使用axios发送请求时浏览器会提示跨域错误,需要后端配置允许接口跨域 配置步骤: 1.通过NuGet安装Microsoft.AspNetCore.Cors.dll类库 ...
- Hadoop vs Elasticsearch – Which one is More Useful
Hadoop vs Elasticsearch – Which one is More Useful Difference Between Hadoop and Elasticsearch H ...
- SpringMvc通过controller上传文件代码示例
上传文件这个功能用的比较多,不难,但是每次写都很别扭.记录在此,以备以后copy用. package com.**.**.**.web.api; import io.swagger.annotatio ...
- Proxy代理对象是如何调用invoke()方法的.
直奔主题,不说废话.先看java使用Proxy创建代理对象的代码. //一个开发者接口public interface Developer { String code(); void debug(); ...
- [原创]K8Cscan4.0之Base64/HEX密码批量加密解密插件以及源码
前言 今天抽空更新了Cscan,新增对C#编译的EXE动态调用,新增对PowerShell脚本动态调用(无论是否安装PowerShell) 增加一个字符串列表str.txt,用于存放任意字符串,比如帐 ...