CSS实现自定义虚线

最新推荐文章于 2024-04-22 17:32:15 发布

i_da_bai

最新推荐文章于 2024-04-22 17:32:15 发布

阅读量1k

点赞数 2

分类专栏：前端

本文链接：https://blog.csdn.net/it_dabai/article/details/125264365

版权

HTML CSS 虚线背景图片 linear-gradient

关键词由CSDN通过智能技术生成

前端专栏收录该内容

37 篇文章 4 订阅

订阅专栏

简单记录自定义虚线，代码如下:

HTML代码

<div class="title">我是标题</div>
<p class="division"></p>

CSS代码(主要)

.title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  padding-top: 26px;
}
.division {
  margin: 5px 0;
  width: 100%;
  height: 1px;
  background-image: linear-gradient(to right, #e4e4e4 0%, #e4e4e4 50%, transparent 80%);
  background-size: 12px 1px;
  background-repeat: repeat-x;
}