方式一

<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. oeasy教您玩转vim - 50 - # 命令行效率

    ​ 命令行效率 回忆上节课内容 总结 我们上次研究的是范围命令执行方法 批量控制缩进 :20,40> 批量执行普通模式下的命令 :4,10normal A; 直接切换到全屏命令模式 ex-mod ...

  2. vue小知识:多层数据双向相应之向上派发和向下派发($dispatch和$broadcast)

    注意:这两个实例已经在vue3中弃用啦!!!(所以不详细说了,封装知道怎么用就行了,作为了解) 都是在vue实例配置(main.js) 向上派发:$dispatch 注意,在相应后代组件中使用 thi ...

  3. Django 跨域访问POST请求需预先发送option请求问题处理方案

    跨域访问POST请求需预先发送option请求问题处理方案   By:授客 QQ:103355122 实践环境 Win 10 Python 3.5.4 Django-2.0.13.tar.gz 官方下 ...

  4. DUILib的代码分析

    1.思路上用的是mfc的Message_MAP,而Control只是一个gdi render. 控件间使用的Message Map. 也就是说每个控件可以作为一个独立的个体

  5. 面试题-python 什么是闭包(closure)?

    前言 前面学了装饰器,那么闭包和装饰器有什么区别呢?闭包传递的是变量,而装饰器传递的是函数对象,只是传的参数内容不一样,闭包的概念包含了装饰器,可以说装饰器是闭包的一种,它只是传递函数对象的闭包. 先 ...

  6. idea快捷键Ctrl+alt+m:如何快速抽离部分方法

    Ctrl+alt+m 效果如下图

  7. STM32定时器---正交编码器模式详解

    https://blog.csdn.net/wang328452854/article/details/50579832

  8. 低代码如何借助 K8s 实现高并发支持?

    引言 在当今这个数字化时代,互联网的普及和技术的飞速发展使得应用程序面临着前所未有的挑战,其中最为显著的就是高并发访问的需求.随着用户数量的激增和业务规模的扩大,如何确保应用在高并发场景下依然能够稳定 ...

  9. 【MySQL】Tinyint 类型问题

    下发字段: `DISTRIBUTION_STATUS` tinyint(1) DEFAULT '0' COMMENT '下发状态,0未下发,1已下发,2已作废', Mybatis封装之后日志打印也确实 ...

  10. 【DataBase】MySQL 13 分组查询

    视频参考自:P59 - P68 https://www.bilibili.com/video/BV1xW411u7ax 分组查询 GROUP BY -- group by 子句 -- 要注意!grou ...