css3 画粗虚线

最新推荐文章于 2024-01-30 10:48:09 发布

Aa独角戏

最新推荐文章于 2024-01-30 10:48:09 发布

阅读量508

点赞数

分类专栏： css css3画虚线文章标签： css

本文链接：https://blog.csdn.net/yw_hard/article/details/124229444

版权

css 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

css3画虚线

1 篇文章 0 订阅

订阅专栏

本文展示了如何使用CSS的`linear-gradient`和`background-size`属性创建一个具有背景渐变和粗体虚线边框的元素。示例中，`.back`类用于设置渐变背景，`.bold-dotted-line`类则用于实现5px宽度的虚线边框。通过调整`background-size`，可以控制渐变的间隔和样式。

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

用background：linear-gradient 配上background-size就可以了

<div class="back"></div>
<div class="bold-dotted-line"></div>

css如下

.back {
  width: 500px;
  height: 250px;
  border: 1px solid rosybrown;
  margin: auto;
}
.bold-dotted-line {
  margin: auto;
  height: 5px;
  width: 500px;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.5) 50%, #fff 50%);
  background-size: 20px 10px;
}

效果图如下