Всех друзей поздравляем с Новым годом! Всего вам самого наилучшего! Всех благ, здоровья а материальное приложится!
СКРИПТЫ althtmlcssphpjsmore

Border css бордюр

2018/05/31 Марат 954 0 HTML | CSS |
Для чего вообще нужен бордюр – border – это один из тех элементов, который часто используется и применяется на страницах сайта! Будем разбирать, как поставить border, ширину border , border слева, справа, внизу, сверху! Закруглим border . В общем будем делать с border все, что мы нашли в поисковых запросах о border ! Чтобы видеть, к какому div применяли border, мы покрасим в цвет "background-color: #edc2e6; "

Естественно начать, с того, что такое border , как он описывается в css!

Навигация по странице :
  1. Что такое border css
  2. Бордюр снизу - border bottom css
  3. Бордюр слева - css border left
  4. Бордюр справа - css border right
  5. Бордюр сверху - css border top
  6. Цвет бордюра - border color css
  7. Радиус бордюра border radius css
  8. свойства border градиент border
  9. О border shadow css
  10. Отступы внутри бордюра border padding css
  11. Отступы снаружи бордюра border margin css
  12. css table border

    Что такое border css

  1. В стилях css свойство border обозначается таким образом - берется element - это либо класс, либо ид
    Где : 1px толщина border
    solid - начертание, в данном случае сплошная линия
    red - цвет border(если свойства цвета нет, то будет показываться черная линия!)

    element.style {

    border: 1px solid red;

    }


    Бордюр снизу - border bottom css

  2. Поставим Бордюр снизу это у нас свойство - border bottom, чтобы увидеть его мы поставим толщину бордюра 2px

    Стили для border bottom css:

    <div class="border_1">Здесь текст в div "border-bottom: 2px solid"</div>

    .border_1{

    border-bottom: 2px solid;

    background-color: #edc2e6;

    }

    Расположение бордюра снизу .

    Здесь текст в div "border-bottom: 2px solid"


    Бордюр слева - css border left

  3. Далее сделаем Бордюр слева - это свойство бордюра border left

    Стили для border left css:

    <div class="border_2">Здесь текст в div "border-left: 2px solid"</div>

    .border_2{

    border-left: 2px solid;

    background-color: #edc2e6;

    }

    Расположение бордюра слева.

    Здесь текст в div "border-left: 2px solid"


    Бордюр справа - css border right

  4. Следующий бордюр на очереди это Бордюр справа - это свойство border right

    Стили для border right css:

    <div class="border_3">Здесь текст в div "border-right: 2px solid"</div>

    .border_2{

    border-right: 2px solid;

    background-color: #edc2e6;

    }

    Расположение бордюра справа .

    Здесь текст в div "border-right: 2px solid"


    Бордюр сверху - css border top

  5. Не знаю зачем, но есть еще и Бордюр сверху - если он существует, то значит -это кому то нужно!

    Стили для border top css:

    <div class="border_4">Здесь текст в div "border-top: 2px solid"</div>

    .border_4{

    border-top: 2px solid;

    background-color: #edc2e6;

    }

    Расположение бордюра сверху:

    Здесь текст в div "border-top: 2px solid"


    Цвет бордюра - border color css

  6. Сделаем наш border цветом, ну например красным и пусть он будет снизу!

    Цвет для border можно задать прямо в свойствах border выделено красным red

    Стили для border-bottom + color css :

    <div class="border_5">Здесь текст в div border-bottom: 2px solid red; </div>

    .border_5{

    border-bottom: 2px solid red;

    background-color: #edc2e6;

    }

    Результат:

    Здесь текст в div border-bottom: 2px solid red;

    Либо же

    Стили для 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;

    }

    Результат:

    Здесь текст в div border-bottom: 2px solid; border-color : green;
    Можно и цифровое значение цвета поставить - "Подобрать цвета"


    Радиус бордюра border radius css

  7. Если требуется закруглить углы, то делаем "border-radius" к примеру в 15px "border-radius: 15px;"

    Кстати, тут мы как-то делали о кругах и там как раз мы использовали это свойство.

    Стили для border radius

    <div class="border_7">Здесь будет текст

    с переносом...

    </div>

    .border_7{

    background-color: #edc2e6;

    border-radius: 15px;"

    }

    Результат применения радиуса к див:

    Здесь будет текст

    с переносом...


    свойства border градиент border

  8. Мы уже рассматривали свойства линии, которые также можно применить и к border, что собственно мы делали выше!

    Данное свойство было solid - все остальные свойства не хочу повторять, потому, что вот здесь мы все один раз разжевывали!


    О border shadow css

  9. Вообще то... border shadow не бывает.... бывает box-shadow:

    Здесь текст и свойства:

    .border_8{

    background: #fc0; /* Цвет фона */

    box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Параметры тени */

    }

    Само собой напрашивается border padding css


    О border padding css

  10. Возьмем свойства из выше идущего пункта и добавим ему свойство padding
    Здесь текст и свойства:

    .border_9{

    background: #fc0; /* Цвет фона */

    box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Параметры тени */

    padding : 40px;

    }


    Отступы снаружи бордюра border margin css

  11. Добавим доступ для border снаружи!

    <div class="border_10">Здесь текст и свойства:

    .border_10{

    background: #fc0; /* Цвет фона */

    box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Параметры тени */

    padding : 40px;

    margin: 40px;

    }

    </div>

    Результат:

    Здесь текст и свойства:

    .border_10{

    background: #fc0; /* Цвет фона */

    box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Параметры тени */

    padding : 40px;

    margin: 40px;

    }


    О css table border

  12. О css table border -мы говорили здесь и о цвете


Вас может еще заинтересовать список тем : HTML , CSS ,
Последняя дата редактирования : 2020-01-19 06:39
Теги:
css бордюрбордюр снизу csscss внутренний бордюрбордюр htmlborder 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 примеры

НАШИ ПРОЕКТЫ : Проекты находятся в разной степени готовности (просто их столько, что времени не хватает…) Все статьи авторские, при копироавании активная ссылка обязательна DwWeb.ru! © 2015 - 2020