css3 做border = 0.5px的细线

移动端安卓手机不能识别border 0.5px解决方案

由于安卓手机无法识别border 0.5px,因此我们要用0.5px的话必须要借助css3中的-webkit-transform:scale缩放来实现, 原理:将伪元素的宽设为200%,height设为1px通过-webkit-transform:scale(.5)来进行缩小一倍,这样就得到border为0.5的边框, 案例: .ce{ position: relative; } .ce:after{ content: ""; display: block; position: abs…

css3写出0.5px的边框

一说到0.5px的边框,我们一般认为是不行的,因为在ps中0.5px的线也是做不出来的,这个计算机的像素有关系. 废话不多说了,0.5px 其实用的是css3新特性,box-shadow:阴影设置代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div sty…

CSS3实现0.5px的边框

前端页面细节处理好了才会显得精致.边框在网页中是常见的一种样式了.虽然不把它处理为0.5px看上去没毛病,但是想让你做的东西征服更多的人,这些细节处理是必须的. 今天主要说一下如何让边框显示0.5px的方法: 方法一:利用渐变关于渐变可以看下面两篇文章做深入了解: CSS3 渐变(Gradients) 深入理解CSS3 gradient斜向线性渐变实现原理: 把元素的伪类高度设为1px,背景渐变,一半有颜色,一半透明. 线上案例:百度糯米(没有改版的话) 代码如下: <!DOCTYP…

移动端页面0.5px border的实现

移动端上经常发现1px边框异常的粗,因此,决定用伪类配合css3来实现0.5px边框代码如下: <!doctype html> <html lang="en"> <head> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"> <m…

0.5px的实现的几种方法

方法一通过css3缩放 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0,user-scalable=no"> <meta name="apple-…

android上实现0.5px线条

转: android上实现0.5px线条由于安卓手机无法识别border: 0.5px,因此我们要用0.5px的话必须要借助css3中的-webkit-transform:scale缩放来实现. 原理:将伪元素的宽设为200%,height设为1px通过-webkit-transform:scale(.5)来进行缩小一倍,这样就得到border为0.5的边框 Document .div { width: 100%; height: 100px; border-top: 1px solid rg…

css给div添加0.5px的边框

具体代码实现如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>border</title> <style> div{ position: relative; width: 100%; background-color: #ccc; } div:before{ content: "…

移动端 Retina屏border实现0.5px

首先来看一下造成Retina边框变粗的原因其实这个原因很简单,因为css中的1px并不等于移动设备的1px,这些由于不同的手机有不同的像素密度.在window对象中有一个devicePixelRatio属性,他可以反应css中的像素与设备的像素比. devicePixelRatio的官方的定义为:设备物理像素和设备独立像素的比例,也就是 devicePixelRatio = 物理像素 / 独立像素. 解决边框变粗的办法 1.0.5px边框在2014年的 WWDC,“设计响应的Web体验” 一…

CSS 0.5px 细线边框的原理和实现方式

细线边框的具体实现方法有:伪元素缩放或渐变,box-shadow模拟,svg画线,border-image裁剪等.要实现小于1px的线条,有个先决条件:屏幕的分辨率要足够高,设备像素比要大于1,即css中的1个像素对应物理屏幕中1个以上的像素点. 对于普通电脑,屏幕物理像素和css像素一一对应,显示的最小单位就是1px.而现在的手机,屏幕物理宽度一般都大于页面显示宽度.例如苹果6s的屏幕分辨率为1334x750像素,但是以375px的宽度显示页面,设备像素比就是750/375=2:此时在css中…

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 #d6…

【学】CSS3基础实例1 - 用CSS3做网页中的小三角，以及transition的用法

自开了博客园已经有2周了吧,虽然转载了一些觉得比较有用的文章之外还没有开始写自己的一些学习记录,那就从今天开始. 目前看了妙味的不少视频,有css+html,js的基础和中级也都看完了,作业也都做了,css3的部分也看过了,但是觉得讲得不太好,全部都是点到为止.无意中找到了传智播客的视频讲了一些css3的小技巧,今天就写一下用CSS3做网页中的小三角. 大致网上关于小三角的做法无非三种: 直接用背景图片,这个没什么好说的: 用块元素设置宽高都为0,三角的高用一条边框宽度,其他三条边框用dashe…

利用HTML5 与CSS3 做的放大镜

利用HTML5 与CSS3 做的放大镜 html结构 <div class="wrap"> <div class="move"> <ul class="pic"> <li><img src="img/iBannerText.png" /></li> <li><img src="img/iBannerText2.png"…

css 0.5px

1. 利用css3新属性scale(好用推荐) 其实现的关键就是利用before或after伪元素,宽高同时设为200%,然后再缩放0.5,自然就是0.5px了代码如下: div { positon : relative; } div::after { content : ""; width : 200%; height : 200%; position : absolute; top :; left :; border : 1px solid #dedede; -webkit-tr…

如何实现border-width:0.5px;

工作中遇到了一个产品需求,要求把列表分割线改成0.5px,直接写成border:0.5px solid #cccccc;是不符合规范的写法,会存在Android和IOS手机上的兼容问题,故,我们可以利用CSS3的transform特性,放缩边框宽度来实现这一效果. HTML代码如下: <ul class="mBasicBorder_box"> <li class="mBasicBorder_scale_border">边框宽度0.5px<…

边框0.5px的实现方法

原理: css3 的缩放 ----> transform: scale() 完整代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div { height: 200px; width: 200px; margin: 5…

div背景透明内容不透明与0.5PX边框兼容设置

1.问题:设置 border-width:0.5px; 并兼容安卓和苹果移动端. 兼容:苹果IOS的 safari 支持浮点数边框,安卓浏览器不支持,会四舍五入到1px.不同浏览器效果额不同解决方案:设置2层嵌套的div,最外层的用来定位,保障我们设置的内容不会脱离原先的文档流. 里层设置两个div,一个用来书写内容,一个用来专门设置边框 HTML代码 :  <div class="po…

移动端的0.5px

最近写移动端页面写的比较多,边边基本上都是用的1px,视觉上也确实有点小粗,这不闲下来啦,具体的研究了下0.5px是怎么实现的,切记,这个效果只有在手机上才能看到效果的利用了css3的缩放效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>0.5px</title> </head> <…

怎么画一条0.5px的边

编者按:本文由人人网FED发表于掘金,并已授权奇舞周刊转载什么是像素? 像素是屏幕显示最小的单位,在一个1080p的屏幕上,它的像素数量是1920 1080,即横边有1920个像素,而竖边为1080个.一个像素就是一个单位色块,是由rgba四个通道混合而成.对于一个1200万像素的相机镜头来说,它有1200万个感光单元,它能输出的最大图片分辨率大约为3000 4000. 那么像素本身有大小吗,一个像素有多大? 有的,如果一个像素越小,那么在同样大小的屏幕上,需要的像素点就越多,像素就越密集,…

对0.5px的边的研究--------------引用

什么是像素? 像素是屏幕显示最小的单位,在一个1080p的屏幕上,它的像素数量是1920 1080,即横边有1920个像素,而竖边为1080个.一个像素就是一个单位色块,是由rgba四个通道混合而成.对于一个1200万像素的相机镜头来说,它有1200万个感光单元,它能输出的最大图片分辨率大约为3000 4000. 那么像素本身有大小吗,一个像素有多大? 有的,如果一个像素越小,那么在同样大小的屏幕上,需要的像素点就越多,像素就越密集,如果一英寸有435个像素,那么它的dpi/ppi就达到了435…

css写出0.5px边框（一）

在移动端会出现线条太粗的现象,简单来说,是因为手机端的像素单位和ui的图比例是2:1,所以ui图的1px边框对我们来说就是0.5px,但是浏览器渲染的最小单位就是1px,下面给几种方法用css写出0.5px边框1. html部分 <div class="border">测试0.5px边框</div>css部分.border{ position: relative; color: #555; font-size: 14px; line-height: 41px;…

[转]retina屏下支持0.5px边框的情况

2014-12-31更新:截至到IOS8.1,safari仍不支持@supports待safari支持@supports, 就可以利用0.5px了! 2014-7-25更新:1. 修正dpr = 1.5 机器下四角边框的缩放比例:2. 修正右边框(rBor)的transform-origin为100%, 100%;3. 添加对 dpr = 3 机器的支持: 通过以下机器验证:小米1(dpr = 1.5).SAMSUNG S3(dpr = 2).NEXUS 5(dpr =3) 测试地址: 移动we…

CSS3做小三角形

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAXgAAAA2CAIAAABC2hVZAAAgAElEQVR4nKzcd3cbV57web+1p20FW8…

hairline！ios实现边框0.5px

在2014WWDC上,Ted O’Connor提出了“retina hairlines”的解决方案,即在ratina屏幕上可以显示0.5px宽度的边框.他的方案是这样的: 1 Standard border syntax: 2 div{ 3 border:1px solid black; 4 } 5 Retina hairline border syntax: 6 @media(-webkit-min-device-pixel-ratio:2){ 7 div{ 8 border-width:0.…