Перейти к содержимому


Партнерская программа Kredov

Как создать блок со скругленными углами

#1 surfer

surfer
  • Заблокированные
  • 1 956 сообщений
  • Репутация: 71
1

Отправлено 09 Август 2009 - 16:04

Предлагаю подборку статей о том как создать блок со скругленными углами:

[url="http://www.masterwebs.ru/go.php?url=http://\"http://vremenno.net/html-css/38-articles-about-creating-rounded-corners/\""]38 статей о создании закругленных углов на сайтах[/url]

далее, обсуждение и готовые решения по этой теме...

Пример 1. Создание блока с закругленными углами без рисунков, чистый CSS.

<!DOCTYPE  HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Скругленные уголки</title>
<style type="text/css">
.r1, .r2, .r3, .r4 {
display: block;
font-size: 0;
height: 1px;
background: #f677c5;
}
.r1 { margin: 0 5px; }
.r2 { margin: 0 3px; }
.r3 { margin: 0 2px; }
.r4 { margin: 0 1px; height: 2px; }
.block-round-content {
background: #f677c5; /* Цвет фона */
padding: 10px; /* Поля вокруг текста */
}
</style>
</head>
<body>
<div class="block-round">

<b class="r1"> </b><b class="r2"> </b><b class="r3"> </b><b class="r4"> </b>
<div class="block-round-content">
Создаем блок со скругленными уголками без рисунков.
</div>
<b class="r4"> </b><b class="r3"> </b><b class="r2"> </b><b class="r1"> </b>
</div>
</body>
</html>

 

 

  • 2

#2 SeoMaster

SeoMaster
  • Пользователь
  • 283 сообщений
  • Репутация: 0

Отправлено 09 Август 2009 - 23:58

sc2r2bey, а я и не знал, что с помощью CSS можно делать округление углов. Теперь код будет чище ;)
  • 0

#3 FaTeRy

FaTeRy
  • Пользователь
  • 480 сообщений
  • Репутация: 1

Отправлено 10 Август 2009 - 01:40

Предлагаю подборку статей о том как создать блок со скругленными углами:

Каждый верстальщик должен это знать)

Теперь код будет чище

Врятли) Вот вес страницы будет меньше - это да.
  • 0

#4 facetus

facetus
  • Пользователь
  • 6 сообщений
  • Репутация: 0

Отправлено 02 Февраль 2010 - 04:24

Спасибочки! Уже переделал под себя, буду юзать...

Кстати, у Вас не задано .block-round...с помощью него я сделал размеры блока с углами...


Я немного модернезировал с целью использования уголков для блоков меню, если кому-то надо и кто-то разбереться:

<!DOCTYPE  HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Скругленные уголки для блоков меню</title>
<style type="text/css">
.block-menu {width:200px;} /* Старший родитель, для всего содержимого */
.r{position:absolute;margin-left:14px;} /* Родитель для заголовка блока */
.r1,.r2,.r3,.r4,.r5{height:1px;background:silver;}
.r1{margin: 0 5px;}
.r2{margin: 0 3px;}
.r3{margin: 0 2px;}
.r4{margin: 0 1px;height:2px;}
.r5 {margin: 0 0;height:16px;} /* Здесь можно поиграться с height */
</style>
</head>
<body>
<div class="block-menu">
<div class="r">Разделы proxymania</div>
<div class="r1"> </div>
<div class="r2"> </div>
<div class="r3"> </div>
<div class="r4"> </div>
<div class="r5"> </div>
<ul>
<li><a href="#">Ссылка номер раз</a></li>
<li><a href="#">Ссылка номер два</a></li>
<li><a href="#">Ссылка номер три</a></li>
</ul>
</div>
</body>
</html>

  • 0

#5 surfer

surfer
    Topic Starter
  • Заблокированные
  • 1 956 сообщений
  • Репутация: 71

Отправлено 11 Март 2010 - 14:47

вот нашел интересное кроссбраузерное решение http://www.curvycorners.net/
  • 0

#6 ZiTosS

ZiTosS
  • Пользователь
  • 5 148 сообщений
  • Репутация: 8

Отправлено 11 Март 2010 - 20:32

sc2r2bey,

If you're viewing this page in Firefox, Safari or Google Chrome you will notice that all the boxes on this page have lovely rounded corners. The rounded corners on this page are rendered by the browser using the browser's native CSS3 border-radius implementation.

If you're viewing this page in Internet Explorer or Opera you will see that all the boxes have square corners. This is because IE and Opera don't support CSS3 border-radius.

IE and Opera viewers click the button below and CurvyCorners will run, filling the gap in browser support.

Говоришь кроссбраузерный? Кроссбраузерность за счет скрипта :P Или я не прав?
  • 0

#7 surfer

surfer
    Topic Starter
  • Заблокированные
  • 1 956 сообщений
  • Репутация: 71

Отправлено 11 Март 2010 - 21:30

да за счет скрипта
  • 0

#8 andreykashops

andreykashops
  • Пользователь
  • 74 сообщений
  • Репутация: 12

Отправлено 14 Май 2013 - 08:55

А не проще просто прописать свойство
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
?
  • 0

#9 isvetlichniy

isvetlichniy
  • Пользователь
  • 619 сообщений
  • Репутация: 93

Отправлено 14 Май 2013 - 11:24

А не проще просто прописать свойство

сегодня конечно проще
мил человек, посмотри на дату создания темы :D
  • 0

#10 narolskay

narolskay
  • Пользователь
  • 657 сообщений
  • Репутация: 25

Отправлено 14 Май 2013 - 15:19

Интересно, а в вордпресс, можно в файле css переделать закругленные углы у сайта?
  • 0

Ищете хостинг?  Beget.ru - месяц бесплатного тестирования, бесплатный перенос сайта!

 



robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85


Оформление форума – IPBSkins.ru