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

  }
相关推荐
不会敲代码19 小时前
手写 Zustand:三十分钟带你搞懂状态管理库的核心原理
前端·javascript·源码
神奇的程序员9 小时前
重构了自己5年前写的截图插件
前端·javascript·架构
橙淮9 小时前
从优化到安全再到未来 ——JavaScript 全维度技术指南
javascript
UXbot10 小时前
一人独立交付 UI + 前端:AI 驱动 UI 设计工具的五大功能模块深度评测
前端·低代码·ui·设计模式·交互
kobesdu10 小时前
【ROS2实战笔记-19】ROS2 生命周期节点的启动顺序、状态转换陷阱与热备方案
java·前端·笔记·机器人·ros·ros2
nuowenyadelunwen10 小时前
CS 61A Lab 2 笔记:短路求值、高阶函数与 Lambda 表达式
python·函数式编程·cs61a·berkeley
诚实可靠王大锤10 小时前
React Native 输入框与按钮焦点冲突解决方案(rn版本0.70.3)
前端·javascript·react native·react.js
kyriewen11 小时前
测试妹子让我写单测,我偷偷用AI一天干完一周的活
前端·chatgpt·cursor
2601_9577808411 小时前
Claude Code 2026年最新部署指南:从环境搭建到技能扩展
前端·人工智能·ai编程·claude
qq_4228286211 小时前
android图形学之SurfaceControl和Surface的关系 五
android·开发语言·python