Question

我的CSS：

.ConnectionBox:hover
{
    background-color: rgba(255, 255, 255, 0.7);
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    border: #solid 5px #000;
}

我的HTML：

<div class="ConnectionBox" style="width:600px;height:350px;font-size: 12px; padding-left: 5px; white-space: pre-wrap; word-break: break-all; word-wrap: break-word;border-radius: 5px;border:1px solid #000; overflow-y: auto; text-align: left;">
Blablabla
Blablabla
Blablabla
</div>

边框在右侧被切断（查看右上方和右下方），这里是jsfiddle链接，我该如何解决？

Answer 1

试试这个：

screen

HTML：

<div class="ConnectionBox">
    <div class="box-content">
        <ul>
            <li>CPU Model : MIPS 24Kc V7.4</li>
            <li>CPU Model : MIPS 24Kc V7.4</li>
            <li>CPU Model : MIPS 24Kc V7.4</li>
            <li>CPU Model : MIPS 24Kc V7.4</li>
            <li>CPU Model : MIPS 24Kc V7.4</li>
            <li>CPU Model : MIPS 24Kc V7.4</li>
            <li>CPU Model : MIPS 24Kc V7.4</li>
            <li>CPU Model : MIPS 24Kc V7.4</li>
            <li>CPU Model : MIPS 24Kc V7.4</li>
            <li>CPU Model : MIPS 24Kc V7.4</li>
            <li>CPU Model : MIPS 24Kc V7.4</li>
            <li>CPU Model : MIPS 24Kc V7.4</li>
            <li>CPU Model : MIPS 24Kc V7.4</li>
            <li>CPU Model : MIPS 24Kc V7.4</li>
            <li>CPU Model : MIPS 24Kc V7.4</li>
            <li>CPU Model : MIPS 24Kc V7.4</li>
            <li>CPU Model : MIPS 24Kc V7.4</li>
            <li>CPU Model : MIPS 24Kc V7.4</li>
            <li>CPU Model : MIPS 24Kc V7.4</li>
            <li>CPU Model : MIPS 24Kc V7.4</li>
            <li>CPU Model : MIPS 24Kc V7.4</li>
        </ul>
    </div>
</div>

CSS：

.ConnectionBox{
      height:300px;
      width:450px;
      border-radius:10px; 
      border:2px solid #666;
      padding:6px 0px;
      background:#ccc;
    }

    .box-content{
      height:300px;
      width:450px;
      overflow:auto;
      border-radius:8px;
    }

Answer 2

使用滚动条向容器添加一些填充。填充的值至少应该是您给出的border-radius。这样，您可以确保所有内容都不会与要舍入的边框重叠。

话虽如此，我无法保证此功能适用于所有浏览器，因为滚动条是浏览器镶边并且不会受CSS影响。

例如：

.element {
  padding: 10px;
  border-radius: 10px;
}

CSS：边框被滚动条切断

2 个答案: