CSS 半个像素边框

最新推荐文章于 2024-02-23 11:19:04 发布

Roger-006

最新推荐文章于 2024-02-23 11:19:04 发布

阅读量762

点赞数

文章标签： CSS 细边框

本文链接：https://blog.csdn.net/AJINGJINGJJ/article/details/82874798

版权

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

摘要由CSDN通过智能技术生成

实际效果

代码

<!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 soli

最低0.47元/天解锁文章

Roger-006

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS 半个像素边框

实际效果代码&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;利用伪元素实现半个像素的边框&lt;/title&gt; &lt;style type="text/css"&gt;
复制链接

扫一扫