文字添加前置后置样式

效果图如下

image-20230321162341730

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
.name{
    font-weight: bold;
    color: #333333;
    position: relative;
    font-size: 34px;
    margin-top: 300px;
    z-index:0
}
// 文字前方块
.name::before {
    position:absolute;
    content: '';
    width: 21px;
    height: 21px;
    background: #1678FF;
    border-radius: 1px;
    left: -40px;
    bottom: 9px;
    transform: rotate(45deg);            
}
// 文字后数字
.name::after {
    position:absolute;
    content: '01';
    color: #F3F4FE;
    font-size: 90px;
    left: 0;
    z-index: -1;
    bottom: -19px;
}

进阶

修改伪类content内容

  • html

    1
    <div class="name" data-content-after=":after">我是标题</div>

  • css 

    1
    2
    3
    4
    5
    6
    7
    8
    9
    .name::after {
        position:absolute;
    +   content: attr(data-content-after);
        color: #F3F4FE;
        font-size: 90px;
        left: 0;
        z-index: -1;
        bottom: -19px;
    }

  • js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    // 单个修改
    $('.name').attr('data-content-after', '测试')

    // 列表循环动态修改伪类中的值
    let i = 0
    $('.parent-div').each(() => {
        i++
        $('.name'+i).attr('data-content-after','0'+i)
    })

消息框

方法一：效果图

image-20230323171243242

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
.message-box {
    position: relative;
    display: flex;
    align-items: center;
    width: 300px;
    height: 80px;
    background: #0B46F0;
    color: #FFFFFF;    
    border-radius: 10px;
    border: 1px solid #589DFF;    
    padding-left: 20px;
}
.message-box::before {
    content: '';
    position: absolute;
    background: #0B46F0;
    border-bottom: 1px solid;
    border-left: 1px solid;
    border-color: #589DFF;
    left: -7px;
    width: 12px;
    height: 12px;
    top: 20%;
    transform: rotate(45deg);
}

方法二：伪元素+border实现+整体阴影

效果图

image-20230526155310638

1
2
3
<div class="pop-with-border">
  <p>filter:drop-shadow实现整体阴影</p>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
.pop-with-border {
    margin: 30px;
    width: 200px;
    height: 100px;
    padding: 10px;
    background: #fff;
    border-radius: 8px;
    position: relative; 
    border: 1px solid #1678ff;
    filter: drop-shadow(0 0 5px #ccc);
}
.pop-with-border:before,
.pop-with-border:after {
  top: -8px;
  border: 8px solid transparent;
  border-top: 0;
  border-bottom-color: #fff;
  content: "";
  display: block;
  width: 0;
  height: 0;
  left: 16px;
  overflow: hidden;
  position: absolute;
  z-index: 101;
}
.pop-with-border:before {
  top: -9px;
  border-bottom-color: #1678ff;
  z-index: 99;
}
.pop-with-border p {
    padding: 10px 20px;
}

弧形卡片

内弧

  • 效果图

    image-20230329110307068

  • 代码

    1
    2
    3
    <div class="card">
    	<div class="head"></div>
    </div>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    .card {
        height: 466px;
        background: #FFFFFF;
        box-shadow: 0px 2px 10px 0px rgba(0,123,255,0.18);
        border-radius: 10px;
    }
    /* 关键代码 */
    .head {
        position: relative;
        height: 142px;
        width: 270px;
        color: #fff;
        text-align: center;
        border-radius: 10px 10px 0 0;
        background: linear-gradient(270deg, #F5AA07 0%, #FBD353 100%);
    }
    .head::after{
    	content: '';
        position: absolute;
        background: #fff;
        height: 8px;
        border-radius: 50% 50% 0 0;
        bottom: 0;
        left: 0;
        width: 100%;
    }

外弧

  • 效果图

    image-20230329111659643

  • 代码区别部分

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    .head::after{
    	content: '';
        position: absolute;
    +   background: linear-gradient(270deg, #F5AA07 0%, #FBD353 100%);
    +   height: 10px;
    +   border-radius: 0 0 50% 50%;
    +   bottom: -10px;
        left: 0;
        width: 100%;
    }

弧形背景

效果图

image-20240516100035357

1
2
<!-- html -->
<div class="top-content"></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// css
.top-content {
  width: 100%;
  height: 320px;
  position: relative;
  overflow: hidden;
}

.top-content::after {
  content: '';
  width: 120%;
  height: 320px;
  position: absolute;
  left: -10%;
  top: 0;
  border-radius: 0 0 30% 30%;
  background: #1678ff;
}