原理: css3 的缩放   ---->    transform: scale()

　　完整代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        div {

            height: 200px;

            width: 200px;

            margin: 50px auto;

            position: relative;

            /*background: #f4f4f4;*/

        }

        .box::after {

            content: '';

            position: absolute;

            left: ;

            top: ;

            width: %;

            height:%;

            border:1px solid #;

            -webkit-transform-origin:  ;

            transform-origin:  ;

            -webkit-transform: scale(., .);

            transform: scale(., .);

            -webkit-transform: scale(., .);

            -ms-transform: scale(., .);

            z-index: ;

        }

        .bd-t::after {

            content: "";

            position: absolute;

            top: ;

            left: ;

            width: %;

            border-top: 1px solid #;

            transform: scaleY(.);

            -webkit-transform: scaleY(.);

            -ms-transform: scaleY(.);

        }

        .bd-l::after {

            content: "";

            position: absolute;

            top: ;

            left: ;

            height: %;

            border-left: 1px solid #;

            transform: scaleX(.);

            -webkit-transform: scaleX(.);

            -ms-transform: scaleX(.);

        }

        .box1 {

            height: 200px;

            width: 200px;

            margin: 50px auto;

            position: relative;

            border: 1px solid #;

            /*background: #09f;*/

        }

    </style>

</head>

<body>

    <div class="box">

        四条边框0.5px

    </div>

    <div class="bd-t">

        顶部边框0.5px

    </div>

    <div class="bd-l">

        左边框0.5px

    </div>

    <div class="box1">参考相</div>

</body>

</html>

边框0.5px的实现方法的更多相关文章

  1. hairline！ios实现边框0.5px

    在2014WWDC上,Ted O’Connor提出了“retina hairlines”的解决方案,即在ratina屏幕上可以显示0.5px宽度的边框.他的方案是这样的: 1 Standard bor ...

  2. CSS3实现0.5px的边框

    前端页面细节处理好了才会显得精致.边框在网页中是常见的一种样式了.虽然不把它处理为0.5px看上去没毛病,但是想让你做的东西征服更多的人,这些细节处理是必须的. 今天主要说一下如何让边框显示0.5px ...

  3. css写出0.5px边框（一）

    在移动端会出现线条太粗的现象,简单来说,是因为手机端的像素单位和ui的图比例是2:1,所以ui图的1px边框对我们来说就是0.5px,但是浏览器渲染的最小单位就是1px,下面给几种方法用css写出0. ...

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

    2014-12-31更新:截至到IOS8.1,safari仍不支持@supports待safari支持@supports, 就可以利用0.5px了! 2014-7-25更新:1. 修正dpr = 1. ...

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

    1.问题:设置 border-width:0.5px;  并兼容安卓和苹果移动端.  兼容:苹果IOS的 safari 支持浮点数边框,安卓浏览器不支持,会四舍五入到1px.不同浏览器效果额不同  解 ...

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

    细线边框的具体实现方法有:伪元素缩放或渐变,box-shadow模拟,svg画线,border-image裁剪等.要实现小于1px的线条,有个先决条件:屏幕的分辨率要足够高,设备像素比要大于1,即cs ...

  7. 0.5px的实现的几种方法

    方法一 通过css3缩放 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  8. 实现0.5px边框线

    实现0.5px边框方法 方案一:利用渐变(原理:高度1px,背景渐变,一半有颜色,一半透明) CSS部分 .container { width: 500px; margin: 0px auto; } ...

  9. css3写出0.5px的边框

    一说到0.5px的边框,我们一般认为是不行的,因为在ps中0.5px的线也是做不出来的,这个计算机的像素有关系. 废话不多说了,0.5px 其实用的是css3新特性,box-shadow:阴影设置 代 ...

随机推荐

  1. PHP文件头BOM头问题

    前几天我们公司服务器出现了一个离奇的问题,服务器与本地文件代码完全一致,本地运行正常,到了测试环境服务器之后,各种问题一个又一个浮现,先是后台验证码不显示,以为是session写入失败,又是怀疑gd库 ...

  2. CodeForces-747B

    在两种情况下不能得到答案:1.n不是4的整数倍 2.某个字符的数量大于n/4 如果满足上述条件直接打印"===",否则填充数组. AC代码: #include<cstdio& ...

  3. AGC010 - A: Addition

    原题链接 题意简述 给出一个个数的数列,每次选出两个奇偶性相同的数合成一个数,问最终能否只剩下一个数. 分析 非常简单的一道题. 两个偶数可以合成一个偶数,两个奇数也能合成一个偶数.所以合并偶数时偶数 ...

  4. HDP2.0.6+hadoop2.2.0+eclipse（windows和linux下）调试环境搭建

    花了好几天,搭建好windows和linux下连接HDP集群的调试环境,在此记录一下 hadoop2.2.0的版本比hadoop0.x和hadoop1.x结构变化很大,没有eclipse-hadoop ...

  5. JavaScript中基本数据类型和引用数据类型的区别

    1.基本数据类型和引用数据类型 ECMAScript包括两个不同类型的值:基本数据类型和引用数据类型. 基本数据类型指的是简单的数据段,引用数据类型指的是有多个值构成的对象. 当我们把变量赋值给一个变 ...

  6. Jmeter MD5插件

    实际业务中,会要求 HTTP 协议中附加 MD5 校验字段, 防止请求参数被恶意篡改, 对于开发同学来说, 这是个很简单的需求. 但是给自动化测试增加了难度, Jmeter 原生不支持这个功能,应测试 ...

  7. python介绍篇

    二进制编码ASSIC 每一个字符统一都需要8个bit来存储 计算机容量 1位 = 1bit 8bit = 1byte = 1字节 1024bytes = 1kbytes =1KB 1024个字符,小文 ...

  8. linux zabbix监控服务器搭建

    搭建Zabbix监控服务器 准备运行环境(lamp) [root@zhuji1 ~]# yum -y install httpd [root@zhuji1 ~]# yum -y install php ...

  9. html、text、val、attr、prop区别。this.value和$(this).val()区别以及return用法

    html(): html() 方法返回或设置被选元素的内容 (inner HTML). 当使用该方法读取多个值时,它会返回第一个匹配元素的内容. 当使用该方法设置一个值时,它会覆盖所有匹配元素的内容. ...

  10. C++的AES加解密

    最近公司项目要做个WPF程序,但是底层加密部分要用C++来实现.通过网上搜索各种资料,地址已经记不下了,没发贴出来了! 下面看看如何加解密的~!先贴代码.... string tKey(sKey); ...