小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 关 ...
随机推荐
- Mybatis-Plus最优化持久层开发
Mybatis-plus:最优化持久层开发 一:Mybatis-plus快速入门: 1.1:简介: Mybatis-plus(简称MP)是一个Mybatis的增强工具,在mybatis的基础上只做增强 ...
- move语义和完美转发
move语义 值类别(value category)如下: lvalue:左值,在内存中有地址,可被程序员访问,可以放在赋值运算符左侧,也可以放在赋值运算符右侧,常见的左值有普通变量.字符串字面值&q ...
- 异构数据源数据同步 → 从源码分析 DataX 敏感信息的加解密
开心一刻 出门扔垃圾,看到一大爷摔地上了 过去问大爷:我账户余额 0.8,能扶你起来不 大爷往旁边挪了挪 跟我说到:孩子,快,你也躺下,这个来钱快! 我没理大爷,径直去扔了垃圾 然后飞速的躺在了大爷旁 ...
- c++17 using继承所有构造函数
//使用using继承所有的构造函数 #include "tmp.h" #include <iostream> using namespace std; struct ...
- 《最新出炉》系列入门篇-Python+Playwright自动化测试-53- 处理面包屑(详细教程)
1.简介 面包屑(Breadcrumb),又称面包屑导航(BreadcrumbNavigation)这个概念来自童话故事"汉赛尔和格莱特",当汉赛尔和格莱特穿过森林时,不小心迷路了 ...
- sftp文件上传下载方法
随着信息化.数字化的发展,企业对数据安全及应用安全意识普遍加强,在数据文件传输过程中,一般建议使用sftp协议进行文件传输,sftp文件操作脚本如下: sftp操作主要有三种方式,分别是sftp客户端 ...
- k8s 环境搭建(2)
安装docker组件 配置本地源或者自带的网络源2选1 1.切换镜像源 wget https://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce ...
- SpringBoot全局异常处理及自定义异常
首先定义自定义返回类,如果自己项目中已经有了自定义返回类只需要将后面的代码做相应的修改即可: import io.swagger.annotations.ApiModelProperty; impor ...
- 【CentOS】tar包安装Tomcat
下载Linux版本的Tomcat[Tar包] 上传到Linux 解压Tar包 tar -zxvf apache-tomcat-8.5.55.tar.gz 目录重命名简化名称[可不做] mv apach ...
- 标准DQN在测试算法性能时为什么要将探索概率epsilon设置为0.05呢,而不是使用其他探索概率的epsilon-greedy策略或者直接使用greedy探索策略呢?
标准dqn的策略网络参数更新所采用的规则为Q-learning中的更新规则,总所周知的是Q-learning是异策略算法,异策略算法就是行为策略和评估策略(更新所得策略)是不同的. 更新规则: q-l ...