Jump to content
«ПЛАНАР-СИТИ»
  • Announcements

    • DVN

      Борьба за Авторское право

      Предупреждаю всех и сразу, чтобы потом не было обид и обиженных. Согласно п.4.2.3 Правил форума с 13.03.2007 года все посты содержащие разного рода статьи, стихи, рассказы, обзоры и рецензии и т.д., и т.п. БЕЗ УКАЗАНИЯ копирайта будут сразу же удаляться в Корзину.
    • DVN

      Борьба за Авторское право-2

      Предупреждаю ЕЩЁ РАЗ, всех и сразу, чтобы потом не было обид и обиженных. Согласно п.4.2.3 Правил форума все посты содержащие разного рода статьи, стихи, рассказы, обзоры и рецензии и т.д., и т.п. БЕЗ УКАЗАНИЯ копирайта (авторства, ссылки на источник, откуда Вы взяли эту информацию) будут сразу же удаляться в Корзину. Если Вы автор представленной информации, так и пишите - © ник
Sign in to follow this  
ЗАРАЗА

CSS3 закруглённые края

Recommended Posts

Пришло время уходить от таблиц и блоков с кучей картинок, иммитирующих закруглённые края.

 

Теперь всё намного проще.

 

Функция: border-radius

 

Описание:

Устанавливает радиус скругления уголков рамки. Если рамка не задана, то скругление также происходит и с фоном.

 

Синтаксис

border-radius: <радиус>{1,4} [ / <радиус>{1,4}]

 

Значения

Разрешается использовать одно, два, три или четыре значения, перечисляя их через пробел (табл. 1). Также допустимо писать два значения через слэш (/). В качестве значений указываются числа в любом допустимом для CSS формате. В случае применения процентов, отсчет ведется относительно ширины блока.

 

Пример:

<!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>border-radius</title>
 <style type="text/css">
  .radius {
background: #f0f0f0; /* Цвет фона */
border: 1px solid black; /* Параметры рамки */
padding: 15px; /* Поля вокруг текста */
margin-bottom: 10px; /* Отступ снизу */
  }
 </style>
</head> 
<body> 
 <div style="border-radius: 50px 0 0 50px;" class="radius">
  border-radius: 50px 0 0 50px;
 </div>
 <div style="border-radius: 40px 10px" class="radius">
  border-radius: 40px 10px;
 </div>
 <div style="border-radius: 10em/1em;" class="radius">
  border-radius: 13em/3em;
 </div>
 <div style="border-radius: 13em 0.5em/1em 0.5em;" class="radius">
  border-radius: 13em 0.5em/1em 0.5em;
 </div>
 <div style="border-radius: 8px;" class="radius">
  border-radius: 8px;
 </div>
</body> 
</html>

 

Результат примера:

css_border-radius_2.png

 

Поддержка в старых браузерах:

Firefox использует нестандартное свойство -moz-border-radius.

Safari использует нестандартное свойство -webkit-border-radius, браузер Chrome также его понимает.

 

Источник: http://htmlbook.ru/css/border-radius

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×