CSS 如何制作具有透明背景的 div 圆角？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4855348/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I make div rounded corners with transparent background?
提问by Yesterday
How can I create a div with rounded corners and transparent backgrounds? A bit like twitter does. So that at the edge of the corners you can see the page background and not a black edge.
如何创建带有圆角和透明背景的 div？有点像推特。这样您就可以在角落的边缘看到页面背景而不是黑色边缘。
回答by Chugworth
for a simple Radius, use this CSS:
对于简单的半径，请使用此 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
格里兹，楚吉
回答by methodofaction
For full control over which elements are transparent and which are not, specify colors in rgba instead of hex:
要完全控制哪些元素是透明的，哪些不是，请在 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*/
}
The fourth number within rgba is the level of transparency (alpha channel), 1 represents fully opaque and 0 is fully transparent.
rgba 中的第四个数字是透明度（alpha 通道），1 表示完全不透明，0 表示完全透明。
回答by Gregg B
Using css3:
使用 css3：
#divid {
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
}
You can read more about it here: http://www.css3.info/preview/rounded-border/
您可以在此处阅读更多相关信息：http: //www.css3.info/preview/rounded-border/
