更改圆角为什么是虚线得

header .header-top .tool .r2 {

width: 264px;

height: 30px;

border: 1px solid rgba(202,202,202,0.60);

border-radius: 10px;

}

header .header-top .tool .r2 input {

float: left;

width: 224px;

height: 28px;

border: none;

outline: none;

padding-left: 20px;

}

header .header-top .tool .r2 button {

float: right;

width: 20px;

height: 20px;

background:none;

outline: none;

border: none;

position: relative;

top: 5px;

right: 5px;

cursor: pointer;

}

html小小白 2021-11-24

源自：边框与圆角 2-16 小慕医生项目开发

14

收起

2回答

好帮手慕星星 2021-11-24 16:47:13

同学你好，是因为圆角设置的有点大了。

边框是1px，高度是30px，圆角是10px，弧度有一点大，导致四个角的边框看着有点虚。改变圆角为4px可能会好一些

自己再测试下。

DanielDu87 #1

我想把边框直接设成很圆的圆角应该怎么弄呢，好像需要更改高度才行

2021-12-18 13:46:08
好帮手慕星星回复 DanielDu87 #2

同学你好，其实最主要的是盒子设置为圆角后，input框的角还是直边的，遮盖住了
可以调整输入框宽度，将输入框向右移动一点。例如
祝学习愉快！

2021-12-18 14:25:53

好帮手慕星星 2021-11-24 15:52:39

同学你好，建议将html代码粘贴上来，便于帮助测试。

祝学习愉快~

提问者 html小小白 #1

<body>

<header>
<div class="header-top">

<div class="logo">
<h1>小慕医生</h1>
</div>

<div class="tool">
<div class="r1">
<img class="tel" src="images/tel.png">
<span class="telnumber">088-88888888</span>
<a href=""><img class="chinese_icon icon" src="images/chinese_icon.png"></a>
<a href=""><img class="english_icon icon" src="images/english_icon.png"></a>
</div>
<div class="r2">
<input type="text" placeholder="找医生/科室">
<button>
<img src="images/search.png" alt="">
</button>
</div>
</div>
</div>


<div class="nav">
<ul>
<li class="cur"><a href="">首页</a></li>
<li><a href="">医院概况</a></li>
<li><a href="">医院动态</a></li>
<li><a href="">专家学科</a></li>
<li><a href="">服务指南</a></li>
<li><a href="">医院文化</a></li>
<li><a href="">信息公开</a></li>
<li><a href="">互动交流</a></li>
</ul>
</div>
</header>

<section class="banner">
<img class="banner-img" src="images/banner.png" alt="">
<div class="center">
<h2>责任，科学，严谨</h2>
<a href="" class="left-btn"></a>
<a href="" class="right-btn"></a>
</div>

<ol>
<li class="cur"></li>
<li></li>
<li></li>
<li></li>
</ol>
</section>

2021-11-24 16:31:37

相似问题

左半圆与右半圆应该怎么画

老师，图片圆角的问题

请问老师为什么

图片太小看不清呀，标题栏上面是虚线么？为什么看静态图片的时候是实现，GIF 图却是虚线呢？

虚线箭头和实线箭头代表什么意思

登录后可查看更多问答，登录/注册

前端工程师

参与学习人
提交作业 15697 份
解答问题 17883 个

入行前端，是明智的选择！市场需求大，就业前景好，入行门槛低，小白易上手全新升级:技术更新,Vue3.0/TypeScript/React17.x; 技术更全面,从0基础到全栈开发再到大型项目构建

本课精华内容

问答作业

老师,请问vscode有哪些好用的插件推荐一下...

157 1

老师,API具体是指什么呢?

75 1

老师,这两种情况为什么得到的结果不一样?

31 2

没有思路

201 5

老师给点提示。

155 1

查看更多本课问答

请稍等 ...

意见反馈帮助中心 APP下载