css 实现虚线效果的3种方式详解
一、效果
首先可以看一下下图显示的实现效果:
- 用三种方式实现了虚线效果: 点击查看demo代码
二、实现
1、border 属性
查看 mdn 的 border,我们知道 border
可以用于设置一个或多个以下属性的值:border-width
、border-style
、border-color
。
border-style
可以设置边框的样式,其中 使用 dashed
设置虚线效果。
实现代码:
设置div的样式
.box {height: 100px;line-height: 100px;margin-bottom: 20px;
}
<div className="box line1">虚线1</div>
用 border
实现:
/*虚线1 css*/
.line1 {border: 1px dashed red;
}
2、巧用 background 和 linear-gradient
我上篇文章《css 设置border边框颜色渐变效果》 里有详细的介绍过 linear-gradient 的使用,不清楚的同学可以先学习下
先看实现代码:
<div className="box line2">虚线2</div>
/*虚线2 css*/
.line2 {background: linear-gradient(to left,transparent 0%,transparent 50%,#ccc 50%,#ccc 100%);background-size: 10px 1px;background-repeat: repeat-x;
}
我们把css拆解开慢慢看:
1)先设置了background
background 属性是一个 简写属性,可以在一次声明中定义一个或多个属性:background-clip
、background-color
、background-image
、background-origin
、background-position
、background-repeat
、background-size
,和 background-attachment
。
background: linear-gradient(to left,/*to结束的方向*/transparent 0%,transparent 50%,#ccc 50%,#ccc 100%
);
linear-gradient()
函数用于创建一个表示两种或多种颜色线性渐变的图片。其结果属于<gradient>
数据类型,是一种特别的<image>
数据类型。
这段css表示的意思是:
to left
to表示结束的方向,所以这里表示从右向左渐变。transparent 0%,transparent 50%,
从 0% 的位置开始到 50% 的位置,是透明。#ccc 50%,#ccc 100%
从 50% 的位置开始到 100% 的位置,是颜色#ccc
。- 这里其实可以理解为设置的相当于
background-image
效果如下:
2)然后设置了 background-size
background-size: 10px 1px;
设置背景图片大小为:宽度10px 高度 1px。效果变成如下:
这是为什么呢?
因为上一步我们设置 linear-gradient
属性渐变的点是百分比,所以会受到 background-size
的影响,那么其实每个“灰白”的宽度就是 10px,之所以看起来高度很长,是因为 background-repeat
的原因。
并且,background
属性中 background-repeat
默认值是 repeat
(背景图像将在垂直方向和水平方向重复)。所以看到的是上面的效果。如何得到虚线呢?
3)设置 background-repeat
background-repeat: repeat-x; /*背景图像将在水平方向重复。*/
然后就得到了虚线:
因为上面设置的 background-size
中,高度是 1px,那么在 x(水平) 方向,就会按照 1px 进行重复。那么就得到了虚线。假如我们设置 background-size: 10px 10px
,那在x 方向重复的效果如下:
这样我们实现的虚线可以根据需要来调整虚线的间距和高度。
3、 巧用 background-clip
其实思路和上面一种方式很类似
先看实现代码:
<div className="box line3">虚线3</div>
/*虚线3 css*/
.line3 {border: 1px solid transparent;background: linear-gradient(white, white) padding-box,repeating-linear-gradient(-45deg,#e5e5e5 0,#e5e5e5 3px,white 0,white 5px);
}
我们依然来把css拆解开慢慢看:
1)先设置了background
background: linear-gradient(white, white) padding-box,repeating-linear-gradient(-45deg,#ccc 0,#ccc 3px,white 0,white 5px);
- 首先
linear-gradient(white, white)
表示渐变默认从上到下都是白色 padding-box
是background
中background-clip
属性,它是来设置设置元素的背景(背景图片或颜色)是否延伸到边框、内边距盒子、内容盒子下面。- 注意:默认值是
border-box;
效果如下:
我为了和背景色做区分,设置了一个灰色背景,所以第一步的效果如下:
- 然后设置的
repeating-linear-gradient
,这里实现一个线性重复渐变的效果,* 渐变轴为-45度,从右下角往左上角的方向进行渐变* 从 0 到 3px 的位置是 #ccc 的颜色* 从 0 到 5px 的位置是白色* 这样就可以得到一个灰色宽 3px,白色间隔是 2px 的不停重复的效果(可以在这里去根据需要设置虚线的宽和间距)* 注意下这里其实默认background-clip
是border-box
如下图所示效果:
这里设置的 linear-gradient
和 repeating-linear-gradient
相当于设置了两张背景图。后面设置的会被前面设置的覆盖。 所以设置完的效果我们看到的其实是白色:
那我们如何得到虚线呢?
2)设置 border
border: 1px solid transparent; /*设置透明边框*/
还记得上面我们说道的 background-clip
嘛,其实这里就是利用了它
background-clip: border-box; /*背景延伸至边框外沿(但是在边框下层)*/
background-clip: padding-box; /*背景延伸至内边距 padding 外沿。不会绘制到边框处。*/
这两个属性的差异,正好差一个边框的特性,来实现了虚线的效果。
如果我们只要显示一个边,那么可以把div盒子的高度设置小一些,然后只设置border的一边,比如:
/*只设置一个边*/
.line3 {height: 2px;border-top: 1px solid transparent;background: linear-gradient(white, white) padding-box,repeating-linear-gradient(-45deg, #ccc 0, #ccc 3px, white 0, white 5px);
}
综上,我们通过三种方式实现了虚线边框,你学会了嘛~
最后
整理了一套《前端大厂面试宝典》,包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法,一共201道面试题,并对每个问题作出了回答和解析。
有需要的小伙伴,可以点击文末卡片领取这份文档,无偿分享
部分文档展示:
文章篇幅有限,后面的内容就不一一展示了
有需要的小伙伴,可以点下方卡片免费领取
css 实现虚线效果的3种方式详解相关推荐
- 前端实现动画的6种方式详解
前端实现动画的6种方式详解 一.总结 一句话总结:一般是css样式改变加setInterval 二.[前端动画]实现动画的6种方式 通常在前端中,实现动画的方案主要有6种: javascript直接实 ...
- mysql 删除数据表中数据_Mysql-删除数据表-三种方式详解
Mysql 删除数据表的三种方式详解 用法: 1.当你不再需要该表时, 用 drop; 2.当你仍要保留该表,但要删除所有记录时, 用 truncate; 3.当你要删除部分记录或者有可能会后悔的话, ...
- 运用python的方式_对Python使用mfcc的两种方式详解
1.Librosa import librosa filepath = "/Users/birenjianmo/Desktop/learn/librosa/mp3/in.wav" ...
- 全站仪与计算机之间的数据传输,必看!全站仪数据传输的三种方式详解,都安排得明明白白(上)...
原标题:必看!全站仪数据传输的三种方式详解,都安排得明明白白(上) 科力达全站仪数据传输 一般而言,全站仪的数据传输方式有三种,分别是通过串口.USB.SD卡三种方式,因为电脑配置等因素的不同,一些数 ...
- MySQL批量入库的几种方式详解
MySQL批量入库的几种方式详解 1. MySQL批量入库概述 2. Hutool封装jdbc方式 3. Jdbc直接或批量执行方式 4. MyBatis批量入库方式 5. MySQL批量入库总结 1 ...
- IDEA安装阿里巴巴编码规范插件的两种方式详解(在线安装和离线安装)
这篇文章主要介绍了IDEA安装阿里巴巴编码规范插件的两种方式详解(在线安装和离线安装),本文通过截图给大家展示的非常详细,需要的朋友可以参考下 目录 1.在线安装: 2.离线安装: IDEA安装阿里巴 ...
- php带旋转动画刷新页面,css旋转动画效果的简单实现示例详解
我们可以通过css来做出动画效果,下面我为大家演示的是p的旋转,颜色过渡的动画 a{ text-align:center; line-height:100px; transition:all 2s; ...
- Spring中bean的执行初始化和销毁方法的4种方式详解
一.引入 在java的实际开发过程中,我们可能需要在spring实例化一个bean的过程中,使用到初始化一个对象(bean)后立即初始化(加载)一些数据,或者在销毁一个对象之前进行执行一些事情等等. ...
- uni-app小程序引入iconfont的三种方式详解(无需下载文件到项目)
重要背景说明 官网iconfont的引入方式有三种分别为:Unicode.Font class.Symbol, 其中已明确说明 Unicode.Font class 这两种引入方式 不支持多色. 单色 ...
最新文章
- envi导出jpg文件_保存技巧,完美解决PS导出文件过大的问题
- localdatetime获得时间搓_得用户者得天下,一禅小和尚×往事若茶如何获得消费者认同...
- tomcat和apache的结合 看最重要的 文档有点乱
- android网络监听
- mysql 异地备份工具_异地备份简单实现(mysql)
- 前端学习(2964):路由的实现
- 好的原程序做出好的软件
- Fix Backup Database is terminating abnormally When performing a Farm Backup
- Linux 下 WildFly (原Jboss) 的安装 、配置以及发布
- python 文本分析教程_Python笔记_第五篇_Python数据分析基础教程_文件的读写
- 解决npm安装时出现run `npm audit fix` to fix them, or `npm audit` for details
- 某TS流视频文字识别系统
- 【黑苹果】戴尔DELL Vostro 14 5490+i5-10210U和i7-10510U+OpenCore+macos 10.15.4 efi文件下载
- mp3外链,文件上传,QQ空间永久背景音乐,mp3连接,
- 单元测试总结反思_单元测试小反思200字
- ESP8266 AP模式热点
- mongodb 基于3千万条数据, 查询30万结果集,分页问题
- OpenCV C++ imread填写路径下有图片却读不出 求助!!!!!!
- For循环实现99乘法表
- 开源即时通讯IM框架 MobileIMSDK v6.3 发布
热门文章
- Photo Album: 奥运福娃
- Windows10下配置iis+php+mysql
- Linux ubuntu与安卓之间如何进行文件传输
- 数据告诉你:哪个行业最难逃35岁危机?
- 神经科学复习(XJTU-21级人工智能)
- 白话ETH2.0:你要了解的都在这里
- 诸神之眼-nmap详细使用介绍3!Nmap高阶操作(防火墙规避和脚本使用)! (*╹▽╹*) 信息收集 ~ 其四
- [2020世界机器人大赛] BCI脑控机器人技术赛主流算法讲座-运动想象主流算法笔记
- 数学领域与计算机作文,有关数学论文作文合集6篇
- 努比亚5s升级鸿蒙,荣耀可升级鸿蒙,覆盖多款机型!赵明:友商“最危险”的时候!...