htmldiv虚线背景,聊聊css绘制虚线
ems
css绘制虚线⼀般都是border:1px dashed black;这种是最简单的实现虚线的⽅式,今天来看看⼀些其他绘制虚线的⽅式,包括渐变虚线和动态虚线:
border dashed实现渐变虚线
这个是最简单的渐变虚线
mpa双证这种渐变的原理就是先绘制⼀个渐变的背景,然后设置border:2ps dashed #fff;中间设置⼀个⽩⾊的div,这样虚线透明的部分就可以把背景⾊给透出来。
要注意的是,这⾥需要设置background-origin:border-box,表⽰背景从border部分开始绘制,否则默认是从内容部分开始绘制:
2012高考真题
spoon上图左边就是只有内容部分绘制了渐变背景,右边是背景包含边框,我们可以发现右边是正常的。
css mask实现动态渐变虚线vsas
朱莉和茱莉亚这个原理就是先绘制⼀个渐变的背景,然后在边缘部分绘制mask遮罩,这⾥的遮罩是和透明度相关的,没有设置透明度的显⽰背景,设置了透明的不显⽰。
注意这⾥设置了4条mask,每个mask都是⼀个单元渐变设置了⽔平/垂直重复,单元渐变有⼀部分设置了不透明,⼀部分设置了透明。mask1
crazy的意思mask3
repeating-linear-gradient实现动态虚线英语自我介绍(带翻译)
repeating-linear-gradient是linear-gradient的升级版,它和linear-gradient也有些不同:
这⾥我们利⽤repeating-linear-gradient绘制⿊⽩想间的条状,通过设置background-position即可实现动态虚线,但是要注意⾓度:
上⾯两个图都是设置了repeating-linear-gradient(Adeg, transparent, transparent 2px, #000 2px, #000 6px),并且移动了background-position,我们发现右边的图会有错乱的感觉,左边正常的,因此如果通过background-position来做虚线,那么必须要找好⼀个⾓度A,防⽌移动时有视觉误差。
除了找好⼀个⾓度外,还要找到⼀个移动的最⼩单元长度,这样移动的时候才顺畅。奥林匹斯十二神歌词
svg stroke-dashofft动态虚线
这个就⽐较简单了,先⽤path描绘出⼀个边框,然后通过stroke-dashofft来控制描边的offt来达到动态虚线的效果。烟台外语培训