Что такое border как поставить бордюр примеры
Естественно начать, с того, что такое border , как он описывается в css!
- Что такое border css
- Бордюр снизу - border bottom css
- Бордюр слева - css border left
- Бордюр справа - css border right
- Бордюр сверху - css border top
- Цвет бордюра - border color css
- Радиус бордюра border radius css
- свойства border градиент border
- Тень для бордюра css
- Внутренний доступ бордюра cs
- Отступы снаружи бордюра border margin css
- css table border
- Поставим Бордюр снизу это у нас свойство - border bottom, чтобы увидеть его мы поставим толщину бордюра
- Далее сделаем Бордюр слева - это свойство бордюра border left
- Следующий бордюр на очереди это Бордюр справа - это свойство border right
- Не знаю зачем, но есть еще и Бордюр сверху - если он существует, то значит -это кому то нужно!
- О css table border -мы говорили здесь и о цвете
Что такое border css
Начнем с того : "Что такое border css"."BORDER" - может быть свойством.
Но и "BORDER" - может быть атрибутом атрибут border(устаревшее).
Синтаксис применения свойства border
Свойство border может устанавливаться тремя способами:Через атрибут attribute style, например :
Результат:
Через тег style, например:
<div class="name_of_class">текст</div>
Результат:
Через файл file css, например : Аналогичный способ, что и во втором пункте, только класс размещается в файле css.
Перечисленные способы создания бордюра элемента, применяются в зависимости от необходимых задач, это :
Локально в одном элементе.
Локально на одной странице, для повторяющихся элементов.
И на всем сайте.
Бордюр снизу - border bottom css
Стили для border bottom css:
<div class="border_1">Здесь текст в div "border-bottom: 2px solid"</div>
.border_1{
border-bottom: 2px solid;
background-color: #edc2e6;
}Расположение бордюра снизу .
Бордюр слева - css border left
Стили для border left css:
<div class="border_2">Здесь текст в div "border-left: 2px solid"</div>
.border_2{
border-left: 2px solid;
background-color: #edc2e6;
}
Расположение бордюра слева.
Бордюр справа - css border right
Стили для border right css:
<div class="border_3">Здесь текст в div "border-right: 2px solid"</div>
.border_2{
border-right: 2px solid;
background-color: #edc2e6;
}
Расположение бордюра справа .
Бордюр сверху - css border top
Стили для border top css:
<div class="border_4">Здесь текст в div "border-top: 2px solid"</div>
.border_4{
border-top: 2px solid;
background-color: #edc2e6;
}
Расположение бордюра сверху:
Цвет бордюра - border color css
Сделаем наш border цветом, ну например красным и пусть он будет снизу!
Цвет для border можно задать прямо в свойствах
Стили для border-bottom + color css :
<div class="border_5">Здесь текст в div border-bottom: 2px solid red; </div>
.border_5{
border-bottom: 2px solidbackground-color: #edc2e6;
}
Результат:
Либо же
Стили для border-color css + bottom :
<div class="border_6">Здесь текст в div border-bottom: 2px solid; border-color : green; </div>
.border_6{
border-bottom: 2px solid;
border-color : green;
background-color: #edc2e6;
}
Результат:
Радиус бордюра border radius css
Если требуется закруглить углы, то делаем "border-radius" к примеру в 15px "border-radius: 15px;"
Кстати, тут мы как-то делали о кругах и там как раз мы использовали это свойство.Стили для border radius
<div class="border_7">Здесь будет текст
с переносом...
</div>
.border_7{
background-color: #edc2e6;
border-radius: 15px;"
}
Результат применения радиуса к див:
с переносом...
свойства border градиент border
Мы уже рассматривали свойства линии, которые также можно применить и к border, что собственно мы делали выше!
Данное свойство былоТень для бордюра css
Добавим тень нашему бордюру, это приведет к эффекту парения элемента.
Вообще то... border shadow не бывает.... бывает box-shadow:
<style>
.border_8{
background: #fc0; /* Цвет фона */
box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Параметры тени */
}
</style>
<div class="border_8"> текст </div>
Обращаю ваше внимание, что текст прилипает к бордюру элемента, и снаружи и внутри!
Поэтому следующим пунктом добавим отступ для бордюра
Здесь текст и свойства:
.border_8{
background: #fc0; /* Цвет фона */
box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Параметры тени */
}
Внутренний доступ бордюра css
Нам нужно, чтобы текст немного отступал от бордюра.
Возьмем свойства из выше идущего пункта и добавим ему свойство padding - это будет внутренний доступ бордюра.
<style>
.border_9{
background: #fc0; /* Цвет фона */
box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Параметры тени */
padding : 40px;
}
</style>
<div class="border_9">Текст</div>
Но опять же, наш текст снаружи все равно прилипает к бордюру! В следующем пункте изменим и это!
Здесь текст и свойства:
.border_9{
background: #fc0; /* Цвет фона */
box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Параметры тени */
padding : 40px;
}
Отступы снаружи бордюра border margin css
Опять возьмем выше идущий весь код и добавим в него свойство margin.
Это будет наружный отступ от бордюра элемента :
<style>
.border_10{
background: #fc0; /* Цвет фона */
box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Параметры тени */
padding : 40px;
margin: 40px;
}
</style>
<div class="border_10">текст</div>
.border_10{
background: #fc0; /* Цвет фона */
box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Параметры тени */
padding : 40px;
margin: 40px;
}
О css table border
css бордюр бордюр снизу css css внутренний бордюр бордюр html border css border radius css css border style css table border border bottom css border color css border top css html css border css border left border image css css border collapse свойства border css border solid css border size css border padding css border shadow css border background css css border none div border css css градиент border border type css css border margin css border input border css цвет border css border внутри css border таблицы css border css примеры