方式一

<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. springboot实现异步调用demo

    springboot实现异步调用 异步调用特点 异步调用在开发程序中被广泛应用,在异步任务中,主线程不需要阻塞等待异步任务的完成,而是可以继续处理其他请求. 异步调用的特点如下: 非阻塞:主线程在调用 ...

  2. Linux相关知识备忘(随时更新)

    1.dpkg Debian Packager,Debian包管理器.可以方便的对软件进行安装更新和移除. (1)安装 dpkg -i xx.deb (2)卸载,但不删除配置文件 dpkg -r xx ...

  3. 背景色透明度兼容IE8的写法

    本文为Echoyya.所创,转载请带上原文链接,感谢 https://www.cnblogs.com/echoyya/p/14236242.html 通常的做法 目前大多数浏览器都支持 CSS3,只需 ...

  4. Springboot层级关系以及作用

    entity entity是实体层,与model,pojo相似,是存放实体的类,类中定义了多个类属性,并且与数据库表的字段保持一致,一张表对应了一个entity类.主要用于定于与数据库对象对应的属性, ...

  5. PyCharm配置Miniconda3

    打开PyCharm,点击"File"(文件)菜单,选择"Settings"(设置) 选择python interpreter中的配置 选择add 选择Conda ...

  6. Stream流之List、Integer[]、int[]相互转化

    一. int[ ]转化 1.1.int[ ] 转 List< Integer > public static void main(String[] args) { int[] arr = ...

  7. Python+selenium编写第一个UI自动化脚本

    python UI自动化前提:①python需要安装selenium模块  ②下载浏览器驱动 1.安装selenium模块 先确认本地是否安装selenium模块,没有的话点击右边的添加按钮" ...

  8. 【Java】MuliThread 多线程

    程序Program 是完成特定人,用某种语言编写的一组指令集合,即一段静态代码,静态对象 进程Process 是程序的一次执行过程,可以是一个正在执行的程序 - 程序是静态的,进程是动态的 - 进程是 ...

  9. 【MySQL】JSON相关

    一些概念 MySQL里的json分为json array和json object. $表示整个json对象,在索引数据时用下标(对于json array,从0开始)或键值(对于json object, ...

  10. 如何将AI模型与CAE(计算机辅助工程)结合 —— AI大模型能否用于CAE有限元分析和数值模拟仿真的工业软件领域?

    引自: https://www.zhihu.com/question/611863569/answer/3271029434?utm_id=0 有限元分析中的三个要素,几何模型,本构模型和边界条件. ...