Css закругленные края: Скруглённые уголки | htmlbook.ru

Я разрабатываю веб-сайт и хотел бы, чтобы в строке поиска не было закругленных углов-только типичные прямые углы. По какой-то причине я не могу заставить его работать в google chrome, но когда я…

Как изменить цвет границы текстового поля (при фокусировке и размытии) с помощью прикрепленного к нему расширителя? Я попробовал некоторые JavaScript, которые работали с текстовым полем сами по…

Я использовал меню li. Я использовал радиус границы для закругленных углов. Но это не работает на ie. Мне нужны изменения цвета фона в меню наведения.

У меня есть стиль, который я применяю к ItemContainerStyle из Listview. Он помещает линию поперек нижней части строки и устанавливает высоту строки. Однако по какой — то причине-каждая строка,…

Я пытался придать эффект закругленных углов кнопкам на моем сайте ASP.NET, используя CSS, используя скрипт CSS и .js отсюда….

Теперь, когда CSS3 включает стили для автоматического добавления закругленных углов к изображениям, означает ли это, что добавление закругленных углов к изображениям без CSS должно быть отброшено? Я…

Я пытаюсь оптимизировать свой сайт для скорости. Раньше я использовал изображения для закругленных углов, но теперь я изменил их с помощью правил border-radius и -moz-border-radius css. Какой путь…

Как использовать CSS для создания закругленных углов в IE 8? Поскольку правило CSS corner-radius не работает, есть ли решение для создания закругленных углов при использовании CSS в IE8 (или IE6 и…

Я делаю пользовательский всплывающий фон, подклассируя UIPopoverBackgroundView. Я хочу сделать поповер без закругленных углов. Я могу успешно создать фон без закругленных углов (красный на…

У меня есть CSS проблема , как я достигаю css закругленных углов в качестве разделителей спасибо. некоторые-прозрачным.

Закругленные углы с помощью радиуса округления границ рамки CSS3

До появления CSS3, чтобы добавить к таким элементам веб-страницы, как формы или кнопки, закругленные углы, нужно было использовать ряд изображений и много дополнительной разметки. К счастью, теперь закругленные углы CSS позволяет создавать очень просто. В том числе это можно сделать с помощью свойства border-radius.

Вы можете использовать это свойство CSS3 для следующих браузеров:

• Chrome 6+;
• Firefox 4+;
• Safari 5 +;
• IE9 +;
• Opera 10.5+;
• Android 2.1+;
• iOS 3.1+.

Мы будем работать с классом «info-box«. Это может быть область вашей веб-страницы с контактной информацией, и вы хотите с помощью CSS закруглить углы.

Напишите HTML-код элемента, для которого вы хотите закруглить углы:

<div>Здесь будет какой-то контент</div>

Далее добавьте в таблицу стилей правило CSS:

.info-box {
   -webkit-border-radius: 20px;
   border-radius: 20px;
  background-color: #000000;
{

Примечания:

Мы добавили как вендорную версию свойства, так и обычную. Мы также добавляем цвет фона. Чтобы радиус округления углов рамки отображался должным образом, фон элемента должен отличаться от фона области, в которой размещается элемент. Иначе нужно будет добавить стили, ширину и цвет рамки.

Перед тем, как сделать закругленные углы CSS, нужно отметить, что в приведенном примере все четыре угла рамки будут иметь один и тот же радиус (20 пикселей).

Вы также можете создавать панели с закругленными углами, которые отличаются друг от друга. Это можно сделать, добавив для свойства CSS несколько значений. С помощью сокращений CSS их можно указать в одну строку. Порядок присвоения значений: верхний левый угол, верхний правый, нижний правый, нижний левый:

.info-box {
   -webkit-border-radius: 20px 60px 40px 30px;
   border-radius: 20px 60px 40px 30px;
  background-color: #000000;
{

Еще один эффект, который вы можете создать с помощью этого свойства, это круглые изображения. Если у вас есть изображение, которое имеет идеальную квадратную форму, то можно с помощью CSS закруглить углы картинки, и тогда рамка «обрежет» края изображения и создаст идеальный круг.

Допустим, что у вас в HTML-разметке есть квадратное изображение, которое имеет класс «bio-pic«. Вы можете сделать это изображение круглым с помощью следующего CSS-кода:

img.bio-pic {
   -webkit-border-radius: 50%;
   border-radius: 50%;
{

В этом случае не нужно задавать цвет фона или цвет границы, потому что вы добавляете эти стили к изображению эффект закругленных углов будет работать, так как изображение будет отличаться от цвета фона, на котором оно расположено.

Данная публикация является переводом статьи «Rounded Corners with CSS3 Border Radius» , подготовленная редакцией проекта.

Закругленные углы таблицы Только CSS

Во-первых, вам понадобится больше, чем просто, -moz-border-radiusесли вы хотите поддерживать все браузеры. Вы должны указать все варианты, включая простой border-radius, следующим образом:

-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;

Во-вторых, чтобы напрямую ответить на ваш вопрос, на border-radiusсамом деле не отображается рамка; он просто устанавливает, как будут выглядеть углы границы, если она есть.

Чтобы включить на границе, и , таким образом , получить ваши закругленные углы, вам также нужен borderатрибут ваших tdи thэлементов.

td, th {
   border:solid black 1px;
}

Вы также увидите закругленные углы, если у вас есть цвет фона (или графика), хотя, конечно, это должен быть цвет фона, отличный от окружающего элемента, чтобы закругленные углы были видны без рамки.

Стоит отметить, что некоторые старые браузеры не любят помещать border-radiusтаблицы / ячейки таблиц. Возможно, стоит поместить <div>внутрь каждой ячейки и стилизовать ее. Однако это не должно влиять на текущие версии любых браузеров (кроме IE, который вообще не поддерживает закругленные углы — см. Ниже).

Наконец, не то чтобы IE вообще не поддерживает border-radius(бета-версия IE9 поддерживает, но большинство пользователей IE будут использовать IE8 или меньше). Если вы хотите взломать IE для поддержки border-radius, посмотрите http://css3pie.com/

[РЕДАКТИРОВАТЬ]

Хорошо, это меня беспокоило, поэтому я провел небольшое тестирование.

Вот пример JSFiddle, с которым я играл

Похоже, что самое важное, чего вам не хватало, было border-collapse:separate;в элементе таблицы. Это мешает ячейкам связывать свои границы вместе, что позволяет им подбирать радиус границы.

Надеюсь, это поможет.

Как сделать скругленные углы с помощью css

Здравствуйте. Сегодня я расскажу, как сделать закругленные края СSS_. За закругленные края в css отвечаеть свойство border-radius. Итак, чтоб получить скругленные углы css свойсту border-radius задаем значения по тому же принципу, как у margin и padding (последовательность следующая: левый верхний-правый верхний-правый нижний-левый нижний углы) наглядно смотрите  на рисунке

Поддерживают border-radius браузеры вот таких версий:

Теперь несколько примеров  как сделать закругленные углы css:

 body {background:#fff;border:#000000 1px;}/*цвет фонаб толшина и цвет рамки*/
.test-1,.test-2,.test-3,.test-4,.test-5,.test-6{width:300px;height:40px;color:#000000;font-size:12px;margin:10px;padding:10px;border:1px solid #006;}/*общие стили слоев*/
.test-1{border-radius: 10px;}/*это означает что все углы заокруглены на 10px, если все значения одинаковы, синтаксих CSS разрешает написать его 1 раз,но для понимания вот border-radius: 10px;=border-radius: 10px 10px 10px 10px; */
.test-2{border-radius: 10px 0 0 0;}/*закруглен лиш левый вехний угол один угол*/
.test-3{border-radius: 10px 0 10px 0;border:none!important; background:#009900;}/*закруглены левый вехний и правый нижний уголы, если рамка остутсвует, свойство border-radius заокруглит background */
.test-4{border-radius: 10px 0 0 50px;}/*заокгурляя углы можно создавать элиппсы*/
.test-5{border-radius: 10em/1em;}/*заокгурляя углы можно создавать элиппсы*/
.test-6{border-radius:13em 0.5em/1em 0.5em;}/*заокгурляя углы можно создавать элиппсы*/

Плагин вставки кодов, на отрез отказался вставлять код HTML,  по-этому код HTML я покажу вам рисунком:

У нас получиться закругленные углы css:

Свойства border-radius можна задавать еще такими значениями:

  border-bottom-left-radius:10px; /*левый нижний угол*/
border-bottom-right-radius:10px; /* правый нижний угол*/
border-top-left-radius:10px; /*левый верхний  угол*/
border-top-right-radius:10px; /* правый верхний  угол*/

Замечание по браузерам:

Chrome до версии 4.0, Safari до версии 5.0, iOS используют нестандартное свойство -webkit-border-radius.

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

Вы наверное подумали что на этом, и статье конец, а не тут то было. Далее я раскажу вам про замечательный онлайн сервис border-radius.com, который позволит сделать скругленные углы css за считаные секунды. Пользоваться сервисом очень просто: перед вами будем прямоугольник, и поля для ввода значения округление краев, все интуитивно понятно. После того как вы ввели значение в прямоугольнике мгновенно генерируется CSS код который вы можете скопировать себе в стиль. Смотрите ниже пример на рисунке

Читайте также статью Как сделать градиентный background (фон) с помощью 1px рисунка и с помощью только CSS 3 и про полезный онлайн сервис colorzilla.com 

Вас также заинтересует

css — Закругленные углы для используя border-radius.htc для IE

В документе W3C говорится о свойстве «border-radius» : «поддерживается» в IE9 +, Firefox, Chrome, Safari и Opera «.

Поэтому я предполагаю, что вы тестируете IE8 или ниже.

Для «обычных элементов» есть решение, совместимое с IE8 & другие старые /плохие браузеры. Смотрите ниже.

HTML:

<div>
  <span>Some text</span> <span>Some text</span> <span> Some text</span> <span>Some text</span>
</div>

CSS

.myWickedClass{
  padding: 0 5px 0 0;
  background: #F7D358 url(../img/roundedCorner_right.png) top right no-repeat scroll;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  font: normal 11px Verdana, Helvetica, sans-serif;
  color: #A4A4A4;
}
.myWickedClass > .myCoolItem:first-child {
  padding-left: 6px;
  background: #F7D358 url(../img/roundedCorner_left.png) 0px 0px no-repeat scroll;
}
.myWickedClass > .myCoolItem {
  padding-right: 5px;
}

Вам нужно создать как roundedCorner_right.png , так и amp; roundedCorner_left.png . Это обходной путь для IE8 (& ниже), чтобы имитировать функцию закругленного угла.

Таким образом, в этом примере выше мы применяем левый закругленный угол к первому элементу span в содержащем div & мы применяем правый закругленный угол к содержащему div. Эти изображения перекрывают предоставленные браузером «призрачные углы» & создать иллюзию принадлежности к закругленному элементу.

Идея для входных данных заключается в том, чтобы сделать ту же логику. Тем не менее, input — это пустой элемент, «element пуст, он содержит только атрибуты», другими словами, вы не можете заключить диапазон во вход , например <input><span></span></input>, чтобы затем использовать фоновые изображения, как в предыдущем примере.

Следовательно, похоже, что решение состоит в том, чтобы сделать наоборот: обернуть вход в другой элемент. см. этот ответ закругленные углы элементов ввода в IE

изображений границы CSS

Изображения границ CSS

С помощью свойства CSS border-image вы можете установить изображение, которое будет использоваться в качестве границы вокруг элемента.

CSS border-image Свойство

Свойство CSS border-image позволяет указать изображение, которое будет использоваться вместо обычной границы вокруг элемента.

Имущество состоит из трех частей:

1. Изображение для использования в качестве границы
2. Где нарезать изображение
3. Определите, должны ли средние части повторяться или растягиваться

Мы будем использовать следующее изображение (названное «border.png «):

Свойство border-image берет изображение и разбивает его на девять частей, как доска для крестиков-ноликов. Затем он помещает углы в углы, а средние части повторяются или растягиваются по вашему усмотрению.

Примечание: Чтобы border-image работал, элемент также нуждается в граница набор свойств!

Здесь средние части изображения повторяются для создания границы:

Изображение как бордюр!

Вот код:

Пример

#borderimg {
граница: сплошная прозрачная 10 пикселей;
отступ: 15 пикселей;
border-image: url (border.png) 30 тур;
}

Здесь средние части изображения растягиваются для создания границы:

Изображение как бордюр!

Вот код:

Пример

#borderimg {
граница: сплошная прозрачная 10 пикселей;
отступ: 15 пикселей;
изображение границы: url (border.png) 30 стрейч;
}

Совет: Свойство border-image на самом деле является сокращенным свойством для border-image-source , border-image-slice , ширина-границы-изображения , граница-изображение-исход и border-image-repeat свойств.

CSS border-image — разные значения фрагментов

Различные значения среза полностью меняют внешний вид границы:

Пример 1:

border-image: url (border.png) 50 раунд;

Пример 2:

border-image: url (border.png) 20% круглое;

Пример 3:

border-image: url (border.png) 30% округление;

Вот код:

Пример

# borderimg2 {
граница: сплошная прозрачная 10 пикселей;
отступ: 15 пикселей;
граница-изображение: url (border.png) 20% округление;
}

# borderimg3 {
граница: 10 пикселей сплошная прозрачная;
отступ: 15 пикселей;
изображение границы: url (border.png) 30% круглый;
}

Проверьте себя упражнениями!

Свойства изображения границы CSS

Закругленные углы | HTML Собака

Закругленные углы раньше использовались для сужения сплошных фоновых изображений или, для гибких рамок, множества фоновых изображений, по одному на угол, накладываемых на несколько вложенных элементов div .Ах, некрасиво. Ну, больше нет. Теперь, с помощью простого CSS, вы можете украсить свой дизайн большим количеством кривых, чем Мэрилин Монро.

Радиус границы?

Ага. Радиус границы. Но не бойтесь — вам не обязательно иметь границы. Свойство border-radius можно использовать для добавления угла к каждому углу блока.

 
#maryn {
    фон: #fff;
    ширина: 100 пикселей;
    высота: 100 пикселей;
      радиус границы: 20 пикселей; 
}
  

Вот и все.Закругленные углы, понимаете? Хорошо, если у вас есть разумный браузер (см. Примечание ниже).

Конечно, если вы, , хотите границу…

 
#ok_a_border_then {
    граница: 5px solid # 8b2;
    ширина: 100 пикселей;
    высота: 100 пикселей;
      радиус границы: 5 пикселей; 
}
  

Woop.

Рекламируйте здесь! На давнем, начитанном и уважаемом ресурсе веб-разработки.

Несколько значений

border-top-left-radius , border-top-right-radius , border-bottom-right-radius и border-bottom-left-radius также можно использовать для нацеливания на определенные углы.

Когда-либо менее ужасно многословный, вы также можете определить все угловые радиусы (какое отличное слово) индивидуально с помощью списка значений, разделенных пробелами, работая по часовой стрелке от верхнего левого угла, как и другие сокращенные свойства:

 
#monroe {
    фон: #fff;
    ширина: 100 пикселей;
    высота: 100 пикселей;
      border-radius: 6px 12px 18px 24px; 
}
  

Фигуристая.

Используя два значения вместо четырех, вы нацеливаете верхнее левое и нижнее правое на первую длину (или процент), а верхнее правое + нижнее левое — на второе. Три ценности? Верхний левый, затем верхний правый + нижний левый, затем нижний правый. Разрушение.

Гах! Просто должны быть проблемы с браузером, не так ли? Будь вы прокляты, браузеры.

Internet Explorer версии 8 и ниже не поддерживает border-radius . Единственный способ справиться с этим — либо довольствоваться дизайном в тех браузерах, у которого нет закругленных углов (большинство людей могут с этим смириться), либо вернуться к старым фоновым изображениям.

Вы также можете наткнуться на похожие проприетарные свойства, такие как -webkit-border-radius и -moz-border-radius , которые предназначены для более старых, мало используемых версий Safari и Firefox соответственно. Наш тщательно сформулированный профессиональный совет? К черту их.

Эллипсы

Круги для вас слишком квадратные? Вы можете указать разные радиусы по горизонтали и вертикали, разделив значения знаком «/».

 
#nanoo {
        фон: #fff;
        ширина: 100 пикселей;
        высота: 150 пикселей;
          радиус границы: 50 пикселей / 100 пикселей; 
        граница-нижний-левый-радиус: 50 пикселей;
        граница-нижний-правый-радиус: 50 пикселей;
}
  

Как создать кнопку с закругленными углами с помощью CSS

В CSS3 вы можете придать элементам закругленные углы с помощью свойства border-radius. Давайте посмотрим на это на примере.

Предположим, у вас есть следующая разметка.

Чтобы сделать div видимым, мы установим его ширину и высоту, а также зададим ему красный цвет фона.

  .red_div {
  цвет фона: красный;
  ширина: 200 пикселей;
  высота: 100 пикселей;
}
  

Ниже приводится результат вышеуказанного.

Чтобы сделать границы блока закругленными, вы можете добавить следующий стиль:

Вышеуказанное устанавливает радиус 15 пикселей в верхнем левом, верхнем правом, нижнем левом и нижнем правом углах элемента. Чем выше значение радиуса, тем более скругленным становится край.

Ниже вы можете увидеть результат указанной выше разметки.

Свойство border-radius можно записать несколькими способами.

Указание одного значения для свойства установит для всех четырех краев элемента радиус этого значения.

  радиус границы: 15 пикселей 15 пикселей;
  

С двумя значениями первое будет применяться к верхнему левому и нижнему правому углу, а второе — к верхнему правому и нижнему левому углам

  border-radius: 15px 15px 15px;
  

При трех значениях первое будет использоваться для верхнего левого угла, второе значение для верхнего правого и нижнего левого углов, а третье значение будет применено к нижнему правому углу.

  border-radius: 15px 15px 15px 15px;
  

Вышеуказанное явно устанавливает значение для каждого края.Вышеупомянутое является сокращением для приведенного ниже CSS, который также явно дает значение для каждого края.

  border-top-left-radius: 15 пикселей;
граница-верх-правый-радиус: 15 пикселей;
граница-нижний-правый-радиус: 15 пикселей;
граница-нижний-левый-радиус: 15 пикселей;
  

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

Добавление закругленных углов к кнопкам

border-radius можно использовать и для других элементов.Ниже мы видим, что он используется для добавления закругленных углов к кнопке.

  кнопка {
  ширина: 200 пикселей;
  высота: 100 пикселей;
  радиус границы: 20 пикселей;
}
  

Кнопка будет выглядеть так:

Вот еще несколько примеров готовых кнопок

Легкие закругленные углы с радиусом границы

Царство CSS — это царство ящиков. Все на странице — это коробка, внутри коробки, внутри коробки. Неудивительно, что начинающие CSS-разработчики (или, в моем случае, плохие графические дизайнеры со слишком большим опытом работы с CSS) так часто создают квадратные макеты!

Однако грядущая спецификация CSS3 дает нам проблеск надежды в виде закругленных углов .Совершенно верно — как только CSS3 будет широко поддерживаться, мы сможем защитить все эти острые края от детей и украсить Интернет в процессе.

И что еще лучше, некоторые браузеры уже поддерживают закругленные углы! Пока я пишу это, вы в значительной степени ограничены Mozilla / Firefox и Safari 3. Однако этот список обязательно будет расти со временем, так что не помешает начать экспериментировать с этой функцией. Особенно с учетом того, что в браузерах, которые не поддерживают закругленные углы, ничего плохого не происходит — пользователь видит только правильные квадратные углы.

На данный момент, чтобы заставить код работать, вы застряли в использовании проприетарных тегов CSS: они не проверяются, но просто игнорируются браузерами, которые их не поддерживают. Сам код довольно прост; например, чтобы создать div с красивыми закругленными углами и радиусом 5 пикселей, вы просто напишите что-то вроде этого:

 div.ounded {
цвет фона: # 666;
цвет: #fff;
font-weight: жирный;
отступ: 10 пикселей;
-moz-border-radius: 5 пикселей;
-webkit-border-radius: 5 пикселей; } 

И это правило создаст div, который выглядит так:

Здесь следует отметить два свойства: «-moz-border-radius» и «-webkit-border-radius.Первый способ заключается в том, как указать радиус — количество пикселей от гипотетической центральной точки до края круга, созданного закругленным углом (см. Изображение ниже) — в браузерах на основе Mozilla. Последний делает то же самое, но для Safari.

Правило не ограничивается только изгибом цветов фона. Если бы вы добавили рамку к элементу, граница также стала бы закругленной. Например, цитата из блока может иметь такой стиль:

 blockquote {
маржа: 1em 20px;
отступ: 10 пикселей;
граница: 2px solid # 555;
цвет фона: # f2f2f2;
цвет: # 555;
размер шрифта: 140%;
выравнивание текста: выравнивание;
-moz-border-radius: 10 пикселей;
-webkit-border-radius: 10 пикселей; } 

В результате получается цитата блока, которая имеет большой стиль, без использования изображений для выполнения задачи:

И, наконец, вы не ограничены ни скругленными углами, ни ни одним из них.Используя это свойство, вы можете указать, какие углы вы хотите скруглить в вашем CSS. Однако важно отметить, что версия этого правила для Firefox немного отличается от стандарта W3C, то есть написано немного иначе, чем правило для Safari. Например, рассмотрим эти два правила, которые используются для закругления верхнего левого угла поля:

 -moz-border-radius-topleft: 5px;
-webkit-border-top-left-radius: 5 пикселей; 

По большому счету, это небольшая разница, но очень важная, если вы хотите, чтобы ваши закругленные углы отображались там, где и как должны! Используя возможность закруглять отдельные углы, вы можете создавать необычные предупреждающие сообщения:

.тревога {
граница: 2px solid # fc0;
отступ: 8 пикселей 10 пикселей;
размер шрифта: 120%;
цвет: # c90;
font-weight: жирный;
цвет фона: # ff9;
-moz-border-radius-topleft: 8 пикселей;
-webkit-border-top-left-radius: 8 пикселей;
-moz-border-radius-bottomright: 8 пикселей;
-webkit-border-bottom-right-radius: 8px; } 

Или вы можете применить закругленные углы к трем из четырех краев комментария пользователя, что приведет к псевдоречевому пузырю, и все это без единого изображения в поле зрения:

 .comment {
граница: 1px solid # 999;
цвет фона: # d8d8f4;
маржа: 1em 40px;
отступ: 15 пикселей;
-moz-border-radius-topleft: 15 пикселей;
-webkit-border-top-left-radius: 15 пикселей;
-moz-border-radius-topright: 15 пикселей;
-webkit-border-top-right-radius: 8 пикселей;
-moz-border-radius-bottomleft: 15 пикселей;
-webkit-border-bottom-left-radius: 15 пикселей; } 

Здесь вы можете увидеть все мои примеры в действии.И это всего лишь несколько из сотен способов использовать силу закругленных углов с помощью всего нескольких строк кода. Имея в распоряжении подобные методы, легко понять, почему мы все с нетерпением ждем CSS3!

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

Поделиться Dreamweaver Артикул:

Когда-то использование изогнутых углов или закругленных краев в дизайне веб-сайтов с использованием только CSS было бы легендой.Вместо этого изображения должны быть имитирующими углы и размещаться в качестве фоновых изображений. Это была долгая и трудная задача.

Теперь вполне возможно создавать изогнутые края или закругленные углы с помощью css. Кстати, если вы просматриваете эту страницу в Internet Explorer, вы не сможете увидеть закругленные углы css в поле над этим абзацем.

Изогнутые края CSS в этом руководстве по CSS созданы с использованием новых возможностей CSS3.Любой браузер, использующий префикс Moz или Webkit, сможет отображать закругленные углы CSS3. Закругленные углы CSS с использованием атрибута Moz будут отображаться в Firefox, SeaMonkey, Flock и любом другом браузере, который использует движок рендеринга Gecko. И наоборот, закругленные углы CSS с префиксом Webkit будут отображаться в Google Chrome и Safari.

Internet Explorer и Opera работают над поддержкой CSS3, пока вы читаете это, но закругленные края CSS не будут отображаться в этих браузерах в настоящее время.

1. Создайте div, чтобы практиковать изогнутые края CSS

Давайте создадим простой div и зададим ему цвет фона, чтобы практиковаться в стилизации закругленных углов CSS. Вы должны скопировать и вставить этот код на веб-страницу:

    
 

        

        
  Вопреки распространенному мнению, Lorem Ipsum - это не просто
  случайный текст. У него есть корни в классическом
  Латинская литература с 45 г. до н.э., что составляет более 2000 лет
  Старый.

    
  

2. Используйте CSS для закругления всех четырех углов

Скопируйте и вставьте этот CSS с добавленными атрибутами закругленных углов CSS3 в таблицу стилей, прикрепленную к вашей веб-странице.

Для высоты div задано значение auto с шириной 150 пикселей. Также был установлен цвет фона, поэтому вы можете видеть закругленные углы css на белом фоне.Поля и отступы также были установлены для настройки содержимого абзаца внутри div.

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

 .corners {
  
    высота: авто;
    ширина: 150 пикселей;
    фон: # 8BBEA9;
    маржа: 20 пикселей;
    отступ: 30 пикселей;
    -moz-border-radius: 15 пикселей; /* Fire Fox */
    -webkit-border-radius: 15 пикселей; / * Safari и Chrome * /
 
 }

 
 / * Необязательный стиль абзаца * /

 .corners p {
 
        тень текста: 1px 1px 1px #FFF;
        выравнивание текста: выравнивание;
        размер шрифта: 16 пикселей;
        маржа: 0;
        отступ: 0;
    
 }
  
 

Если вы скопировали и вставили код правильно, у вас должен получиться такой стиль div со всеми четырьмя изогнутыми углами, стилизованными с использованием css.

Из этого примера вы увидите, что теперь все четыре угла блока div закруглены с использованием CSS. Стилизация всех четырех изогнутых краев CSS с помощью CSS3 — это нормально, но что, если вы хотите стилизовать только два угла или как насчет только одного стилизованного угла с помощью CSS3?

CSS3 Индивидуальный стиль закругленных краев

Чтобы стилизовать отдельные углы, вам необходимо знать следующие атрибуты закругленных углов CSS3. Синтаксис, используемый между закругленными углами css с префиксом Moz и закругленными углами css с префиксом Webkit, немного отличается.Ожидайте, что они будут объединены в один общий термин, когда CSS3 будет полностью кроссбраузерным.

Вот стили CSS с закругленными углами для префикса Moz, которые используют Firefox, Flock, SeaMonkey и все другие современные движки рендеринга Gecko:

  / * Стили для Firefox, Flock и SeaMonkey * /


    -moz-border-radius-topleft: 15 пикселей;
  
    -moz-border-radius-topright: 15 пикселей;
  
    -moz-border-radius-bottomleft: 15 пикселей;
 
    -moz-border-radius-bottomright: 15 пикселей;

 

Вот стили CSS с закругленными углами для движка Webkit, которые используют Chrome и Safari:

  / * Стили для Google Chrome и Safari * /

    -webkit-border-top-left-radius: 15 пикселей;

    -webkit-border-top-right-radius: 15 пикселей;

    -webkit-border-bottom-left-radius: 15 пикселей;

    -webkit-border-bottom-right-radius: 15 пикселей;


 

Примеры отдельных изогнутых углов CSS

Чтобы применить отдельные углы CSS3, просто выберите каждый атрибут изогнутого угла, который вы хотите, и примените его к стилям div.Большинство углов, которые вы применяете, будут иметь размер от 5 до 90 пикселей, но вы можете пойти до 200 пикселей, если хотите.

Этот div был разработан таким образом, чтобы углы располагались вверху справа и внизу слева

Этот div был разработан так, чтобы радиус нижнего левого угла был больше, чем

Не забудьте применить и префикс Webkit, и префикс Moz, если вы хотите, чтобы закругленные углы CSS отображались в большинстве основных браузеров.

Связанные руководства:

CSS3 Закругленные углы — видеоурок

CSS3 Text Shadows — Видеоурок

CSS3 Box Shadows — видеоурок

скруглений углов с использованием CSS3 | kirupa.com

— пользователем Кирупа | 27 марта 2011 г.

Каждые несколько лет в HTML или его связанных технологий, которые начинаются как крутые и модно.После массового злоупотребления это «что-то» оказывается презирают и насмехаются. Этот цикл ухода от лести насмешки повторяются все время. Например, два дополнения, которые люди когда-то любили, но притворяются, что никогда не существовали, — вот мигать и метки выделения. (Признай это — вы знаете, что когда-то их использовали! )

В CSS3 недавно появилась возможность указать закругленные углы. Я не говорю, что округлый углы будут чрезмерно использованы, что приведет к аналогичному люфту как и многие до этого, но это, безусловно, очень круто и модно сегодня! Вот тут-то и пригодится этот учебник.Этот урок научит вас быть крутым и модным. объясняя почти все, что нужно знать об использовании CSS для определения закругленных углов ваших элементов.

Что такое закругленные углы?

Прежде чем перейти к деталям, давайте сделаем шаг назад и посмотрите, какие бывают закругленные углы. Ниже у вас есть прямоугольник:

[без округления ]

Если посмотреть на углы, то он очень острый. Это можно с уверенностью сказать, что этот прямоугольник не имеет закругленных углы.Это отличается от следующего прямоугольника:

[округление]

У этого прямоугольника определенно закругленные углы, но, говоря то, что у него «закругленные углы», все еще немного неточно из техническая точка зрения. Как мы можем определить округлость этого прямоугольника? Чтобы понять это, давайте увеличьте немного больше и внимательно посмотрите, что это закругленное Уголок в деталях выглядит:

Скругленность угла определяется радиусом овал, который он создает.В нашем примере радиус составляет 10 пикселей. по горизонтали и вертикали!

Итак … чтобы ответить на наш первоначальный вопрос, закругленный угол тот, который имеет ненулевой радиус. Могло ли это быть ответил более лаконично? Наверное.

Начало работы

Теперь, когда вы знаете, что такое закругленный угол, приступим. Помогать вы следуете, не стесняйтесь использовать следующий HTML:

Как видите, это очень простой документ, который только содержит div с изображением:

[изображение принцессы создано Дэниел Кук из LostGarden! ]

Если внимательно присмотреться к HTML, у div есть идентификатор . mainContent и одноименный селектор CSS. существует, чтобы изменить его внешний вид. Стили, которыми ты будешь добавление будет жить внутри этого селектора!

Закругленные углы в CSS

В В CSS закругленные углы указываются через border-radius свойство, которое, в простейшем виде принимает значение, определяющее радиус округление:

 радиус границы: 10 пикселей; 

В приведенной выше строке я указываю радиус 10 пикселей, наносится на все углы.Следует отметить, что вы не обязательно использовать пиксели. Ты может использовать любую поддерживаемую единицу измерения , такую ​​как em, pt, процент и т. д., чтобы определить округлость вашего угла.

Давайте продолжим и добавим это свойство в наш пример. В Селектор mainContent будет выглядеть следующим образом, когда добавлено свойство border-radius:

 #mainContent {
цвет фона: # EFD6A6;
радиус границы: 10 пикселей;
отступ: 10 пикселей;
выравнивание текста: центр;
} 

После того, как вы добавили это свойство в mainContent, ваш При предварительном просмотре пример будет выглядеть следующим образом:

[ваш углы закруглены на 10 пикселей]

Я только что показал вам, как использовать сокращение версия этого свойства очень просто указать угловой радиус.

Вы можете иметь гораздо больший контроль, если хотите нырнем немного дальше. Например, вы можете указать разные угловые радиусы для каждого угла или настроить форму вашего сам уголок! Давайте теперь рассмотрим эти случаи.

Указание радиуса каждого угла Индивидуально

Вы можете указать индивидуальные значения для каждый угол, предоставив четыре значения вашему border-radius стенографическая собственность:

 border-radius: 10px 3px 5px 2px; 

Если вы используете эти значения, наш пример будет выглядеть как следует:

Четыре значения соответствуют в следующем порядке: вверху слева, верхний правый, нижний левый, нижний правый.Для наглядности можно выберите расширение свойства border-radius в его развернутые свойства и укажите радиус для каждого угла базис:

 граница-верх-левый-радиус: 10 пикселей;
граница-верх-правый-радиус: 3 пикселя;
граница-нижний-левый-радиус: 5 пикселей;
граница-нижний-правый-радиус: 2px; 

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

Настройка самого угла

Ранее я показал пример того, как используется значение радиуса. для определения округлости угла:

Необязательно иметь радиусы по горизонтали и вертикали. быть таким же.Другими словами, вам не нужно углы на четверть идеального круга. Вы можете чередовать горизонтальный и вертикальный радиусы, чтобы перейти от кругового закругленный угол до овального:

В CSS это можно сделать, сначала осознав, что то, что вы указали ранее в качестве радиуса границы, соответствует к горизонтальному радиусу. Чтобы указать вертикальный радиус, при использовании сокращенного свойства border-radius вы добавляете косая черта (/) и эквивалентные вертикальные компоненты напрямую после горизонтального объявления:

 border-radius: 10px 3px 5px 2px / 20px 1px 2px 1px; 

Когда вы используете расширенные свойства border-radius, вертикальный радиус указывается сразу после горизонтального один:

 граница-верх-левый-радиус: 10 пикселей 2 пикселя;
граница-верх-правый-радиус: 3px 1px;
граница-нижний-левый-радиус: 5px 2px;
граница-нижний-правый-радиус: 2px 3px; 

Вот и все, что нужно для настройки округлости угол!

Другие способы представления округлых Углы

В предыдущих разделах я рассмотрел сокращенные и расширенные варианты указания border-radius свойство.В этом разделе давайте посмотрим на некоторые другие (допустимые) способы просмотра того же CSS.

Начнем с этого:

 радиус границы: 10 пикселей 2 пикселя; 

Когда вы указываете только два значения, первое значение соответствует верхнему левому и нижнему правому углам, а второе значение соответствует нижнему левому и верхние правые углы:

Связь между двумя значениями и углами они соответствуют согласованно при указании также вертикальный радиус:

 border-radius: 10px 3px 5px 2px / 20px 1px; 

В этом примере вертикальный радиус левого верхнего и нижний правый угол составляет 20 пикселей.Вертикальный радиус нижний левый и верхний правый углы — 1 пиксель.

Последнее, что мы собираемся рассмотреть, это то, что происходит при указании трех значений:

 border-radius: 10px 2px 20px; 

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

Заключение

Вот и все нужно узнать о закругленных углах в CSS. Вы можете используйте свойство border-radius, чтобы закруглить углы почти все элементы. Я упоминаю «почти», потому что, согласно для W3C, это не работает с таблицами, чьи border-collapse настроен на свертывание.

Есть вопрос или просто хотите поболтать? Прокомментируйте ниже или загляните на наши форумы (на самом деле это одно и то же!), Где кучка самых дружелюбных людей, с которыми вы когда-либо столкнетесь, будут рады помочь вам!

Когда Кирупа не занят тем, что пишет о себе от третьего лица, он практикует социальное дистанцирование… даже в своих профилях в Twitter, Facebook и LinkedIn.

Hit Подпишитесь, чтобы получать полезные советы, уловки, селфи и многое другое, доставленное лично вам на почту.

Создание закругленных углов и изображений границ CSS3

С помощью CSS3 вы можете применять изображения к границам элемента.

Использование границ CSS3

CSS3 предоставляет два новых свойства для более элегантного оформления границ элемента — свойство border-image для добавления изображений к границам и свойство border-radius для создания закругленных углов без использования каких-либо изображений.

В следующем разделе описаны эти новые свойства границы CSS3, другие свойства, связанные с границами, см. В руководстве CSS border.

Создание закругленных углов CSS3

Свойство border-radius можно использовать для создания закругленных углов. Это свойство обычно определяет форму угла внешнего края границы. До CSS3 нарезанные изображения использовались для создания закругленных углов, что было довольно утомительно.

 .коробка {
    ширина: 300 пикселей;
    высота: 150 пикселей;
    фон: # ffb6c1;
    граница: 2px solid # f08080;
    радиус границы: 20 пикселей;
}  

Добавление изображений границ CSS3

Свойство border-image позволяет указать изображение, которое будет выступать в качестве границы элемента.
Дизайн границы создается из сторон и углов изображения, указанных в исходном URL-адресе border-image . Изображение границы может быть нарезано, повторено, масштабировано и растянуто различными способами, чтобы соответствовать размеру области изображения границы.

  .box {
    ширина: 300 пикселей;
    высота: 150 пикселей;
    граница: 15 пикселей сплошная прозрачная;
    -webkit-border-image: url ("border.png") 30 30 раунд; / * Safari 3.1-5 * /
    -o-border-image: url ("border.png") 30 30 раунд; / * Opera 11-12.1 * /
    border-image: url ("border.png") 30 30 раунд;
}  

Совет: Круглый вариант — это вариант повторения, при котором плитки изображения распределяются таким образом, что концы хорошо соединяются.