1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

.box {

border-radius: 8px;

    /* 设置元素边框为1像素宽度，样式为实线，颜色为透明。 */

    border: 1px solid transparent;

    /* 设置元素边框圆角为10像素。 */

    border-radius: 10px;

    /* 设置背景剪裁区域为内边距和边框区域。 */

    background-clip: padding-box,border-box;

    /* 设置背景绘制区域为内边距和边框区域。 */

    background-origin: padding-box,border-box;

    /* 设置元素的背景图像为两个线性渐变。第一个渐变从左到右，颜色从白色到白色；第二个渐变以155度角从下左到上右，颜色从rgba(116, 233, 255, 1)到rgba(64, 158, 255, 1)。 */

    background-image:

            linear-gradient(to right, #fff, #fff),

            linear-gradient(155deg, rgba(116, 233, 255, 1), rgba(64, 158, 255, 1));

}

1

2

3

4

5

6

.box:hover {

    box-shadow: 0px 0px 8px 0px rgba(0, 130, 255, 0.6);

    border-image: linear-gradient(155deg, rgba(116, 233, 255, 1), rgba(64, 158, 255, 1)) 0 0;

    color: #409EFF;

    font-weight: 600;

}