原理: 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. 1.9 list 列表

    列表是什么? list是Python中的基本数据结构之一,属于可变序列,所以前文中讲的可变序列的通用操作都适用于list. 这一节讲列表的特性吧. 特性一: 列表是包含任意对象的有序集合,同一个列表中 ...

  2. Qt Creator 整合 python 解释器教程

    目录 1. 前言 2.前提条件 3.步骤 3.1 新建 python文件 3.2 编写 python 代码 3.3 配置 python 解释器 3.4 执行 python file 1. 前言 Pyt ...

  3. CentOS7网卡命名规则

    CentOS6之前基于传统的命名方式如:eth1,eth0.... Centos7提供了不同的命名规则,默认是基于固件.拓扑.位置信息来分配.这样做的优点是命名是全自动的.可预知的,缺点是比eth0. ...

  4. Oracle总结【SQL细节、多表查询、分组查询、分页】

    前言 在之前已经大概了解过Mysql数据库和学过相关的Oracle知识点,但是太久没用过Oracle了,就基本忘了...印象中就只有基本的SQL语句和相关一些概念....写下本博文的原因就是记载着Or ...

  5. 借鉴mini2440的usb-wifi工具集在Beagleboard上移植无线网卡

    配置minicom: sudo yum install minicom sudo minicom -s 选择Serial port setup,此时所示光标在"Change which se ...

  6. MAVEN自动发布更新本地和远程仓库

    1.本地仓库 的更新 mvn  clean package install  2.远程 仓库 的更新 mvn clean package deploy 2.1工程文件pom.xml的设置 <bu ...

  7. alsa声卡分析alsa-utils调用过程

    如何分析tinyplay 播放音频和tinymix的过程?需要相应的工具来支持追查: 一.利用strace工具分析tinyplay和tinymix: strace -o tinyplay.log ti ...

  8. HeapAlloc，GlobalAlloc，LocalAlloc，VirtualAlloc，malloc，new的异同

    1. 首先我们来看HeapAlloc: MSDN上的解释为:HeapALloc是从堆上分配一块内存,且分配的内存是不可移动的(即如果没有连续的空间能满足分配的大小,程序不能将其他零散的 空间利用起来, ...

  9. FtpHelper ftp操作类库

    FtpHelper ftp操作类库 using System; using System.Collections.Generic; using System.Linq; using System.Te ...

  10. 对spring web启动时IOC源码研究（二）

    发现这样debug到哪说到哪好像有点回不来了~让我重新理下思路,主要步骤先上图,有什么不同意见欢迎批评教育~ (一)spring IOC的主要步骤都在refresh()这个方法中,我给出了自己的理解注 ...