How can I make div rounded corners with transparent background?

问题

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.

回答1:

for a simple Radius, use this 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

回答2:

For full control over which elements are transparent and which are not, specify colors in rgba instead of 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*/
}

The fourth number within rgba is the level of transparency (alpha channel), 1 represents fully opaque and 0 is fully transparent.

回答3:

Using 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/

来源：https://stackoverflow.com/questions/4855348/how-can-i-make-div-rounded-corners-with-transparent-background