css 使用 stroke-dasharray 实现任意比例和任意比例数量的虚线效果

朝阳39

已于 2024-07-10 15:59:30 修改

阅读量786

点赞数 1

分类专栏： # CSS # 已归档链接文章标签： css

于 2021-11-30 16:44:31 首次发布

原文链接：https://demo.cssworld.cn/new/14/3-2.php

版权

283 篇文章 14 订阅

订阅专栏

148 篇文章 8 订阅

订阅专栏

这篇博客探讨了如何使用SVG（可缩放矢量图形）来绘制基本图形，包括矩形和圆形。通过示例代码展示了如何定义矩形的宽高以及圆形的半径，并应用了填充颜色、描边宽度和虚线样式。这为网页设计和前端开发提供了基础的图形元素创建方法。

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

在这里插入图片描述

<svg>
    <rect x="10" y="10" width="280" height="130"></rect>
</svg>

<svg>
    <circle cx="150" cy="75" r="60"></circle>
</svg>

rect,
circle {
    fill: none;
    stroke: deepskyblue;
    stroke-width: 4px;
    stroke-dasharray: 14px 4px 4px 4px;
}

在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

关注关注