一:边框虚线
方式一:border-style: dashed/dotted
浏览器效果:
<!--html-->
<div class="dashed box">dashed</div>
<div class="dotted box">dotted</div>
<!--css-->
.box {
margin: 10px auto;
width: 300px;
height: 100px;
text-align: center;
line-height: 100px;
background-color: #fff;
}
.dashed {
border: 1px dashed #333;
}
.dotted {
border: 1px dotted #333;
}
实现了虚线的效果,但UI设计师一般不会给这种效果图。如需定制,且往下看。
方式二:渐变linear-gradient
部分线设置—浏览器效果:
<div class="box line-h">上 / 下虚线</div>
<!--css-->
.line-h {
background-image: linear-gradient(to right, #333 50%, transparent 0);
background-size: 10px 1px;
background-repeat: repeat-x;
/*上,不设置background-position,默认是上虚线*/
/*background-position: 0 0;*/
/*下*/
/*background-position: 100% 100%;*/
}
<div class="box line-v">左 / 右虚线</div>
<!--css-->
.line-v {
background-image: linear-gradient(to bottom, #333 50%, transparent 0);
background-size: 1px 10px;
background-repeat: repeat-y;
/*左,不设置background-position,默认是左虚线*/
/*background-position: 0 0;*/
/*右*/
/*background-position: 100% 100%;*/
}
上面的两种效果,都是10px*1px的虚线(其中5px的实线【#333】,5px的虚线)。
整个边框线设置—浏览器效果:
<div class="box dashed-full">dashed-full</div>
<!--css-->
.dashed-full {
box-sizing: border-box;
border: 1px solid transparent;
/*方式一:50%*/
background: linear-gradient(white, white) padding-box,
linear-gradient(180deg, #333 50%, transparent 0) 0 0 / 10px 10px,
linear-gradient(90deg, #333 50%, transparent 0) 0 0 / 10px 10px;
/*方式二:5px*/
background: linear-gradient(white, white) padding-box,
linear-gradient(180deg, #333 5px, transparent 0) 0 0 / 10px 10px,
linear-gradient(90deg, #333 5px, transparent 0) 0 0 / 10px 10px;
/*方式三:修改background-size */
background: linear-gradient(white, white) padding-box,
linear-gradient(180deg, #333 50%, transparent 0) 0 0 / 100% 10px,
linear-gradient(90deg, #333 50%, transparent 0) 0 0 / 10px 100%;
}
方式三:渐变repeating-linear-gradient
浏览器效果:
<div class="box dashed-lean1">dashed-lean1</div>
<div class="box dashed-lean2">dashed-lean2</div>
<div class="box dashed-lean3">dashed-lean3</div>
<!--css-->
/*px方式*/
.dashed-lean1 {
border: 1px solid transparent;
/*3.5px代表了条纹自身的宽度,如果想要5px的实线部分,等于=5/√2 ≈3.5px*/
background:
linear-gradient(white, white) padding-box,
repeating-linear-gradient(-45deg, #333 0, #333 3.5px, white 0, white 7px);
}
/*%方式*/
.dashed-lean2 {
border: 1px solid transparent;
background:
linear-gradient(white, white) padding-box,
repeating-linear-gradient(-45deg,
#333 0, #333 25%, white 0, white 50%
) 0 / 10px 10px;
}
/*色标位置值支持两个*/
.dashed-lean3 {
border: 1px solid transparent;
background:
linear-gradient(white,white) padding-box,
repeating-linear-gradient(-45deg, #333 0 25%, white 0 50%) 0 / 10px 10px;
}
/*linear-gradient方式*/
.dashed-lean4 {
border: 1px solid transparent;
background:
linear-gradient(white,white) padding-box,
linear-gradient(-45deg, #333 0, #333 25%, white 0, white 50%, #333 0, #333 75%, white 0);
background-size: 10px 10px;
}
要实现10px*1px的虚线(其中5px的实线【#333】,5px的虚线)。repeating-linear-gradient是设置px还是百分比,设置的值有差异,注意区分。
此时,细看dashed-lean1和dashed-lean2的效果是倾斜的。这里,dashed-lean1或者dashed-lean2任选其一即可,因px需要计算且不是准确的值,更建议dashed-lean2的方式。
说明:
- 色标位置值支持最多两个值,补充了dashed-lean3 方式
- linear-gradient方式同样可以实现,补充了dashed-lean4 方式
Tips:既然方式二可以实现虚线,方式三存在的原因是,方式二自带bug。方式二中,若.box的宽 / 高自适应,很容易出现 右 / 下 边框是实现的情况。要实现整个边框的虚线,建议方式三。
二:文本下划波浪线
方式一:text-decoration
浏览器效果:
<div class="wavy">wavy--文本</div>
<!--css-->
.wavy {
text-decoration: underline wavy red;
}
多行文本都支持波浪线。缺点:波浪线不能定制,且吃藕。
方式二:svg
浏览器效果:
<div class="wavy-svg">这里是一段测试文字.....---svg</div>
<!--css-->
.wavy-svg{
display: inline-block;
text-decoration: none;
background: url("data:image/svg+xml,\
<svg xmlns='http://www.w3.org/2000/svg' \
viewBox='0 0 20 4'><path fill='none'\
stroke='#ff3300' d='M 0 3.5 c 5 0 5 -3 10 -3 s 5 3 10 3 5-3 10-3 5 3 10 3'/>\
</svg>") repeat-x 100% 100% / 20px;
}
多行文本的情况只会有一条线。
方式三:radial-gradient
浏览器效果:
<span class="highlighted-txt">这里是一段测试文字<span class="underline-wavy"></span></span>
<!--css-->
.highlighted-txt {
position: relative;
color: #f00;
font-size: 10px;
display: inline-block;
}
.underline-wavy {
/*修改这里的字体大小,更灵活的设置波浪线。*/
/*这里不设置,继承父元素highlighted-txt的字体大小也是可以的*/
font-size: 12px;
}
.underline-wavy:before {
content: '';
position: absolute;
left: 0;
bottom: -0.5em;
width: 100%;
height: 1em;
background:
radial-gradient(circle at 50% 1.3em, transparent 24%, #f00 28%, transparent 32%),
radial-gradient(circle at 50% -0.3em, transparent 24%, #f00 28%, transparent 32%),
transparent;
background-size: 1em 1em;
background-position: 0px -0.5em, 0.5em 0.5em;
background-repeat: repeat-x;
}
多行文本的情况只会有一条线。且效果失真。字体越大,屏幕分辨率越高,失真效果越明显。
有其他方式,欢迎讨论。
The end.