<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport"

          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>0.5px边框实现</title>

    <style>

         .btn  {

             position: relative;

            width: 100px;

            -webkit-border-radius: 5px;

            border-radius: 5px;

            text-align: center;

            line-height: 42px;

            background-color: #ededed;

        }

        .btn::after {

            content: "";

            position: absolute;

            top: 0;

            bottom: 0;

            left: 0;

            right: 0;

            -webkit-transform: scale(0.5);

            transform: scale(0.5);

            border-style: solid;

            border-width: 1px;

            border-color: red;

        }

    </style>

</head>

<body>

<div class="btn"></div>

</body>

</html>

0.5px的边框的更多相关文章

  1. css3写出0.5px的边框

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

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

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

  3. CSS3实现0.5px的边框

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

  4. css给div添加0.5px的边框

    具体代码实现如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  5. css3 使用SVG做0.5px 的边框细线

    .HalfPixelLine{ background: repeat-x top left url("data:image/svg+xml;utf8,<svg xmlns='http: ...

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

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

  7. CSS3实现0.5px边框

    用CSS设置边框宽度为0.5px,可以使边框看起来更加细腻,特别是在移动端,设计师会有这样的要求. 但遗憾的是,大多数Android手机并不能识别0.5px.因此我们可以使用CSS3来变通的实现0.5 ...

  8. 移动端 Retina屏border实现0.5px

    首先来看一下造成Retina边框变粗的原因 其实这个原因很简单,因为css中的1px并不等于移动设备的1px,这些由于不同的手机有不同的像素密度.在window对象中有一个devicePixelRat ...

  9. CSS画0.5px的线

    今天遇到一个需求,画0.5px的线,查了以下资料,主要以scale方法为主.代码如下: /*0.5px上边框*/ .half_top_border_before:before{ content: &q ...

随机推荐

  1. 008-数据类型(Dictionary)

    数据类型(Dictionary) 一.定义 字典是另一种可变容器模型,且可存储任意类型对象. 字典的每个键值 key=>value 对用冒号:分割,每个键值对之间用逗号,分割,整个字典包括在花括 ...

  2. DHCP服务器的设计

    介绍 DHCP(Dynamic Host Configuration Protocol,动态主机配置协议)通常被应用在大型的局域网络环境中,主要作用是集中的管理.分配IP地址,使网络环境中的主机动态的 ...

  3. ubuntu 的 python从2.* 升级到3.*

    1.在ubuntu 的终端中用代码下载最新的Python sudo apt-get install python3 2.用命令删除usr/bin/目录下的默认python link文件root@sal ...

  4. Helvetic Coding Contest 2016 online mirror F1

    Description Heidi has finally found the mythical Tree of Life – a legendary combinatorial structure ...

  5. lifecycle-mapping-metadata.xml

    <?xml version="1.0" encoding="UTF-8"?> <lifecycleMappingMetadata> &l ...

  6. linux 向文本指定位置写入内容

    sed -i "37 r a.txt" test.txt ====== 向test.txt 的第37行后,也就是38行后写入a.txt的内容 sed -i "38i aa ...

  7. 查看Memcache运行状况

    Memcache Memcache是danga.com的一个开源项目,它是一个高性能的分布式的内存对象缓存系统,通过在内存里维护一个统一的巨大的Hash表,能够用来存储各种格式的数据. 查看当前的me ...

  8. SQLServer2008 开启远程连接

    关闭防火墙 基本的设置可以参考下面的链接: http://wenku.baidu.com/link?url=qjZKZCCoa5T3EGd_rqSjl6Tuhb1wYjIHyXri630QxuAIKu ...

  9. StringMVC返回字符串

    @RequestMapping(value="twoB.do") public void twoBCode(HttpServletRequest request,HttpServl ...

  10. 八个cmd 命令

    一,ping 它是用来检查网络是否通畅或者网络连接速度的命令.作为一个生活在网络上的管理员或者黑客来说,ping命令是第一个必须掌握的DOS命令,它所利用的原理是这样的:网络上的机器都有唯一确定的IP ...