首页 前端知识 CSS:边框虚线、文本下划波浪线

CSS:边框虚线、文本下划波浪线

2024-05-13 11:05:22 前端知识 前端哥 133 12 我要收藏

一:边框虚线

方式一: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的方式。

说明:

  1. 色标位置值支持最多两个值,补充了dashed-lean3 方式
  2. 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.

转载请注明出处或者链接地址:https://www.qianduange.cn//article/8563.html
标签
评论
发布的文章

1、SpringBoot简介及返回json

2024-05-25 09:05:17

mysql 的jsonTable使用

2024-05-25 09:05:41

MySQL中的JSON

2024-05-25 09:05:32

JSON简介(1)

2024-05-25 09:05:22

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!