一个看起来很酷的网站，CSS肯定是头号功臣，但平时由于开发技术、周期上的限制，大部分时间都是使用现成的UI框架进行开发，这就会造成好像开发出来的网页都一个模样，就跟使用WordPress搭建出来的网站一样，看起来貌似都一个样。

今天给大家分享的就是如何使用CSS开发一个渐变的盒子边框。

最终效果如下：

看上去是不是很炫酷，但是CSS代码却不复杂，其中伪元素起到了很重要的作用。

1. 代码

因为源代码并不复杂，所以这里直接贴上源代码，我在重点的地方都做了注释：

1
<!DOCTYPE html>
2
<html lang="zh">
3
  <head>
4
    <meta charset="UTF-8" />
5
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
    <title>渐变边框</title>
8
    <style>
9
      * {
10
        margin: 0;
11
        padding: 0;
12
        box-sizing: border-box;
13
      }
14

15
      body {
16
        display: flex;
17
        justify-content: center;
18
        align-items: center;
19
        background-color: #111;
20
      }
21

22
      .container {
23
        position: relative;
24
        display: flex;
25
        justify-content: center;
26
        align-items: center;
27
        padding: 40px 0;
28
        flex-wrap: wrap;
29
      }
30

31
      .container .box {
32
        position: relative;
33
        width: 320px;
34
        height: 400px;
35
        color: #fff;
36
        background-color: #111;
37
        display: flex;
38
        justify-content: center;
39
        align-items: center;
40
        margin: 20px 30px;
41
        transition: 0.5s;
42
      }
43

44
      .container .box:hover {
45
        transform: translateY(-20px);
46
      }
47

48
      /* 通过两个伪类来实现渐变 */
49
      /* 这里是为了实现渐变边框 */
50
      .container .box::after {
51
        content: "";
52
        position: absolute;
53
        top: 0;
54
        left: 0;
55
        width: 100%;
56
        height: 100%;
57
        background: linear-gradient(45deg, #ffbc00, #ff0058);
58
      }
59

60
      /* 这里是为了实现渐变边框虚化 */
61
      .container .box::before {
62
        content: "";
63
        position: absolute;
64
        top: 0;
65
        left: 0;
66
        width: 100%;
67
        height: 100%;
68
        background: linear-gradient(45deg, #ffbc00, #ff0058);
69
        filter: blur(30px);
70
      }
71

72
      .container .box span {
73
        position: absolute;
74
        top: 6px;
75
        left: 6px;
76
        right: 6px;
77
        bottom: 6px;
78
        background-color: rgba(0, 0, 0, 0.6);
79
        z-index: 2;
80
      }
81

82
      /* 使左右两边颜色有一定差距 */
83
      .container .box span::before {
84
        content: "";
85
        position: absolute;
86
        top: 0;
87
        left: 0;
88
        width: 50%;
89
        height: 100%;
90
        background-color: rgba(255, 255, 255, 0.1);
91
      }
92

93
      .container .box .content {
94
        position: relative;
95
        z-index: 10;
96
        padding: 20px 40px;
97
      }
98

99
      .container .box .content h2,
100
      .container .box .content p {
101
        color: #fff;
102
        margin-bottom: 10px;
103
      }
104

105
      .container .box .content p {
106
        line-height: 25px;
107
      }
108

109
      .container .box .content a {
110
        display: inline-block;
111
        color: #111;
112
        background-color: #fff;
113
        padding: 10px;
114
        text-decoration: none;
115
        font-weight: 700;
116
      }
117
    </style>
118
  </head>
119
  <body>
120
    <div class="container">
121
      <div class="box">
122
        <span></span>
123
        <div class="content">
124
          <h2>Card</h2>
125
          <p>
126
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit
127
            labore est iste dicta quo in voluptas, tenetur dolore nulla quas
128
            quam ad ratione asperiores eius odio. Eos mollitia similique unde.
129
          </p>
130
          <a href="#">Read More</a>
131
        </div>
132
      </div>
133
    </div>
134
  </body>
135
</html>

2. 样式复用

因为考虑到这种渐变边框的CSS样式有一定复用性，所以我们可以使用SASS将它们提取成一个可以通用的mixin。

1
// 设置渐变边框
2
@mixin gradient-border($args) {
3
  content: "";
4
  position: absolute;
5
  top: 0;
6
  left: 0;
7
  width: 100%;
8
  height: 100%;
9
  background: $args;
10
}
11

12
// 给盒子赋予渐变边框
13
@mixin gradient-box($args) {
14
  position: relative;
15

16
  &::after, &::before {
17
    @include gradient-border($args)
18
  }
19

20
  &::before {
21
    filter: blur(30px);
22
  }
23
}
24

25
.gradient-one {
26
  @include gradient-box(linear-gradient(45deg, #ffbc00, #ff0058))
27
}
28

29
.gradient-tow {
30
  @include gradient-box(linear-gradient(315deg, #03a9f4, #ff0058))
31
}
32

33
.gradient-three {
34
  @include gradient-box(linear-gradient(315deg, #4dff03, #00d0ff))
35
}

只需要预先定义一些类，在需要的盒子上面添加上这些类就可以实现渐变边框的效果：

最终效果：

3. 最后

一般来说，越酷炫的东西在外行人眼中感觉就越复杂，即使实现原理非常简单。有些复杂的东西却比较千篇一律，在外行人眼中就觉得实现起来很简单，别人网站不都可以实现嘛，你为什么实现不了，所以平时没事的时候我就喜欢积累一些骚操作。

参考视频：Creative CSS Gradient Border Cards | How to Create CSS Gradient Border

沧沧凉凉的博客

用CSS实现渐变边框，实现过程很简单最终效果却很赞

1. 代码

2. 样式复用

3. 最后

转载协议

未找到相关文章

1. 代码

2. 样式复用

3. 最后

转载协议