<!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. ImportError: /lib64/libc.so.6: version `GLIBC_2.17' 问题解决

    安装最新的TensorFlow(>=1.10)后,载入TensorFlow时提示Glibc版本过低,需要升级到指定版本. ImportError: /lib64/libc.so.6: versi ...

  2. vs获取最新时，提示签出解决方案

    项目中的文件有被意外去掉了只读属性的. VSS中签入状态的文件在本地都有只读属性. 如果VSS中是签入状态,而对应的本机文件没有只读状态,在获取最新版本的时候,就会弹出一个对话框提示签出还是用VSS中 ...

  3. mysql隔离级别与锁，接口并发响应速度的关系(2)

    innoDB默认隔离级别 mysql> SELECT @@tx_isolation; +-----------------+ | @@tx_isolation | +-------------- ...

  4. Android Studio、adb

    Android Studio:一个超级全的教程,mark~ https://www.cnblogs.com/laughingQing/p/5848425.html adb命令: https://blo ...

  5. eclipse导入maven项目有时出现web.xml is missing的问题

    今天导入一个从Git上pull下来的项目导入eclipse时,报错web.xml is missing,但是我检查了webapp下面的WEB-INF目录下是有web.xml的,然后就纠结了.纠结了半天 ...

  6. mysql数据库忘记密码时如何修改(二)

    第一步:找到mysql数据库的my.ini配置文件,在[mysqld]下面添加一行代码:skip-grant-tables 第二步:运行services.msc进入服务管理界面,重启mysql服务. ...

  7. EF增删查改加执行存储过程和sql语句，多种方法汇总

    ActionUrl c = new ActionUrl() { ActionName="test", RequestUrl="/123/123", SubTim ...

  8. Likely root cause: java.lang.IllegalStateException: jar hell!

    jar hell 解决方案: 问题: Likely root cause: java.lang.IllegalStateException: jar hell! 解决: 当一一个类或者一一个资源文件存 ...

  9. HTML5 有哪些不同类型的存储？

    HTML 5 支持本地存储,在之前版本中是通过 Cookie 实现的.HTML5 本地存储速度快而且安全. 有两种不同的对象可用来存储数据: localStorage 适用于长期存储数据,浏览器关闭后 ...

  10. 将vim配置成一个轻量的IDE开发工具

    1.插件管理工具 2.安装插件 3.配置.vimrc 1.插件管理工具 vim的插件有很多,为了后面方便添加新的插件,我们需要一个插件管理工具来帮我们管理安装的插件,这里使用的是vim-pathoge ...