CSS 圆角渐变边框

html 复制代码
 <div class="contact-box">
    <div class="contact-item">联系我们</div>
</div>
css 复制代码
    .contact-item{
      width: 194px;
      height: 48px;
      border-radius: 20px 20px 20px 20px;
      background-color: #000000;
      color: #BDBDBD;
      font-weight: 500;
      font-size: 16px;
      text-align: center;
      line-height: 48px;
      cursor: pointer;
    }
    border: 1px solid;
    width: 194px;
    height: 48px;
    background: linear-gradient(90deg, rgba(202, 217, 255, 1), rgba(218, 218, 218, 1), rgba(255, 144, 71, 1));
    border-radius: 20px 20px 20px 20px;
    padding: 1px;/* 边框宽度 */

  }
相关推荐
Lyn_Li13 分钟前
Kaggle Top 5 | 198只股票、200条数据的金融预测——BattleFin高分方案从零复现
python·kaggle·比赛复盘·金融预测
kyriewen2 小时前
我手写了一个 EventEmitter,面试官追问了 6 个问题——第 4 个我没答上来
前端·javascript·面试
IT_陈寒2 小时前
Java的Date类又坑了我一次,改用时间戳真香
前端·人工智能·后端
山河木马3 小时前
矩阵专题2-怎么创建视图矩阵(uViewMatrix)
javascript·webgl·计算机图形学
小林攻城狮3 小时前
使用 Transport 节流解决 Vercel AI SDK 流式渲染卡死问题
前端·react.js
前端缘梦3 小时前
告别 TS 运行时类型漏洞!Zod 完整入门实战教程(前端 / 全栈必备)
前端·react.js·全栈
the_answer3 小时前
Webpack vs Vite 深度对比分析
前端·webpack
转转技术团队3 小时前
验证码识别实战:前端不写页面,改训模型了?
前端
MomentYY3 小时前
Temperature:AI 的“脑洞旋钮”
前端·llm·ai编程
远航_4 小时前
OpenSpec 完整详细介绍
前端·后端