问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

前端按钮样式实现

头像
宫秋
    20734265

    问题描述

    下图是设计给的按钮的背景，中间灰色部分是透明的。

    边框有3层，最外层是纯色，里面两层分别是由上到下的渐变边框

    要求这个按钮能自适应内容的宽度撑开。

    请问怎么实现？

    求别骂伸手党，已经试了几种方法，效果都不理想。

    • 纯css实现的话，渐变边框和按钮背景透明应该怎么实现？
    • 图片的话，切三张图，左右两边的半圆和中间的背景进行repeat，但是拼合处在移动端不同机型会有缝隙。
    • 用css做border-image不支持圆形边框，用图片做border-image的话，又不符合自动撑开时不形变的需求

    图片描述

    csshtml
    阅读 4.8k
    5 个回答
    得票最新
    头像
    攻城狮Lee丶
      2.8k3833
      <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .wrap{text-align: center;}
            .wrap div{display: inline-block;}
            .btn_box{background:#878b8e;padding: 2px;border-radius: 20px; overflow: hidden;}
            .shadow{background: #8b9aa5;border:2px solid #c3cdd4; border-radius: 20px;padding: 2px;}
            .background{ background: #666;height: 44px; text-align: center; line-height: 44px;padding: 0 25px; color: #fff;border-radius: 18px; }
        </style>
    </head>
    
    <body>
        <div class="wrap">
            <div class="btn_box">
                <div class="shadow">
                    <div class="background">
                        点我
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

      因为圆角属性只能兼容到IE9,

      头像
      Fractal
        5.5k22433

        浏览器支持度还行，https://caniuse.com/#search=b...

        <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style type="text/css">
    .btn-x {
        display:inline-block;
        height:82px;
        line-height:62px;
        color:#FFF;
        border-top:10px solid transparent;
        border-bottom:10px solid transparent;
        border-left:50px solid transparent;
        border-right:50px solid transparent;
        border-image-source:url("https://image-static.segmentfault.com/118/667/1186679267-5c9d891b97b51");
        border-image-slice: 10 50 fill;
        border-image-repeat: stretch;
        box-sizing:border-box;
    }
    </style>
</head>
<body>
<div class="btn-x">Hello</div>
</body>
</html>
        头像
        沈小白
          24211324

          三层嵌套,设置不同的z-index 最外层position:relative;

          头像
          li_shifeng
            6811616

            整个作为一张图，设为背景，宽高100%

            头像
            改改心情
              41111234

              clipboard.png

              <div class="btn">
    <div>
        <div>
            <div>如此如此这般这般</div>
        </div>
    </div>
</div>
<style>
    .btn,.btn div{
        display:inline-block;
        color:white;
        border-radius: 50px;
    }
    .btn,.btn>div>div>div{
        background-color:#666666;
        padding:3px;
    }
    .btn>div{
        background: linear-gradient(white,#666666);
        padding:3px;
    }
    .btn>div>div{
        background: linear-gradient(#666666,white);
        padding:3px;
    }
</style>
              撰写回答
              你尚未登录，登录后可以
              • 和开发者交流问题的细节
              • 关注并接收问题和回答的更新提醒
              • 参与内容的编辑和改进，让解决方法与时俱进
              推荐问题