Frozen UI中提取的半像素边框

    <style>
       .pxc
	   {
         <!-- border-top: 1px solid #e0e0e0; -->
         background-position: left top;
         background-image:linear-gradient(to top, transparent 0%,transparent 50%,#e0e0e0 50%,#e0e0e0 100%);
	 background-image: -ms-linear-gradient(bottom, transparent 0%,transparent 50%,  #e0e0e0 50%, #e0e0e0 50%);
	 background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.5, transparent), color-stop(0.5, #e0e0e0), to(#e0e0e0));
	 background-repeat: repeat-x;
         -webkit-background-size: 100% 1px;
	  background-size: 100% 1px;
	    }
       </style> 

用腾讯的Frozen UI最大的感悟就是它的半像素,原理就是通过渐变把1像素的下面部分弄成透明,因此只要把各个浏览器的渐变css写上去就可以实现兼容

时间: 2024-08-05 15:35:42

Frozen UI中提取的半像素边框的相关文章

移动端半像素 0.5PX 边框实现。

1 /*半像素*/ 2 .halfpxline_after, .halfpxline_before { 3 position: relative; 4 } 5 6 .halfpxline_after:after, .halfpxline_before:before { 7 content: ''; 8 display: block; 9 position: absolute; 10 left: 0; 11 right: 0; 12 height: 1px; 13 background-color

移动端1像素边框问题与CSS媒体查询

做移动端页面开发时,我们是按照UI设计图上的尺寸来做的. 比如说,UI给的图是750x1344(Iphone6标准),我们在浏览器做适配时,按照375x667来裁切,设计图上30像素的高度,开发时使用的是15px,这是因为Iphone6的设备像素比为2,css中的1px在设备中的像素为2px.当我们需要实现设计图中1px高度的边框时,在css中的1px实际上变成了2px边框,由此产生了1像素边框问题. 1.window.devicePixelRatio设备像素比 定义: window.devic

在HTML中如何把块的边框做成圆角

adius,就是半径的意思.用这个属性可以很容易做出圆角效果,当然,也可以做出圆形效果.原理很简单,“正方形的内切圆的半径等于正方形边长的一半”.下面就做一个红色的圆. 工具/原料 Adobe Dreamweave 软件 方法/步骤 语法: border-radius : none | <length>{1,4} [ / <length>{1,4} ]? 相关属性: border-top-right-radius , border-bottom-right-radius , bor

如何使用JMETER从JSON响应中提取数据

如果你在这里,可能是因为你需要使用JMeter从Json响应中提取变量. 好消息!您正在掌握掌握JMeter Json Extractor的权威指南.作为Rest API测试指南的补充,您将学习掌握Json Path Expressions所需的一切. 我们走吧!并且不要惊慌,那里没有什么困难. Json格式 为了更好地理解Json是什么,这是一个示例Json文档: { "store": { "book": [ { "category": &qu

移动端,h5页面1px 1像素边框过粗解决方案

//h5有个小bug 1像素边框过粗,其实有个解决方案,就是利用伪元素:after,结合css3中的scale在y轴方向缩放0.5就行了 //父元素 //删除border-bottom,添加position:relative,伪元素定位用. - border-bottom:1px solid yellow: + position:relative; //为父元素添加:after伪类 :after { content: ''; height: 1rpx; background: $colorE3;

移动web 1像素边框 瞧瞧大公司是怎么做的

前言 移动端web项目越来越多,要求也越来越高,好多设计师都发现了,你们前端实现的边线为什么是糊的,根本不是1像素,好吧,我只能找参考,要么征服设计,要么征服自己. 关于为什么设置的是1px,而显示出来却不是呢,这里我就不多做介绍了:放出几个链接, 设备像素比devicePixelRatio简单介绍,还有 移动端高清.多屏适配方案 以及 iPhone 6 屏幕揭秘,相信大家看完这几个自己也就能想出解决的办法了. 哪些项目实现了 一般遇到问题,都是找一下成熟项目他们公司的代码看看,自己也翻看了好多

从Wireshark监听的数据中提取需要的数据

最近,需要将wireshark监听的数据进行提取,分两步:首先,应该得出wireshark的数据包吧,在图形化界面中可以非常直观的将监听数据进行存储,但是这样需要手动操作非常麻烦,而且容易出错(随着处理数据包的数量增加,图形化可能吃不消,以前就遇见过),在linux下,采用了tshark命令,tshark就是wireshark图形界面命令行化,命令如下: sudo tshark -f "udp port 1243" -i eth0 (-w)> /tmp/capture.cap 对

调整Win7中TCP/IP半开连接数限制

调整Win7中TCP/IP半开连接数限制 相信大家都有过这样的经历,普通的ADSL宽带下,打开下载工具下载资源时,再想浏览网页就会变得非常困难了,Windows7中也未能幸免. 究其原因,一方面是某些下载软件在下载时为了追求速度会不惜占用全部带宽,另一方面也是由于微软出于安全考虑,限制了系统中的TCP/IP半开连接数. 而去除限制的方法也很简单: * WIN R运行regedit * 找到 HKEY_LOCAL_MACHINESYSTEM\CurrentControlSet\Services\T

1像素边框

1像素边框用2px来渲染,所以有这么个方法: .a{        width: 100px;        height: 100px;        border-top: 1px solid #333;        position: relative;    }.a:after{        content: "";        position: absolute;        bottom: 0px;        width: 100%;        borde