Question

我在div里面有一个div。如果你看左上角和右上角，你会发现div的曲线周围有一条细线变色，也就是说，它不是背景颜色。那微小的小弯曲的条子。是什么造成的？

无论如何要解决这个问题而不必删除边界半径？

css如下

  .sub-area-title
{
     background-image: linear-gradient(to bottom, #636363 0%, #323232 100%);

     border-bottom: 1px solid #cccccc;
    background-color: white;
    margin: 0 auto;
    color: white;
    font-size: 18px;
    font-weight: bold;
    padding:10px 75px 10px 75px;
    text-align:center;
    z-index:1000;
}

.sub-area-container
{
    display: inline-block;
    width: auto;
    min-width: 450px;
    background-color: white;
    min-height:100px;
    max-height: 400px;
    /*display:inline-block;*/
    margin: 0px 15px 35px 15px;
    border-left: 2px solid #6E6E6E;
    border-right:2px solid #6E6E6E;
    border-bottom:2px solid #6E6E6E;
    border-top:2px solid #6E6E6E;
    box-shadow: 0px 2px 12px #888888;
    border-radius: 10px;
    /*border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;*/
    max-height: 300px;
    overflow-y: auto;
    z-index: 1;
}

注意：我主要关注的是IE9 +。在这种特殊情况下，Chrome和Firefox以及其他所有内容都无关紧要

Answer 1

这是.sub-area-container的背景颜色（改变它看看），解决这个问题的一种方法就是在这个容器中添加一个插入框阴影：

box-shadow: 0px 2px 12px #888888, inset 0px 5px 0 #000;

<强> DEMO

您可以删除正文标记

Answer 2

如果您不想使用图片，可以尝试在标题下填充容器的背景颜色。

只需用填充容器顶部10px的渐变来替换白色背景。

这样的东西应该适用于IE：

.sub-area-title
{
    background-image: linear-gradient(to bottom, #636363 0%, #323232 100%);
    border-bottom: 1px solid #cccccc;
    background-color: white;
    margin: 0 auto;
    color: white;
    font-size: 18px;
    font-weight: bold;
    padding:10px 75px 10px 75px;
    text-align:center;
    z-index:1000;
}

.sub-area-container
{
    display: inline-block;
    width: auto;
    min-width: 450px;
    background: -ms-linear-gradient(top, #636363 10px, #ffffff 11px, #ffffff 100%);
    min-height:100px;
    max-height: 400px;
    /*display:inline-block;*/
    margin: 0px 15px 35px 15px;
    border-left: 2px solid #6E6E6E;
    border-right:2px solid #6E6E6E;
    border-bottom:2px solid #6E6E6E;
    border-top:2px solid #6E6E6E;
    box-shadow: 0px 2px 12px #888888;
    border-radius: 10px;
    /*border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;*/
    max-height: 300px;
    overflow-y: auto;
    z-index: 1;
}

圆角与背景图像变色

2 个答案: