Question

如何创建圆角和透明背景的div？有点像推特。因此，在角落的边缘，您可以看到页面背景而不是黑色边缘。

Answer 1

对于简单的Radius，请使用此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

Answer 2

要完全控制哪些元素是透明的，哪些元素不透明，请在rgba而不是hex中指定颜色：

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中的第四个数字是透明度（alpha通道），1表示完全不透明，0表示完全透明。

Answer 3

使用css3：

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

您可以在此处详细了解：http://www.css3.info/preview/rounded-border/

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

3 个答案: