<!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. Visitor模式（访问者设计模式)

    Visitor ? 在Visitor模式中,数据结构与处理被分离开来.我们编写一个表示"访问者"的类来访问数据结构中的元素, 并把对各元素的处理交给访问者类.这样,当需要增加新的处 ...

  2. DropDownList 不能绑定多个值错误！

    ListItem item = new ListItem("--请选择--",""); ddlstPurchaser.Items.Insert(0, item) ...

  3. 配置文件中取值： spring配置文件中util:properties和context:property-placeholder

    转载大神 https://blog.csdn.net/n447194252/article/details/77498916 util:properties和context:property-plac ...

  4. HDU 5792 L - World is Exploding 。容斥原理 + 树状数组 + 离散化

    题目,要求找出有多少对这样的东西,四个数,并且满足num[a]<num[b] &&num[c]>num[d] 要做这题,首先要懂得用树状数组,我设,下面的小于和大于都是严格 ...

  5. Storm概念学习系列之Worker、Task、Executor三者之间的关系

    不多说,直接上干货! Worker.Task.Executor三者之间的关系 Storm集群中的一个物理节点启动一个或者多个Worker进程,集群的Topology都是通过这些Worker进程运行的. ...

  6. Python 面向对象程序设计

    类的设计 方法优先的原则, 在__init__方法中创建出需要的属性, 对于基类来说, 只进行默认值得初始化, 0, None等, 对于真正需要使用的子类, __init__方法则是进行我们需要的初始 ...

  7. IE6、7下块级元素设置display:inline-block不换行的解决办法

    使用背景 在实际的工作中,我们有的时候会把块元素设置为inline-block,这样做的目的有2个,一是块元素能够排列到一行,二是块元素就形成包裹性,能够自适应content area,而不必设置宽和 ...

  8. C 碎片五 数组

    构造类型数据是有基本类型数据按照一定规则组成的.数组,结构体,共用体都属于构造类型的数据.数组是有序数据的集合,C语言数组中的每一个元素都属于同一个数据类型,用数组名和下标来唯一确定数组中的元素. 一 ...

  9. VMware ESXi5忘记登录密码解决办法

    很久没有登录ESXi5了,今天登录发现忘记密码了: 网上搜索到的方法都是使用linux其他版本的镜像的恢复模式来重置密码(尝试过了,ESXI自己的镜像没有恢复模式).于是使用现有的Ubuntu镜像来操 ...

  10. Linux系统 Centos7/Centos6.8 yum命令在线安装 MySQL5.6

    Linux系统 Centos7 yum命令在线安装 MySQL5.6 标签: centosmysqlyum 2015-11-18 17:21 707人阅读 评论(0) 收藏 举报  分类: Linux ...