小tips:CSS实现0.5px的边框的两种方式
方式一
<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的边框的两种方式的更多相关文章
- ImageView设置边框的两种方式
转载:http://www.2cto.com/kf/201308/239945.html package cc.testimageviewbounds; import android.os.Bundl ...
- JavaScript+HTML+CSS 无缝滚动轮播图的两种方式
第一种方式 在轮播图最后添加第一张,一张重复的图片. 点击前一张,到了第一张,将父级oList移动到最后一张(也就是添加的重复的第一张),在进行后续动画. 点击下一张,到了最后一张(也就是添加的重复的 ...
- 原生js更改css样式的两种方式
下面我给大家介绍的是原生js更改CSS样式的两种方式: 1通过在javascript代码中的node.style.cssText="css表达式1:css表达式2:css表达式3 &quo ...
- 【javascript】原生js更改css样式的两种方式
下面我给大家介绍的是原生js更改CSS样式的两种方式: 1通过在javascript代码中的node.style.cssText="css表达式1:css表达式2:css表达式3 &quo ...
- css3写出0.5px的边框
一说到0.5px的边框,我们一般认为是不行的,因为在ps中0.5px的线也是做不出来的,这个计算机的像素有关系. 废话不多说了,0.5px 其实用的是css3新特性,box-shadow:阴影设置 代 ...
- CSS画0.5px的线
今天遇到一个需求,画0.5px的线,查了以下资料,主要以scale方法为主.代码如下: /*0.5px上边框*/ .half_top_border_before:before{ content: &q ...
- 表格细边框的两种CSS实现方法
在网页制作中,细边框这个制作方法是必不可少的.这里介绍2种常见的表格细边框制作方法,均通过XHTML验证. <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...
- css清除浮动的两种方式(clearfix和clear)
最近总是在用浮动,这两种方式总是浮现在眼前,或者说去掉父级和同级浮动样式总在思考中.两种方式怎么写都在base.css中. 在做瑞祥之旅的过程中,还是吃了一个大亏,就是清除浮动,不管是同级还是父级,都 ...
- .Net 5.0导出Execl的两种方式
项目中经常会用到表格的导入导出今天来简绍一下我所了解的两种方式 1.拼接成表格的简单方式直接导出,服务器上不用安装其他程序 可以直接导出 public async Task<FileResult ...
- 转载:Flash AS3.0 加载外部资源(图片,MP3,SWF)的两种方式
Flash AS3.0 加载外部资源(图片,MP3,SWF)的两种方式 出自:http://www.cnblogs.com/top5/archive/2012/08/04/2623464.html 关 ...
随机推荐
- C++中的引用(Reference)
1. 引用(Reference) 在 C++ 中,引用(Reference)是一个变量的别名. 它允许你通过不同的名字访问同一个变量. 与指针不同,引用在定义时必须被初始化,并且一旦绑定到某个变量,之 ...
- MySQL中为什么要使用索引合并(Index Merge)?
本文分享自华为云社区<[华为云MySQL技术专栏]MySQL中为什么要使用索引合并(Index Merge)?>,作者:GaussDB 数据库. 在生产环境中,MySQL语句的where查 ...
- 24 slide的pdf没有高亮开关
安卓 app slide的pdf没有高亮开关
- 阶乘-n!_C语言实现
n! // Code file created by C Code Develop #include "stdio.h" #include "stdlib.h" ...
- 写写stream流的终结操作
终结操作和中间操作的区别:中间操作返回的一直都是stream,所以可以一直使用,但是终结操作返回的不是stream,后面不能继续操作 foreach:对流中的所有元素进行遍历操作 count:获取当前 ...
- P1081 [NOIP2012 提高组] 开车旅行
思路: 首先令 \(nxt1_i\) 表示右侧最近的城市距离(\(id1_i\) 为编号),令 \(nxt2_i\) 表示右侧第二近的城市编号(\(id2_i\) 为编号):可以使用 set 找出离这 ...
- 【JDBC】Extra04 Mirosoft-Access-JDBC
MS没提供Jdbc驱动,有一个第三方的UcanAcess驱动包 <!-- https://mvnrepository.com/artifact/net.sf.ucanaccess/ucanacc ...
- 【转载】SLAM领域的优秀作者与实验室汇总
原地址: https://blog.csdn.net/m0_37874102/article/details/114365837 总结一些之前看过的SLAM(VO,VIO,建图)文献所发表的实验室和作 ...
- 公共的网络云盘的存储真的安全吗?—— 百度云盘上的PDF文件无故被改名
在百度云盘上上传了一个PDF文件,内容: 本来是没有啥问题的,但是今天使用百度云盘发现这个PDF文件居然被改名,被取消掉了扩展名: 简直是离谱离了一个大谱,太可怕了,看来这种公共云盘真的不太靠谱,虽然 ...
- 如何在X86_64系统上运行arm架构的docker容器——(异构/不同架构)CPU下的容器启动
近期使用华为的人工智能集群,其中不仅要求异构加速端需要使用昇腾的硬件,更是要求CPU是arm架构的,因此就导致在本地x86电脑上难以对云端的arm版本的镜像进行软件安装和打包操作,为此我们需要在x86 ...