小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 关 ...
随机推荐
- SurveillanceStation破解版 SurveillanceStation-x86_64-8.2.2-5766
直接手动安装好套件,许可就是65535.安装的时候提示套件损坏,不理继续安装.不过这个版本有时间炸弹问题,使用几个小时后会出现摄像机消失问题,显示摄像机被删除,但是配置其实是在的.只要禁用套件再启用一 ...
- Java-Filter:过滤器请求拦截
1.概念 web中的过滤器:当访问服务器资源时,过滤器可以将请求拦截下来,完成一些特殊的功能 过滤器的作用: 一般用于完成通用的操作,如:登录验证,统一编码处理,敏感字符过滤 2.快速入门 1.步骤 ...
- 【实操记录】MySQL主从配置
本文使用MySQL原生支持的主从同步机制,详细记录了配置步骤及运维操作方法,可供大家直接参考.使用. 本文假设已经部署了两台主机的MySQL软件,且数据库服务正常,详细部署步骤可本站搜索:" ...
- 3.5 Y84-64的流水线实现
我们终于准备好要开始本章的主要任务--设计一个流水线化的Y86-64处理器.首先,对顺序的SEQ处理器做一点小的改动,将PC的计算挪到取指阶段.然后,在各个阶段之间加上流水线寄存器.到这个时候,我们的 ...
- [oeasy]python0002_终端_CLI_GUI_编程环境_游戏_真实_元宇宙 🥊
回忆 上次 了解了 python 语言的特点 历史悠久 功能强大 深受好评 已成趋势 3大主流操作系统 mac windows linux 添加图片注释,不超过 140 ...
- 学习笔记--Java中static关键字
Java中static关键字 static基础用法 什么时候成员变量声明为实例变量 所有对象的这个属性随对象而变化 什么时候成员变量声明为静态变量 所有对象都是这个属性 静态变量在类加载的时候初始化, ...
- 指针_C
指针的代码 // Code file created by C Code Develop #include "ccd.h" #include "stdio.h" ...
- vue table表格实现无缝滚动 鼠标进入可悬停
<el-table ref="table" :data="tableData" :header-cell-style="{background: ...
- CCF 命令行选项
题目原文 问题描述(题目链接登陆账号有问题,要从这个链接登陆,然后点击"模拟考试",进去找本题目) 试题编号: 201403-3 试题名称: 命令行选项 时间限制: 1.0s ...
- 10、SpringMVC之处理Ajax请求
创建名为spring_mvc_ajax的新module,过程参考9.1节和9.5节 10.1.SpringMVC处理Ajax请求 10.1.1.页面请求示例 <input type=" ...