鼠标悬停时边界半径在哪里答案

【问题标题】：Where Has The Border Radius Gone on Mouseover鼠标悬停时边界半径在哪里
【发布时间】：2015-12-18 21:00:22
【问题描述】：

我正在制作一个菜单选择栏，当我将鼠标悬停时遇到了问题。图标的角都应该是弯曲的，但只有左侧的角是弯曲的。这是代码的演示：https://jsfiddle.net/gfqgcwq5/

据我所知，inline-block 似乎是罪魁祸首：

.wrapper{
    display:inline-block;
    margin:10px;
}

我只是不知道如何在没有它的情况下完成内联数组。我不擅长 css，所以如果有人能帮我一把，我将不胜感激。

【问题讨论】：

在我机器的浏览器 (firefox) 上运行...
在 .wrapper 上尝试 display: inline-table;，似乎是 chrome 的解决方案（Linux 上的版本 47.0.2526.73（64 位））。

标签： html css

【解决方案1】：

试试这个：

.icon{
        border-radius:8px;
        padding-top:15px;
        padding-bottom:5px;
        transition:.1s;
        font-size:60px; 
    display: inline-table;
    }

    .icon:hover{ 
        cursor:pointer;
        background-color: #00B1EB;
        color:#fff;

    }

    span#picture > span {
        padding-right:9px;
        padding-left:10px;
        padding-top:7px;
        padding-bottom:10px;
    }


    .text{
        text-align:center;
    }

    .wrapper{
        display:inline-block;margin:10px;
    }

DEMO HERE

【讨论】：

【解决方案2】：

习惯了

定义你的.icon display inline-block

像这样

.icon{display:inline-block;line-height:60px;}

或者你可以习惯

.icon{display:block;}

Demo

【讨论】：

【解决方案3】：

请记住，border-radius 是 .icon 类的一个属性（在这种情况下），如果您使用检查器，您会看到包装器具有正确的大小和形状wraper

因此，正如另一个人所说，问题出在 .icon 类的显示上，如果您的想法是在包装器和内联中包含多个 .icon 元素，则应使用 display: inline-block;，如果你的电话是让每个包装器使用 display: block;。希望对您有所帮助。

【讨论】：

【解决方案4】：

你必须给图标块display: inline-block属性才能工作！！

 .icon {
   border-radius: 8px;
   padding: 15px;
   padding-bottom: 5px;
   transition: .5s all ease;
   font-size: 60px;
   display: inline-block;
 }
 .icon:hover {
   cursor: pointer;
   background-color: #00B1EB;
   color: #fff;
 }
 span#picture > span {
   padding-right: 9px;
   padding-left: 10px;
   padding-top: 7px;
   padding-bottom: 10px;
 }
 .text {
   text-align: center;
 }
 .wrapper {
   display: inline-block;
   margin: 10px;
 }

<link href="https://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="wrapper">
  <span id="picture" class="icon"><span class="glyphicon glyphicon-picture"></span></span>
  <div class="text">PICTURES</div>
</div>
<div class="wrapper">
  <span id="picture" class="icon"><span class="glyphicon glyphicon-picture"></span></span>
  <div class="text">PICTURES</div>
</div>
<div class="wrapper">
  <span id="picture" class="icon"><span class="glyphicon glyphicon-picture"></span></span>
  <div class="text">PICTURES</div>
</div>
<div class="wrapper">
  <span id="picture" class="icon"><span class="glyphicon glyphicon-picture"></span></span>
  <div class="text">PICTURES</div>
</div>

【讨论】：

任何块级显示都可以。

【解决方案5】：

为text div 应用填充以使整个曲线可见。

  .text{
    text-align:center;
    padding:0px 7px;
   }

DEMO

【讨论】：