rgba + border-radius ( IE )

GeSTaM · February 2, 2011

Столкнулся с такой проблемой:

Нужно сделать блок с полупрозрачным фоном и закругленными углами, везде все хорошо кроме IE( <_< )...

Блок делал таким образом:

#box {
	width: 100px;
	height: 100px;
	position: relative;

	background: rgba(0, 0, 0, 0.08);

	border-radius: 15px;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	-khtml-border-radius: 15px; 
	behavior: url(/PIE.htc);
}

для прозрачности в IE в <head> добавил:

<!--[if IE]>
	<style type="text/css">
		 #box {
			background:transparent;
			filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#10000000,endColorstr=#10000000);
			zoom: 1;
		} 
	</style>
<![endif]-->

В итоге во всех браузерах все нормально но в IE углы не закругляются, точнее закругляюца (если добавить border: 1px solid #ff0000; это видно) но также остаются и квадратные углы:

кто ни будь сталкивался с подобным? как решить проблему?

Edited February 3, 2011 by GeSTaM

Vlad · February 2, 2011

Эта проблема не решается просто. Как вариант для IE градиент сделать рисунком и вставить фоном.

GeSTaM · February 2, 2011

Эта проблема не решается просто. Как вариант для IE градиент сделать рисунком и вставить фоном.

я уже так и сделал просто картинкой, но если бы нельзя было заменить картинкой, допустим выподающее меню и 2 уровень у нас на плашке и за ней идет картинка и 2 уровень должен быть для эффекта полупрозрачным. что в таком случае делать?

на будущее хотел бы узнать как решить такую проблему =)

psywalker · February 2, 2011

А покажи скриншот, что должно получиться в идеале.

GeSTaM · February 2, 2011

А покажи скриншот, что должно получиться в идеале.

В идеале должно быть так:

И этот блок должен быть:

#box {
	background: rgba(0,0,0,0.08);
	border-radius: 15px;
}

Но rgba + border-radius в IE не дают нужного результата!

Edited February 2, 2011 by GeSTaM

psywalker · February 2, 2011

А что это за картинки слева и сверху в блоке? Как они влияют на фон и откуда берётся вырез? И какого цвета должен быть вырез?

GeSTaM · February 3, 2011

А что это за картинки слева и сверху в блоке? Как они влияют на фон и откуда берётся вырез? И какого цвета должен быть вырез?

картинка слева и сверху не причем, с ними все просто. проблема только с основным блоком свойства которого я уже описал в 1 посте.

psywalker · February 3, 2011

А что мешает сделать обычным способом, в три дива?

GeSTaM · February 3, 2011

А что мешает сделать обычным способом, в три дива?

Зачем 3 дива?

Верхний с углами нижний с углами и центр?? для чего если есть border-radius: ?

Да и вопрос был не в том как сделать такой блок, вариантов то масса, и проблема была решена за пару минут.

Вопрос в том есть ли решение для IE rgba+border-radius.

psywalker · February 3, 2011

для чего если есть border-radius: ?

Вот вы как заговорили все, а раньше между прочим такого вообще не было и люди верстали и жили нормально <_<

Да и вопрос был не в том как сделать такой блок, вариантов то масса, и проблема была решена за пару минут.

Хорошо, я понял. Попробую повозиться, когда время будет. Если что нибудь сделаю, сообщу.

Great Rash · February 3, 2011

Блок по ширине резиновый или фикс?

psywalker · February 3, 2011

Блок по ширине резиновый или фикс?

Уже не суть, кажется я решил <_<

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title></title>
<style type="text/css">
	body { margin: 0;}

	#head {

		width: 960px; 
		height: 242px;
		-moz-border-radius: 10px;
		border-radius: 15px;
		background-image: -moz-linear-gradient( left,#cac7c0, #e5e5e5 50%,#c9c6bf 100%);

		-pie-background: linear-gradient(left,#cac7c0, #e5e5e5 50%,#c9c6bf 100%);

		behavior: url(PIE.htc);


	}
</style>

	</head>
<body>


	<div id="head">

	</div>


</body>
</html>

Great Rash · February 3, 2011

А где прозрачность то?

psywalker · February 3, 2011

А где прозрачность то?

Аа, понял, ну попробуйте вот так

		width: 960px; 
		height: 242px;
		-moz-border-radius: 10px;
		border-radius: 15px;
		-moz-background: rgba(255, 255, 255, 0.8);
		background-image: -moz-linear-gradient( left,#cac7c0, #e5e5e5 50%,#c9c6bf 100%);



-pie-background: rgba(0, 0, 0, 0.1);
		behavior: url(PIE.htc);

Sign In

rgba + border-radius ( IE )

Question

Link to comment

Share on other sites

13 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information