方式一

<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. 小程序-浅谈云函数获取数据和云数据库api获取数据的区别

    区别:在于条数的限制,云数据库api获取数据限制20条以内,云函数限制100条以内 index.wxml <button bindtap="shujukuget">数据 ...

  2. UE导入FBX、GLTF模型

    楔子 虽然做了很多年的三维可视化,不过都主要还是web端开发为主(webgl,threejs,有兴趣的读者也可以关注下我的相关专栏).最近准备入手一下UE,顺便做一下知识梳理. 所以文章可能都是比较粗 ...

  3. .NET开源、简单、实用的数据库文档生成工具

    前言 今天大姚给大家分享一款.NET开源(MIT License).免费.简单.实用的数据库文档(字典)生成工具,该工具支持CHM.Word.Excel.PDF.Html.XML.Markdown等多 ...

  4. 重磅消息:微软发布多平台应用UI框架 MAUI,网友直呼:牛x

    本文内容来自微软开发博客:https://devblogs.microsoft.com/dotnet/introducing-net-multi-platform-app-ui/ 转载请注明来源,公众 ...

  5. CF916C 题解

    CF916C 题解 思路 思考发现,如果我们让很多边的边权变得非常大,而故意留下 \(1\) 到 \(n\) 的某一条路径,使整条路径之和甚至还没有剩下一条边的权值大,这条路径显然就是最短路了. 更重 ...

  6. python统计班级学生

    python统计班级学生 如下场景: 假设我有一个学生类和一个班级类,想要实现的功能为:    执行班级人数增加的操作.获得班级的总人数:    学生类继承自班级类,每实例化一个学生,班级人数都能增加 ...

  7. tar命令备份压缩7天生产日志

    [root@localhost logs]# cat tar_7day.sh #!/bin/bash #压缩日期[当天的前一天] todayStamp_1=`date -d "-1 day& ...

  8. 4、SpringBoot2之整合SpringMVC

    创建名为springboot_springmvc的新module,过程参考3.1节 4.1.重要的配置参数 在 spring boot 中,提供了许多和 web 相关的配置参数(详见官方文档),其中有 ...

  9. 11、SpringMVC之文件下载和上传

    创建名为spring_mvc_file的新module,过程参考9.1节和9.5节 11.1.文件下载 11.1.1.创建图片目录并放置图片 11.1.2.页面请求示例 <a th:href=& ...

  10. 【SpringMVC】 Controller接收深度复杂对象封装不到的问题

    首先来看数据结构的定义: 一个Form对象,然后里面有一个排版日期对象的List集合 排班集合的每个元素中又有一个String集合 在前端的Post请求中可以看到这个String集合是传递了的 但是D ...