border–radius与transform不能一起使用

如何解决border–radius与transform不能一起使用的问题

可以嵌套一个层，外面是圆弧矩形，里面是transform

  • 你可以参考下这篇文章：解决border-radius：50% 不圆的方法（由于使用了rem）
  • 除此之外, 这篇博客: 使用border-radius出现缺角的问题中的 使用border-radius出现缺角的问题 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:

  • 手鲁了一个简单的搜索框：
    在这里插入图片描述
    因为需要用到输入的功能，所以理所当然想到了input。因为还要添加按钮，所以就用了一个div做了一个button,个人喜欢圆角的边框那就加上了。
    然后出现了以下的问题。没有添加圆角的时候
    在这里插入图片描述 第一个是没有添加border-radius的时候。第二个是添加了border-radius。代码如下。

    /* CSS */

.search{
	--search-height:40px;
	height: var(--search-height);
	width: 318px;
	border-radius: 19px;
	border: 1px solid #8080807d;
  color: grey;
	display: flex;

}

.search input{
	width: 80%;
	height: var(--search-height);
    border: none;
    padding-left: 20px;
    color: grey;
	font-size: 16px;

}

.search input:focus{
	outline: none;
}

.search .search-button{
	width: 20%;
	height: var(--search-height);
	line-height: var(--search-height);
	text-align: center;
	border-left: 1px solid #8080807d;
	cursor: pointer;
}

    <!DOCTYPE html>
  <html>
    <meta charset="utf-8">
    <head>
      <title>Demo测试</title>
      <link rel="stylesheet" href="./test.css">
    </head>
    <body>
      <div class="search">
        <input type="search" placeholder="搜索关键词">
        <div class="search-button">搜</div>
      </div>
    </body>
  </html>

    如上述代码。在对search类进行添加border-radius后就出现缺角的情况。而且是非常明显的。
    在没给search进行添加border-radius的时候是正常的，但是出现添加了以后就出现问题了。刚开始几秒内我还以为是一下默认样式的问题。但是看到搜索框的右边。 并没有被覆盖，这里就启发了我，是不是被input组件给覆盖了？
    那么如何解决呢？又不能把他给去掉吧，然后就想到了，不如直接给input也添加一个border-radius。尝试了一下。

    .search input{
	width: 80%;
	height: var(--search-height);
    border: none;
    padding-left: 20px;
    border-radius: inherit;
    color: grey;
	font-size: 16px;
}

    就这么就成功解决了。
    在这里插入图片描述

  • 您还可以看一下 邱石老师的小程序开发入门课程中的 14-9通过border-radius设置圆角边框小节, 巩固相关知识点