<!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. C 语言实例 - 判断回文数

    C 语言实例 - 判断回文数 判断一个数是否为回文数. 设n是一任意自然数.若将n的各位数字反向排列所得自然数n1与n相等,则称n为一回文数.例如,若n=,则称n为一回文数:但若n=,则n不是回文数 ...

  2. swarm

    https://blog.51cto.com/lookingdream/2060292 一.规划 1.swarm01作为manager节点,swarm02和swarm03作为worker节点. # c ...

  3. linux下apache无法启动之（httpd not running, trying to st）

    这突然接手的服务器,本来是没什么事的,可是因为机房的问题,需要将服务器迁回来,结果可想而知,关机重启了,其中有一台估计诚心给我过不去,待配置好ip并重启了服务后,发现apache无法正常启动了! 先还 ...

  4. 003 Longest Substring Without Repeating Characters 最长不重复子串

    Given a string, find the length of the longest substring without repeating characters.Examples:Given ...

  5. Ubuntu批量修改文件后缀

    rename 's/\.JPG/.jpg/' *.JPG 把JPG后缀改为jpg 参考url====http://blog.csdn.net/whuslei/article/details/67249 ...

  6. CentOS 7 iptables 开放8080端口

    # 安装iptables-services [root@localhost bin]# yum install iptables-services [root@localhost bin]# /bin ...

  7. CentOS安装MySQL，（常规安装方式MySQL无法远程连接）

    转载自:https://blog.csdn.net/z13615480737/article/details/78906598 CentOS7默认数据库是mariadb, 但是 好多用的都是mysql ...

  8. spring boot 监控与管理（actuator）

    Spring POMs 中提供了一个特殊的依赖模块,即spring-boot-starter-actuator,我们只需要在我们的POM中添加依赖即可 <!-- 监控 管理 --> < ...

  9. Vue-watch选项

    Vue ----watch 选项 用于 监听数据变化: <!DOCTYPE html> <html lang="en"> <head> < ...

  10. Oracle 用户相关

    1.查询所有未修改过密码的Oracle用户 SELECT * FROM dba_users_with_defpwd d, dba_users du WHERE du.account_status = ...