设置渐变边框色

news/2024/5/19 20:07:33/文章来源:https://blog.csdn.net/Day71/article/details/128084357

在这里插入图片描述
如上图所示，需设置渐变边框色，左右边框颜色固定，上边框从左到右开始渐变，下边框从右到左开始渐变。
思考了很久，如果看作是一个div，则需要用到 border-image属性设置渐变色。也可以看作是两个div，外层设置渐变背景，内层设置固定颜色，使用padding值挤出border

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {height: 48px;background-image: linear-gradient(45deg, #f58f0c, #f9b966, #f58f0c);border-radius: 4px;display: inline-block;padding: 3px;box-sizing: border-box;margin: 50px auto;}.btn {font-family: PingFang-SC-Medium;font-size: 26px;color: #AD2A00;letter-spacing: 0;background: #FFC439;padding: 0 16px;border-radius: 4px;height: 100%;display: flex;align-items: center;}.btn2  {display:inline-flex;align-items: center;height: 48px;padding: 0 16px;background: #ffc439;border-radius: 4px;font-size: 26px;color: #ad2a00;border: 3px solid #f58f0c;box-sizing: border-box;border-image: linear-gradient(45deg, #f58f0c, #f9b966, #f58f0c) 3;clip-path: inset(0 round 4px);}</style>
</head><body><div class="box"><div class="btn">第一期</div></div><div class="btn2">第二期</div>
</body></html>