方式一

<style>
.border {
width: 200px;
height: 200px;
position: relative;
}
.border::before {
content: "";
position: absolute;
left:0;
top: 0;
width: 200%;
height: 200%;
border: 1px solid blue;
transform-origin: 0 0;
transform: scale(0.5);
}
</style> <div class="border"></div>

方式二

<style>
.border {
width: 200px;
height: 200px;
position: relative;
}
.border::before {
position: absolute;
box-sizing: border-box;
content: " ";
pointer-events: none;
top: -50%;
right: -50%;
bottom: -50%;
left: -50%;
border: 1px solid blue;
transform: scale(0.5);
}
</style> <div class="border"></div>

小tips:CSS实现0.5px的边框的两种方式的更多相关文章

  1. ImageView设置边框的两种方式

    转载:http://www.2cto.com/kf/201308/239945.html package cc.testimageviewbounds; import android.os.Bundl ...

  2. JavaScript+HTML+CSS 无缝滚动轮播图的两种方式

    第一种方式 在轮播图最后添加第一张,一张重复的图片. 点击前一张,到了第一张,将父级oList移动到最后一张(也就是添加的重复的第一张),在进行后续动画. 点击下一张,到了最后一张(也就是添加的重复的 ...

  3. 原生js更改css样式的两种方式

    下面我给大家介绍的是原生js更改CSS样式的两种方式: 1通过在javascript代码中的node.style.cssText="css表达式1:css表达式2:css表达式3  &quo ...

  4. 【javascript】原生js更改css样式的两种方式

    下面我给大家介绍的是原生js更改CSS样式的两种方式: 1通过在javascript代码中的node.style.cssText="css表达式1:css表达式2:css表达式3  &quo ...

  5. css3写出0.5px的边框

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

  6. CSS画0.5px的线

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

  7. 表格细边框的两种CSS实现方法

    在网页制作中,细边框这个制作方法是必不可少的.这里介绍2种常见的表格细边框制作方法,均通过XHTML验证. <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...

  8. css清除浮动的两种方式(clearfix和clear)

    最近总是在用浮动,这两种方式总是浮现在眼前,或者说去掉父级和同级浮动样式总在思考中.两种方式怎么写都在base.css中. 在做瑞祥之旅的过程中,还是吃了一个大亏,就是清除浮动,不管是同级还是父级,都 ...

  9. .Net 5.0导出Execl的两种方式

    项目中经常会用到表格的导入导出今天来简绍一下我所了解的两种方式 1.拼接成表格的简单方式直接导出,服务器上不用安装其他程序 可以直接导出 public async Task<FileResult ...

  10. 转载:Flash AS3.0 加载外部资源(图片,MP3,SWF)的两种方式

    Flash AS3.0 加载外部资源(图片,MP3,SWF)的两种方式 出自:http://www.cnblogs.com/top5/archive/2012/08/04/2623464.html 关 ...

随机推荐

  1. Laravel 组件

    创建组件命令 php artisan make:component Alert make:component 命令还将为组件创建视图模板.视图将放在 resources/views/component ...

  2. DataGridView1列宽根据内容自适应

    DataGridView1列宽根据内容自适应 在使用DataGridView控件时,要使列宽根据内容自适应,你可以使用DataGridView的AutoResizeColumns方法.这个方法允许你根 ...

  3. [oeasy]python0133_变量名_标识符_identifier_id_locals

    变量名 回忆上次内容 上次讲了 什么是变量 变量变量 能变的量 就是变量   各种系统.游戏就是由变量所组成的 ​   添加图片注释,不超过 140 字(可选)   声明了变量 并且 定义了变量   ...

  4. [oeasy]python0081_ANSI序列由来_终端机_VT100_DEC_VT选项_终端控制序列

    更多颜色 回忆上次内容 上次 首先了解了RGB颜色设置 可以把一些抽象的色彩名字 落实到具体的 RGB颜色 计算机所做的一切 其实就是量化.编码 把生活的一切都进行数字化 标准 是ANSI制定的 这个 ...

  5. oeasy教您玩转vim - 63 - # window分屏

    ​ 窗口window 回忆上次 我们这次了解了缓冲区buffer ls可以查看buffer 如下是buffer缓冲的一些flag + 有修改未保存内容 - 可修改标签关闭 = 只读缓冲区 a 活跃缓冲 ...

  6. Java JVM——13. 垃圾回收相关算法

    1.生存还是死亡? 在堆里存放着几乎所有的 Java 对象实例,在 GC 执行垃圾回收之前,首先需要区分出内存中哪些是存活对象,哪些是已经死亡的对象.只有被标记为己经死亡的对象,GC 才会在执行垃圾回 ...

  7. 三星app移植修复(app反编译修改)

    工具: apktool ADT 命令: 反编译 java -jar apktool.jar d test.apk 重打包 java -jar apktool.jar b test 签名使用ADT sm ...

  8. stable diffusion 实践与测试

    stable diffusion 实践与测试 放大 原图高清放大 原始图片 当不满意图片质量的时候 使用stable diffusion进行二次处理 选择适合图片风格的模型,再次根据图片写出提示词 输 ...

  9. 【Zookeeper】02 文件系统 & 监听机制

    官方文档上这么解释zookeeper,它是一个分布式服务框架,是Apache Hadoop 的一个子项目, 它主要是用来解决分布式应用中经常遇到的一些数据管理问题, 如:统一命名服务.状态同步服务.集 ...

  10. 美国小伙: "American Guy: Only communism can save America!"

    视频地址: https://www.youtube.com/watch?v=Y_WQnXFh8ss 2024大选在即,又是拜登对阵特朗普的旧日重现.在角逐谁的对手反对者更多的畸形内耗中,有一个名为 M ...