css如何绘制内凹圆角UI

最新推荐文章于 2024-09-29 11:41:38 发布

猿小申

最新推荐文章于 2024-09-29 11:41:38 发布

阅读量2.6k

点赞数 1

分类专栏： css 文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_42940467/article/details/109728876

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

收到的需求是什么？

如下图，底部tabbar中间按钮部分。
如何用css画出来呢？
在这里插入图片描述

用到的css的知识

radial-gradient：径向渐变
没听过径向渐变？？那好吧！给你推荐个好网站百度(手动狗头)
先画一个类似的图，然后对比代码进行分析

在这里插入图片描述
上图对应的html、css如下：

 <style type="text/css">
    .box {
      width: 600px;
      height: 50px;
      background: radial-gradient(circle at top left, red 30px, green 31px) right, 
                  radial-gradient(circle at top right, red 30px, green 31px) left;
      background-size: 50% 100%;
      background-repeat: no-repeat;
    }
  </style>
  <title>内凹圆角</title>
</head>
<body>
  <div class="box"></div>
</body>

如上图，可以看到其实内凹圆角并不是”真正的内凹“，而是通过自身与背景颜色的差别来实现所谓的内凹。
可以看到上面代码只有radial-gradient这个很陌生。那么我们···

循序渐进式理解

最简单的径向渐变

颜色值数量可以自己写，由内向外扩散。

 background: radial-gradient(red,green,blue);

改变渐变效果：circle。

 background: radial-gradient(circle ,red,green,blue);

改变渐变起始位置

如下：将绿色距离内部30px开始

  background: radial-gradient(circle ,red,green 30px,blue);

取消平滑过渡效果

这样理解：颜色A从0px到60px，颜色B从30px到60px，颜色C从60px到90px。这样子颜色范围就成了绝对的，没有过渡效果。

      background: radial-gradient(circle ,red,red 30px ,green 30px,green 60px, blue 60px);

改变渐变起始位置

circle at top right 意思为右上角。
circle at top 意思为顶部。
当然也可以这样：circle at 30px 10px
渐变位置可以随意改变。

background: radial-gradient(circle at top right ,red,red 30px ,green 30px,green 60px, blue 60px);

最后在那么一变
是不是出来了呀~

 background: radial-gradient(circle at top ,red,red 30px, blue 30px);

最后的话

当然了，方法不止这一种。
有其他好的方法可以推荐下哈，告辞。

个人博客：https://yuanxiaoshen.com/