Как я могу сделать div закругленные углы с прозрачным фоном? - PullRequest
Новая
       23

Как я могу сделать div закругленные углы с прозрачным фоном?

6 голосов
/ 31 января 2011

Как мне создать div с закругленными углами и прозрачным фоном?Немного похоже на твиттер.Так что по краям углов виден фон страницы, а не черный край.

Ответы [ 3 ]

8 голосов
/ 31 января 2011

для простого Радиуса, используйте этот 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

8 голосов
/ 31 января 2011

Для полного контроля над тем, какие элементы являются прозрачными, а какие нет, укажите цвета в 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 - полностью прозрачный.

1 голос
/ 31 января 2011

Использование css3: 

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

Подробнее об этом можно прочитать здесь: http://www.css3.info/preview/rounded-border/

...