CSS圓角的div

如何使只有一個div一輪一個或或角落？CSS圓角的div

2010-12-13 Moon

警告：沒有任何解決方案迄今提供的作品與IE <= 8 – egrunin 2010-12-13 17:55:57

我不能相信這是不是重複:) – Trufa 2010-12-13 18:04:04

噢......它實際上不是... – Moon 2010-12-14 08:48:26

指定你想要的角落：

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

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

來源

2010-12-13 17:49:17 idlefingers

或者對於三個圓角，圍繞所有角落（'border-radius：15px;'），然後轉彎在你不想要的角落關閉（'border-top-left-radius：0px;'）。 – jball 2010-12-13 17:51:37

這裏，你可以找到有助於你做它和學習的好資源。

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半徑，很容易用我推薦的工具完成。

BTW：千萬不要錯過idlefingers'回答，非常好的資源！

參見：Creating rounded corners using CSS

來源

2010-12-13 17:50:13 Trufa

+1：http://css3generator.com/也很有用。 – joksnet 2010-12-13 17:51:22

@joksnet我其實不知道它，但它看起來很棒！我會放手一搏！ – Trufa 2010-12-13 17:53:11

同時檢查egrunin的答案，如果您想查看其他可能更加兼容的選項，則會給出選項。 – Trufa 2010-12-13 18:03:30

-1

其他的答案中沒有與IE8的工作，所以這裏的用許多可能的解決方案的鏈接：

DevWebPro

來源

2010-12-13 17:59:20 egrunin

你打敗了我！ :) – Trufa 2010-12-13 18:01:46

@Akinator：我選擇了先到先服務的基礎...仍然很多lotta lotta感謝代碼... – Moon 2010-12-14 08:51:21

@Juenid Saeed沒問題！很高興幫助，我認爲你做出了正確的選擇！ :) – Trufa 2010-12-14 11:51:49

使用邊界半徑的

border-radius:5px;

furt她Link

來源

2016-08-10 13:16:59

CSS圓角的div

回答

相關問題