0

我有一个问题，但不完全是边界半径，但我不知道如何解释，但我放了 2 张在 chrome、firefox 等中看到的图像，以及在 IE9 和更早版本中看到的另一张图像。

CHROME 和其他浏览器

在此处输入图像描述

IE9 及更早版本

在此处输入图像描述

似乎尽管应用了边界半径，但仍然显示那些角落。

aside#sidebar ul {
    margin-top: 15px;
    width: 100%;
    height: 200px;
    background: transparent;
}
aside#sidebar ul li {
    font-size: 14px;
    list-style-type: none;
    margin-bottom: 5px;
    background: transparent;
    //border: 3px solid white;
}
aside#sidebar ul li a {
    display: block;
    padding: 5px;
    color: white;
    border-left: 10px solid white;
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    behavior: url(PIE.htc);
    background: transparent;
}

编辑

这部分有什么关系吗？列表中每个项目使用的背景，这是第一个的背景

aside#sidebar #itemLinea1 {
    //border-color: #DE9E26;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZjZWFiYiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2ZjY2Q0ZCIgc3RvcC1vcGFjaXR5PSIwLjc1Ii8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iI2Y4YjUwMCIgc3RvcC1vcGFjaXR5PSIwLjc1Ii8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmYmRmOTMiIHN0b3Atb3BhY2l0eT0iMC41Ii8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
    background: -moz-linear-gradient(top, rgba(252,234,187,1) 0%, rgba(252,205,77,0.75) 50%, rgba(248,181,0,0.75) 51%, rgba(251,223,147,0.5) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,234,187,1)), color-stop(50%,rgba(252,205,77,0.75)), color-stop(51%,rgba(248,181,0,0.75)), color-stop(100%,rgba(251,223,147,0.5)));
    background: -webkit-linear-gradient(top, rgba(252,234,187,1) 0%,rgba(252,205,77,0.75) 50%,rgba(248,181,0,0.75) 51%,rgba(251,223,147,0.5) 100%);
    background: -o-linear-gradient(top, rgba(252,234,187,1) 0%,rgba(252,205,77,0.75) 50%,rgba(248,181,0,0.75) 51%,rgba(251,223,147,0.5) 100%);
    background: -ms-linear-gradient(top, rgba(252,234,187,1) 0%,rgba(252,205,77,0.75) 50%,rgba(248,181,0,0.75) 51%,rgba(251,223,147,0.5) 100%);
    background: linear-gradient(to bottom, rgba(252,234,187,1) 0%,rgba(252,205,77,0.75) 50%,rgba(248,181,0,0.75) 51%,rgba(251,223,147,0.5) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fceabb', endColorstr='#80fbdf93',GradientType=0 );
    transition: border 0.3s linear;
    -webkit-transition: border 0.3s linear;
    -moz-transition: border 0.3s linear;
    -o-transition: border 0.3s linear;
}

应该在什么位置？

4

3 回答 3

1

您正在使用 IE 过滤器将渐变应用到您的元素。不幸的是，这些过滤器不会被剪裁，border-radius因为它们没有绘制在框的背景上，无论您是应用于border-radius相同的元素还是它们的容器。

如果您需要应用渐变背景，最好的办法是使用背景图像。如果你只需要支持 IE9，就去掉滤镜，保留 SVG 背景图片。

于 2012-08-02T20:33:31.437 回答
0

尝试只使用border-radius，你需要核心的，而不仅仅是针对firefox和webkite，否则是因为那些早期的浏览器要么不支持border-radius，要么你没有使用正确的前缀，-ms- for微软

于 2012-08-02T20:13:14.533 回答
0

问题是您正在对元素应用圆角a，但将背景颜色分配给底层li元素。所以你有一个圆角矩形，它位于一个带有彩色背景的非圆角矩形之上。因此，非圆角矩形的角突出。

比较这两个小提琴：

损坏： http: //jsfiddle.net/87R5b/2/ 修复：http: //jsfiddle.net/87R5b/3/

在第二个中，我将黄色渐变应用于a元素。这只是一种可能的解决方案，但它应该适合你。

希望这可以帮助！

于 2012-08-02T20:33:41.550 回答