开发者社区> 问答> 正文

如何用css做出这种圆角效果?

screenshot
如何用css做出这种圆角效果?

展开
收起
a123456678 2016-03-26 14:14:17 2066 0
1 条回答
写回答
取消 提交回答
  • .big-title{
      position: absolute;
      left: 5;
      top: 0;
      padding: 9px;
      background: #808080;
      font-size: 30px;
      border-radius: 40px;
      box-shadow: 5px 0 white;
      vertical-align: bottom;
    }
    .small-title{
      padding: 9px;
      margin-left: 40px;
      background: #808080;
      color: white;
      border-radius: 40px;
      line-height: 54px;
      vertical-align: bottom;
    }
    这样能做个大概,但是没有原图顺滑。
    又换了一种方案:思路是两个一样的JWC,一个背景色为白色,放于灰色背景的下面,然后left多一点点,但这样做出来还是不顺滑:
    
    .big-title{
      position: absolute;
      left: 0;
      top: 0;
      padding: 9px;
      background: #808080;
      font-size: 30px;
      border-radius: 40px;
      vertical-align: bottom;
      z-index: 20;
    }
    .placeholder{
          position: absolute;
      left: 3px;
      top: 0;
      padding: 9px;
      background: white;
      color: white;
      font-size: 30px;
      border-radius: 40px;
      vertical-align: bottom;
    }
    .small-title{
      padding: 9px;
      margin-left: 30px;
      background: #808080;
      color: white;
      border-radius: 40px;
      line-height: 54px;
      vertical-align: bottom;
    }
    
    解决方案3:感谢刘湿湿的提醒~
    用border 解决了
    
    .big-title{
      position: absolute;
      left: 0;
      top: 0;
      border: 2px solid white;
      padding: 9px;
      background: #808080;
      font-size: 30px;
      border-radius: 40px;
      vertical-align: bottom;
      z-index: 20;
    }
    .small-title{
      padding: 9px;
      margin-left: 30px;
      background: #808080;
      color: white;
      border-radius: 40px;
      line-height: 54px;
      vertical-align: bottom;
    }
    2019-07-17 19:16:09
    赞同 展开评论 打赏
问答分类:
问答标签:
问答地址:
相关产品:
问答排行榜
最热
最新

相关电子书

更多
零基础CSS入门教程 立即下载
低代码开发师(初级)实战教程 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载