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;/* 边框宽度 */

  }
相关推荐
雨夜的星光44 分钟前
Python JSON处理:load/loads/dump/dumps全解析
开发语言·python·json
fen_fen2 小时前
Java打包时,不将本地Jar打包到项目的最终 JAR 中
开发语言·python·pycharm
灵感__idea3 小时前
Hello 算法:让前端人真正理解算法
前端·javascript·算法
向葭奔赴♡3 小时前
CSS是什么?—— 网页的“化妆师”
前端·css
黑犬mo3 小时前
在Edge、Chrome浏览器上安装uBlock Origin插件
前端·edge
excel3 小时前
🧩 Vue 3 watch 源码详解(含完整注释)
前端·javascript·vue.js
大前端helloworld3 小时前
前端梳理体系从常问问题去完善-网络篇
前端·面试
excel4 小时前
🌿 一文看懂 Vue 3 的 watch 源码:从原理到流程
前端
可触的未来,发芽的智生4 小时前
触摸未来2025.10.10:记忆的种子,当神经网络拥有了临时工作区,小名喜忆记系统
人工智能·python·神经网络·机器学习·架构
繁花与尘埃4 小时前
HTML5简介与基本骨架(本文为个人学习笔记,内容整理自哔哩哔哩UP主【非学者勿扰】的公开课程。 > 所有知识点归属原作者,仅作非商业用途分享)
笔记·学习·html5