Мы научим вас зарабатывать, только проверенные способы.
Создание круглых уголков рамки при помощи Css и Html без изображений
Недавно при разработки сайта столкнулся с такой проблемой, как создать рамку со скругленными уголками без изображений. Рамка типа,
border: 1px solid black;
не устраивала.С изображениями гораздо больше вариантов создать рамку, но мне была нужна рамка не фиксированных размеров и без изображений.
На одном из иностранных сайтов нашел подходящее рещение.
Создаем пустой файл с расширением .html и копируем в него следующий код
<link rel="stylesheet" href="1.css" type="text/css" media="screen" /> <div id="newsb1"><b class="newsb1"></b><b class="newsb2"></b><b class="newsb3"></b><b class="newsb4"></b> <div class="newscontentb"> <div>Пример рамки толщиной 1px с круглыми углами нефиксированного размера.<br /> <a href="index.php">Ссылка на страницу</a></div> </div> <b class="newsb4"></b><b class="newsb3"></b><b class="newsb2"></b><b class="newsb1"></b></div>
А в файл css копируем следующий код
.newsb1, .newsb2, .newsb3, .newsb4{font-size:1px; overflow:hidden; display:block;} .newsb1 {height:1px; background:#cacaca; margin:0 5px;} .newsb2 {height:1px; background:#fff; border-right:2px solid #cacaca; border-left:2px solid #cacaca; margin:0 3px;} .newsb3 {height:1px; background:#fff; border-right:1px solid #cacaca; border-left:1px solid #cacaca; margin:0 2px;} .newsb4 {height:2px; background:#fff; border-right:1px solid #cacaca; border-left:1px solid #cacaca; margin:0 1px;} .newscontentb {background: #fff; border-right:1px solid #cacaca; border-left:1px solid #cacaca;} .newscontentb div {margin-left: 10px;}
Пример того как работает данный код
При помощи атрибутов margin мы задаем отступы справа и слева.
Цвет рамки задается после указание ее толщины border-right:2px solid #cacaca,
где #cacaca - нужный нам цвет, и так для всех 4-х элементов.
Цвет фона можно задать атрибутом background, в нашем случае он белый.
В итоге мы получим примерно такую рамку:
<< Еще статьи
Навигация
