我有 a rectangle,对角线的每一边都有自己的颜色

div {
    width: 0;
    height: 0;    
    border-left: 150px solid green;
    border-top: 100px solid gray;
}

现在我想为div添加一个border-radius,但后来我发现除了左下角之外,这对所有边都有效.

所以,如果我添加：

border-radius: 10px 10px 10px 0;

我得到@L_301_1@：

..但是一旦我添加了一个左下边界半径,我得到this：

1)为什么会这样？

2)有一个简单的解决方案吗？

编辑：

我正在使用Chrome,但我只是看了一个火狐和IE,结果不同！

火狐：

IE 11

这是怎么回事？

尝试添加包装容器：

<div>
    <div></div>
</div>

这种风格：

.wrap {
    display: inline-block;
    overflow: hidden;
    border-radius: 10px;
}

溢出：隐藏;应该做的伎俩.

演示：http://jsfiddle.net/dfsq/9xDVj/8/

我想用CSS创建漂亮的圆形边框.我知道以下CSS样式：

border-radius
-webkit-border-radius
-moz-border-radius

哪种款式最好用？

/* Gecko browsers */
-moz-border-radius: 5px; 
/* Webkit browsers */
-webkit-border-radius: 5px; 
/* W3C Syntax - likely to be standard so use for future proofing */
border-radius: 5px;

Internet Explorer 6& 7和8(据我所知)和Opera不支持圆角.相反,这些用户将看到一个常规角落.

您可以开始使用Firefox和任何“Mozilla”系列浏览器. Apple的WebKit网络浏览器引擎还支持圆角,可在Safari和Chrome网络浏览器,iPhone和其他运行WebKit的设备上使用.

您的问题的详细答案在这里

http://shapeshed.com/journal/css3_tour_border-radius/

并为IE使用这些解决方案
http://woork.blogspot.com/2009/08/css3-rounded-corners-for-every-browser.html

http://www.css3.info/a-border-radius-solution/

在这里看到一些关于角落的更酷信息
http://www.the-art-of-web.com/css/border-radius/

据我所知,“em”测量是font-size的相对单位,相对于包含元素的字体大小,如果它以px等绝对单位指定,或者是浏览器中的默认字体大小.

但是我试图理解如何使用em作为盒子元素的边界半径的测量,就像div一样.我假设它与如何使用em作为盒子宽度或高度的测量工作有关.

它仍然与font-size有关吗？具体来说,它是如何衡量的？关于如何计算border-radius的解释似乎都是基于px单位的.

我可能会误解你的问题,但我认为它的作用是这样的.如果字体大小为12px并且您创建一个边框半径为1em的框,则它的边框半径为12px(如果为13px,则为13px).如果您需要框的边框半径与文本保持相同的比例(无论文本大小如何),这将非常有用.对于瞬间,如果你有一个包含文字的方框,请说：

<style>
  // lets say the browser gives the text a default size of 16px on a pc
  .Box {border-radius:5px}// lets say the Box's size scales with the text
</style>

看起来盒子几乎完全是圆角.但是让我们说在iPhone上,它给文本默认大小为80px(夸张),看起来好像盒子有几乎平坦的角落.解决方案是让盒子的角落与使用em的文本缩放.

看到< div>元素正确渲染border / border-radius,但是任何< a>或< button>具有背景,边框和边框半径设置将背景颜色或图像显示为正方形,只有边框是圆形的.尝试设置< a> &安培; <按钮>显示：block或display：inline-block但是没有工作.

有没有已知的解决方法？

这是一个从Webkit：https://gist.github.com/773719计算的样式的链接

以下是IE9开发工具的计算风格：

更新
使用过滤器：或-ms-filter：在IE中具有渐变的属性使背景突破了定义的border-radius.

我发现这个优秀的博客文章显示了如何使用SVG渐变精灵来解决这个特殊问题： http://abouthalf.com/2010/10/25/internet-explorer-9-gradients-with-rounded-corners/

参见英文答案 > Invert rounded corner in CSS?10个
当我想到为我的链接制作标签(或标签)时,我正在研究我网站的CSS.我在这个例子中删除了文本,但这基本上是一个导航栏.这是图片：

我的问题是,如何在BLACK箭头指向并且看起来像蓝色箭头指向的效果时获得’border-radius’-ish效果？是否有某个webkit命令可以帮助我,或者我应该将其设为img或jquery？

万分感谢！(我画了一些漂亮的箭头,对吧？)

不使用原生border-radius.正如在MDN “Negative values are invalid”上提到的那样.你肯定可以在那里寻找一个自动执行此操作的库(尽管我发现Philip建议的库中采用的方法特别过时).

Using pure CSS I have come up with an approach.想法是在容器内添加4个额外元素,并将它们放置在元素本身之外.然后我们应用border-radius来产生影响：

#main {
    margin: 40px;
    height: 100px;
    background-color: #004C80;
    position: relative;
    overflow: hidden;
}

#main div {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 100%;
    background-color: #FFF;
}

.top { top: -10px; }
.bottom { bottom: -10px; }
.left { left: -10px; }
.right { right: -10px; }

<div id="main">
    <div></div>
    <div></div>
    <divhttps://www.jb51.cc/tag/ott/" target="_blank">ottom left"></div>
    <divhttps://www.jb51.cc/tag/ott/" target="_blank">ottom right"></div>
</div>