小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 关 ...
随机推荐
- 洛谷P1063
[NOIP2006 提高组] 能量项链 题目描述 在 Mars 星球上,每个 Mars 人都随身佩带着一串能量项链.在项链上有 \(N\) 颗能量珠.能量珠是一颗有头标记与尾标记的珠子,这些标记对应着 ...
- Serverless无服务应用架构纵横谈2:边缘计算激战正酣
Serverless无服务应用架构纵横谈2 前言 6年前,我写了一篇<Serverless无服务应用架构纵横谈>. 文中说到无论是公有云FaaS还是私有云FaaS,都不是云计算的未来. 因 ...
- 【算法】用c#实现计算方法中的经典降幂优化策略,减少计算复杂度
对于给定的数组[x1,x2,x3,-,xn],计算幂的累积:x1^(x2^(x3^(-^xn))的最后一位(十进制)数字. 例如,对于数组[3,4,2],您的代码应该返回1,因为3^(4^2)=3^1 ...
- oeasy教您玩转linux010210管理应用aptitude
上一部分我们都讲了什么? 下载并运行了 hollywood hollywood 更新了源的信息 sudo apt update 查看所有已经安装的软件包 # dpkg deiban 本地包管理 dpk ...
- oeasy教您玩转vim - 89 - # 高亮细节Highlight
高亮细节 highight 回忆 这个自动命令 autocmd 还是很方便的 打开时.保存时就会有自动执行的操作 自动命令有这么几大元素 {event} 触发事件 {pattern} 文件模式 { ...
- Jenkins 添加Linux固定代理节点
实践环境 Jenkins 2.304 jdk-8u131-linux-x64.rpm centos-release-7-9.2009.1.el7.centos.x86_64 操作步骤 安装JDK 在预 ...
- 如何平稳地从nacos迁移到r-nacos?
1. 引言 很多同学了解r-nacos特性后最开始只将r-nacos用于开发测试环境. 经过一段时间的使用后,部分同学有打算生成环境也从nacos迁移到r-nacos. 一些之前使用nacos服务的同 ...
- Zabbix 5.0 LTS 配置企业微信(Webhook)自动发送告警信息
依据前面文章<Zabbix 5.0 LTS URL 健康监测>环境,实现企业微信(Webhook)自动发送告警信息. 一.创建企业微信机器人 先在自己的企业微信群里创建一个机器人,并获取其 ...
- docker dockerfile基础指令
dockerfile是用来构建docker镜像文件!命令参数脚本 构建步骤 1.编写一个dockerfile文件 2.dockerbuild构建成为一个镜像 3.docker run运行镜像 4.do ...
- 【Phoenix】4.14.1-Hbase-1.3版本 安装
Phoenix 版本 会附带Hbase版本,要根据安装的Hbase版本下载Phoenix 下载Phoenix wget http://archive.apache.org/dist/phoenix/a ...