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

  }
相关推荐
阿福不是狗1 小时前
Python使用总结之Mac安装docker并配置wechaty
python·macos·docker
阿阳微客1 小时前
Steam 搬砖项目深度拆解:从抵触到真香的转型之路
前端·笔记·学习·游戏
gen_1 小时前
mac环境下的python、pycharm和pip安装使用
python·macos·pycharm
AI视觉网奇1 小时前
pycharm 左右箭头 最近编辑
ide·python·pycharm
思绪无限1 小时前
Pycharm的终端无法使用Anaconda命令行问题详细解决教程
ide·python·pycharm·终端·命令行·anaconda·问题教程
德育处主任Pro1 小时前
『React』Fragment的用法及简写形式
前端·javascript·react.js
漫步云端-r1 小时前
Pycharm的使用技巧总结
ide·python·pycharm
CodeBlossom2 小时前
javaweb -html -CSS
前端·javascript·html
CodeCraft Studio2 小时前
【案例分享】如何借助JS UI组件库DHTMLX Suite构建高效物联网IIoT平台
javascript·物联网·ui
打小就很皮...2 小时前
HBuilder 发行Android(apk包)全流程指南
前端·javascript·微信小程序