原理: 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. Egret学习笔记 (Egret打飞机-9.子弹对敌机和主角的碰撞)

    运行起来,虽然主角飞机和敌机都在互相发射子弹,但是子弹打中了就和没打中效果是一样的.. 这一章我们就来处理子弹和飞机的碰撞问题. 我们所有的操作都是基于Main这个容器来做的.所以我就把这个处理放到M ...

  2. git一键部署代码到远程服务器（linux）（采坑总结）

    原来一直使用FileZilla来代码部署,去年使用git,代码版本管理,真TM好用,一起回顾下历程! 一. 代码部署方式及思路: 1. 使用FTP/SFTP工具,上传代码 2. git人工部署.1. ...

  3. qt 字符数组如何转换字符串？

    char 字符数组如何转换成 QString? char source{1024} = {0}; QString des = QString::fromLocal8Bit(source);

  4. uva10003 区间DP

    很清晰的区间dp问题.d(i,j)表示断点i到断点j的最小费用,由于开头和结尾也是断点,所以应该加入断点数组,即 cut[0]=0; cut[n+1]=len; 边界就是d(i,i+1)=0; 转移方 ...

  5. HDU - 2112 HDU Today Dijkstra

    注意: 1.去重边 2.终点和起点一样,应当输出0 3.是无向图 AC代码 #include <cstdio> #include <cmath> #include <al ...

  6. Raft论文学习笔记

    先附上论文链接  https://pdos.csail.mit.edu/6.824/papers/raft-extended.pdf 最近在自学MIT的6.824分布式课程,找到两个比较好的githu ...

  7. 03 Spring的父子容器

    1.概念理解和知识铺垫 在Spring整体框架的核心概念中,容器是核心思想,就是用来管理Bean的整个生命周期的,而在一个项目中,容器不一定只有一个,Spring中可以包括多个容器,而且容器有上下层关 ...

  8. Five nines

    Five nines, commonly taken to mean "99.999%", may refer to: 高可用  High availability of serv ...

  9. Wireshark理解TCP乱序重组和HTTP解析渲染

    TCP数据传输过程 TCP乱序重组原理 HTTP解析渲染 TCP乱序重组 TCP具有乱序重组的功能.(1)TCP具有缓冲区(2)TCP报文具有序列号所以,对于你说的问题,一种常见的处理方式是:TCP会 ...

  10. 转 Caffe学习系列(12)：训练和测试自己的图片

    学习caffe的目的,不是简单的做几个练习,最终还是要用到自己的实际项目或科研中.因此,本文介绍一下,从自己的原始图片到lmdb数据,再到训练和测试模型的整个流程. 一.准备数据 有条件的同学,可以去 ...