利用CSS实现渐变色边框

_Shanene

已于 2022-12-15 18:10:42 修改

阅读量295

点赞数 1

分类专栏：技术问题解决集文章标签： css 前端 javascript

于 2022-11-29 11:16:50 首次发布

本文链接：https://blog.csdn.net/someday____/article/details/128094392

版权

技术问题解决集专栏收录该内容

6 篇文章 0 订阅

订阅专栏

效果：

在这里插入图片描述

实现

添加的css如下：

.roll-item {
  width: 100%;
  height: 95%;
  color: #ffffff;
  font-weight: bold;
  font-size: 16px;
  text-align: center;
  border-radius: 3px;
}

.red {
  box-shadow: -10px 0px 15px #f56c6c inset,
    /*å·¦è¾¹é˜´å½±*/ 0px -10px 15px #f56c6c inset,
    /*ä¸Šè¾¹é˜´å½±*/ 10px 0px 15px #f56c6c inset,
    /*å³è¾¹é˜´å½±*/ 0px 10px 15px #f56c6c inset;
  border: 1px solid #f56c6c;
}
.green {
  box-shadow: -10px 0px 15px #83e63c inset,
    /*å·¦è¾¹é˜´å½±*/ 0px -10px 15px #83e63c inset,
    /*ä¸Šè¾¹é˜´å½±*/ 10px 0px 15px #83e63c inset,
    /*å³è¾¹é˜´å½±*/ 0px 10px 15px #83e63c inset;
  border: 1px solid #83e63c;
}