<!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. 获取.net应用的版本及依赖信息

    在制作打包安装器时,通常要获取要安装的程序的名称.版本.说明,以及依赖的版本信息,经过翻阅MSDN,stackoverflow,终于搞定了. 1. 获取应用的依赖信息 var ans = System ...

  2. php类内方法使用类外变量和类外函数

    如果要调用另一个类的属性和方法,直接实例化后调用就可以 但是要使用的变量和函数是独立的,不在本类或其他类里面,这时调用就要用下面的方法(本例是在同一个php文件里,如果不再同一个类文件可以requir ...

  3. @Requestbody@ApiParam @PathVariable @RequestParam三者区别

    一.问题描述 由于项目是前后端分离,因此后台使用的是spring boot,做成微服务,只暴露接口.接口设计风格为restful的风格,在get请求下,后台接收参数的注解为RequestBody时会报 ...

  4. (转)CentOS（5.8/6.4）linux生产环境若干优化实战

    CentOS(5.8/6.4)linux生产环境若干优化实战 原文:http://blog.51cto.com/oldboy/1336488 特别说明:本文来自老男孩linux培训VIP学生学习笔记. ...

  5. Storm概念学习系列之storm-starter项目（完整版）（博主推荐）

    不多说,直接上干货! 这是书籍<从零开始学Storm>赵必厦 2014年出版的配套代码! storm-starter项目包含使用storm的各种各样的例子.项目托管在GitHub上面,其网 ...

  6. Docker创建Centos踩出来的坑

    屁话不多说,先来一遍正常的流程 1.下载centos镜像 # docker pull centos 2.运行容器,修改镜像 2.1 运行 # docker run -itd --name centos ...

  7. strstr strcpy 函数的实现

    一. strcpy 代码实现 #include <iostream> #include <assert.h> #include <iostream> //#incl ...

  8. properties文件 , properties类, 的作用

    "properties文件",是java所支持的配置文件类型.java中的properties文件是一种配置文件,主要用于表达配置信息,文件类型为*.properties,格式为文 ...

  9. ASP编码规范

    ASP编码规范(--::) 第一章 ASP编码规范通述 ASP编码分为两大部分,一部分为静态文件编码,一部分为包含服务器端脚本的动态文件编码. 静态文件编码分script编码和HTML编码两部分. 服 ...

  10. 说说C#中的enum吧

    enum,就是枚举类型,它是struct,int,single,double一样,都属于值类型,从ValueType类型中派生,存储在栈中.它在被创建时,不需要分配内在空间,所以对程序的性能是有好处的 ...