【CSS学习】自定义虚线大小样式

最新推荐文章于 2025-03-29 14:45:44 发布

Sam9029

最新推荐文章于 2025-03-29 14:45:44 发布

阅读量1.2k

点赞数

分类专栏： CSS学习文章标签： css 学习 html

本文链接：https://blog.csdn.net/m0_61486963/article/details/126160782

版权

CSS学习专栏收录该内容

14 篇文章

订阅专栏

本文探讨了如何在HTML和CSS中使用border属性创建dashed虚线圆，并介绍了当border效果不满足需求时，如何通过自定义div背景实现更灵活的虚线圆设计。同时，涉及了如何利用border-radius控制块元素的边角曲率。

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

虚线设置

两种：1.border 里的 dashed；2. 利用div自定义

圆设置

块元素的border-radius属性设置边角曲率

虚线圆源代码

<h1>border属性dashed虚线圆</h1>
<div class="dashedCircle"></div>

<style>
/* border 虚线圆 */
.dashedCircle{
	margin:10px auto;
	width:100px;
	height:100px;
	border:1px dashed black;
	border-radius:100px/100px;
}
</style>

效果

码笔网-在线代码编辑器和前端Web开发人员的社交平台animpen.com/pen/mOGkFR正在上传…重新上传取消

拓展

border 属性提供的 dashed 不太好看，也不能调整！！！！！！

所以自定一个虚线（利用div和background的属性）

HTML

<div class="dashedLine"></div>

CSS

.dashedLine{
	margin:50px auto;
	width:500px;
	height:2px;
	background-image:linear-gradient(to right,#000 0%, #000 50%, transparent 75%);
	background-size:20px 10px;
	background-repeat:repeat-x;
}

自定义虚线圆待思考