如何使用透明背景制作带圆角的 div？

Question

我该如何创建一个带有圆角和透明背景的div呢？就像Twitter那样。这样在边角处，你可以看到页面背景而不是黑色边缘。

- Yesterday

---

可能是使用CSS创建圆角的最佳方法是什么？的重复问题。 - user229044

@Daniel，那个问题特别是关于使用JavaScript的，并且最佳答案是一个jQuery库。这不是那个问题的重复。 - user229044

@meagar 好的，你说得对 - 我错过了标签 - 我以为楼主在寻找任何方法来做到这一点。评论已删除。 - Daniel

Answer 1

如果要创建简单的半径效果，可以使用以下CSS：

div{
-moz-border-radius:10px;  /* for Firefox */
-webkit-border-radius:10px; /* for Webkit-Browsers */
border-radius:10px; /* regular */
opacity:0.5; /* Transparent Background 50% */
}

嗨，Greez，Chuggi

- Chugworth

---

RGBA是他在谈论Twitter时提到的内容。不透明度会使div中的所有内容变为50%的透明度，而RGBA只会淡化他想要的部分。 - android.nick

Answer 2

为了完全控制哪些元素是透明的，哪些不是，可以使用rgba而不是十六进制颜色来指定颜色：

div{
  -moz-border-radius:10px;
  -webkit-border-radius:10px;
  border-radius:10px;
  background: #fff; /* fallback for browsers that don't understand rgba */
  border: solid 10px #000; /* fallback for browsers that don't understand rgba */
  background-color: rgba(255,255,255,0.8); /* slighly transparent white */
  border-color: rgba(0,0,0,0.2); /*Very transparent black*/
}

RGBA中的第四个数值代表透明度（α通道），1表示完全不透明，0表示完全透明。

- methodofaction

---

最后一个属性，'border-color'，是正确的吗？还是应该只是像'border-color: rgba(0,0,0,0.2)'这样的rgba颜色？ - Ivan

Answer 3

使用CSS3：

#divid {
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
} 

您可以在这里阅读更多相关信息：http://www.css3.info/preview/rounded-border/。

- Gregg B

---

删除了我的评论，我在想其他的事情。 - drudge