CSS Rounded Corner Divs

时间:2010-12-13 17:47:55

标签: css css3 rounded-corners

如何只在div轮中只有一个两个三个角落?

4 个答案:

答案 0 :(得分:13)

指定所需的角落:

border-top-left-radius: 10px 5px;
border-bottom-right-radius: 10% 5%;
border-top-right-radius: 10px;

http://www.css3.info/preview/rounded-border/

答案 1 :(得分:4)

这是一个很好的资源,你可以找到帮助你做和学习。

http://borderradius.com/

祝你好运!

很好地回答你的问题(除了工具):

一角(左上角):

-webkit-border-top-left-radius: 10px;
-moz-border-radius-topleft: 10px;
border-top-left-radius: 10px;

两个角(左上角和右上角):

-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;

三个角(左上角和右上角以及右下角)

-webkit-border-radius: 10px;
-webkit-border-bottom-left-radius: 0;
-moz-border-radius: 10px;
-moz-border-radius-bottomleft: 0;
border-radius: 10px;
border-bottom-left-radius: 0;

等等......

所有10px半径,使用我推荐的工具非常容易完成。

顺便说一句:不要错过idlefingers'答案,非常好的资源!!

另请参阅:Creating rounded corners using CSS

答案 2 :(得分:0)

使用border-radius

border-radius:5px;

进一步Link

答案 3 :(得分:-1)

其他答案都不适用于IE8,所以这里有许多可能解决方案的链接:

DevWebPro