使用border-radius出现缺角的问题

最新推荐文章于 2023-09-13 13:54:37 发布

愿你被这个世界温暖相待

最新推荐文章于 2023-09-13 13:54:37 发布

阅读量4.6k

点赞数 10

分类专栏： # CSS问题总结前端文章标签： css

本文链接：https://blog.csdn.net/qq_43967413/article/details/105280129

版权

前端同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

CSS问题总结

1 篇文章 0 订阅

订阅专栏

使用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;
}

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

愿你被这个世界温暖相待

关注

10
点赞
踩
10

收藏

觉得还不错? 一键收藏
2
评论
使用border-radius出现缺角的问题

一个关于border-radius方面 BUG手鲁了一个简单的搜索框：因为需要用到输入的功能，所以理所当然想到了input。因为还要添加按钮，所以就用了一个div做了一个button,个人喜欢圆角的边框那就加上了。然后出现了以下的问题。第一个是没有添加border-radius的时候。第二个是添加了border-radius。代码如下。/* CSS */.search{ --...
复制链接

扫一扫

专栏目录