Двойная рамка

Vlad · September 17, 2011

Есть пустой div фиксированного размера с фоновой заливкой. Вокруг него надо сделать две рамки, допустим, красного и синего цвета. Можно ли обойтись только одним div в этом случае и без after и before?

Nekromancer · September 17, 2011

http://jsfiddle.net/LYDeJ/

Вот такой вот странный способ.

П.С. Ещё Оксана в одной теме писала про свойства для Моз браузеров где можно задавать начальный и конечные цвета бордера/тени.

Vlad · September 17, 2011

Придумал более простое и универсальное решение, border+outline. Работает во всех браузерах, за исключением IE6-7.

Nekromancer · September 17, 2011

Придумал более простое и универсальное решение, border+outline. Работает во всех браузерах, за исключением IE6-7.

Да, так лучше. Тогда через box-shadow можно третью сделать http://jsfiddle.net/LYDeJ/1/.

Vlad · September 17, 2011

box-shadow можно несколько раз накладывать, так что три тени делаются одной строкой.

box-shadow: 0 0 0 5px red, 0 0 0 10px green, 0 0 0 15px yellow;

Nekromancer · September 17, 2011

Ну из моего первого варианта это тоже следует. Там тоже самое только две. Просто добавил дополнительную возможность к твоему способу.

Vlad · September 18, 2011

У outline в Опере выявилось неприятное свойство, оно накладывается поверх других элементов, если они есть. Есть способ побороть этот браузер?

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Квадраты</title>
		<style>
			.black {
				width: 50px;
				height: 50px;
				background: black;
				border: 1px solid white;
				outline: 1px solid #ccc;
			}
			.white {
				width: 50px;
				height: 50px;
				background: #fff;
				border: 1px solid #ccc;
				position: relative;
				left: 25px;
				top: -25px;
			}
		</style>
	</head>
	<body>
		<div class="black"></div>
		<div class="white"></div>
	</body>
</html>

psywalker · September 18, 2011

Хм...интересный баг :unsure: Самое интересное, что эта сволочь ни в какую не хочет убираться. Слушай, а что если для опер и подобных делать с тенями рамку, а для ИЕ8 на оутлайне?

Или у тебя уже принципиально с аутлайном нужно?

Nekromancer · September 18, 2011

psywalker, таки я тоже другого выхода не нашёл. Таки специально для оперы можно и тень.

psywalker · September 18, 2011

psywalker, таки я тоже другого выхода не нашёл. Таки специально для оперы можно и тень.

Ну да, можно и спецом. для оперы, раз она такая капризная)

Vlad · September 18, 2011

Нет, мне не принципиально outline, решил, что может чего упустил и баг обойти можно. Вообще, два решения других уже добавили в камментах. Мне вот это понравилось.

http://htmlbook.ru/practical/kvadraty#comment-313861941

Nekromancer · September 18, 2011

О, ну то с base64 можно почти к любому делу подойти и заменять всё картинкой. По моему это немного не то. В данном случае когда квадратик 50 пикселов оно конечно подходит так как строка не на много больше если бы всё писалось на css. Но в других случаях уже будет ощутимая разница.

Vlad · September 18, 2011

Это понятно, стоит 50 заменить на 100 и решение уже не годится.

border-image ещё можно использовать!

Nekromancer · September 18, 2011

border-image ещё можно использовать!

Кстати да, тогда и base64 картинку можно использовать.

Shift-Web · September 18, 2011

border-image ещё можно использовать!
Кстати да, тогда и base64 картинку можно использовать.

Единственный минус в том, что для осла это дело надо отдельным пак-файлом с секциями реализовывать.

Edited September 18, 2011 by Shift-Web

Sign In

Двойная рамка

Question

Link to comment

Share on other sites

14 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

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information