CSS 半个像素边框

最新推荐文章于 2023-12-22 13:49:55 发布

Roger-006

最新推荐文章于 2023-12-22 13:49:55 发布

阅读量830

点赞数

CC 4.0 BY-SA版权

文章标签： CSS 细边框

本文链接：https://blog.youkuaiyun.com/AJINGJINGJJ/article/details/82874798

本文探讨了如何在CSS中创建看似只有半个像素宽度的边框，通过实例代码展示实现细节，以达到更精致的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实际效果

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>利用伪元素实现半个像素的边框</title>
        <style type="text/css">
            div {
                width: 100px;
                height: 100px;
                border-radius: 50%;
                background: #abcdef;
                text-align:center;
                vertical-align:middle;
                position: relative;/*此处不能使用默认值,否则后边的伪元素定位的父容器会变成别的容器*/
                word-break: break-all;
            }
            .cont1 {
                border: 1px solid red;
            }
            .cont2::after {
            	content: "";/*伪元素内容*/
            	width: 200%;/*设置起始宽高大小均为原容器的两倍*/
            	height: 200%;
            	border: 1px solid red;/*1个像素的边框,缩放0.5倍后变成半个像素*/