我有一个问题,但不完全是边界半径,但我不知道如何解释,但我放了2个图像,如chrome,firefox等,以及IE9及更早版本中看到的另一个图像。
CHROME和其他浏览器
IE9及更早版本
似乎尽管应用了border-radius,仍然显示那些角落。
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;
}
应该是什么?
答案 0 :(得分:1)
您正在使用IE过滤器将渐变应用于元素。不幸的是,这些过滤器不会被border-radius
剪裁,因为它们没有在框的背景上绘制,无论您是将border-radius
应用于相同的元素还是其容器。
如果您需要应用渐变背景,最好的办法是使用背景图像。如果您只需要支持IE9,请抛弃过滤器并保留SVG背景图像。
答案 1 :(得分:0)
尝试使用border-radius,你需要核心,而不仅仅是针对firefox和webkite,否则是因为那些早期的浏览器不支持边框半径,或者你没有使用正确的前缀, - ms- for microsoft
答案 2 :(得分:0)
问题在于您将圆角应用于a
元素,但是将背景颜色分配给基础li
元素。所以你有一个圆角矩形坐在一个带有彩色背景的非圆角矩形的顶部。因此,非圆角矩形的角落伸出。
比较这两个小提琴:
破碎:http://jsfiddle.net/87R5b/2/ 修正:http://jsfiddle.net/87R5b/3/
在第二个中,我将黄色渐变应用于a
元素。这只是一种可能的解决方案,但它应该适合你。
希望这有帮助!