Властивості CSS Прикордонні
В CSS border властивості дозволяють задати стиль, ширину і колір межі елементу.
Цей елемент має кордон канавку, яка 15px в ширину і зелений.
прикордонний Стиль
border-style властивість визначає. який вид кордону. щоб відобразити.
Наступні значення допускаються:
- dotted - Визначає пунктирну рамку,
- dashed - Визначає пунктирну кордон
- solid - Визначає тверду кордон
- double - Визначає подвійну кордон
- groove - Визначає рифлену кордон 3D. Ефект залежить від величини межі кольору
- ridge - Визначає ребристу кордон 3D. Ефект залежить від величини межі кольору
- inset - Визначає межі 3D врізку. Ефект залежить від величини межі кольору
- outset - Визначає 3D боковик кордон. Ефект залежить від величини межі кольору
- none - не визначає межі
- hidden - Визначає приховану кордон
border-style властивість може мати від одного до чотирьох значень (для верхньої межі, правої межі, нижньої межі, а також лівої межі).
A dotted border.
A dashed border.
A double border.
A groove border. The effect depends on the border-color value.
A ridge border. The effect depends on the border-color value.
An inset border. The effect depends on the border-color value.
An outset border. The effect depends on the border-color value.
A hidden border.
Примітка: Жоден з інших CSS прикордонних властивостей. описаних нижче. не матиме ніякого ефекту. якщо border-style властивість не встановлено!
Ширина рамки
border-width властивість визначає ширину чотирьох кордонів.
Ширина може бути встановлений в якості певного розміру (в px, pt, cm, em. І т.д.). або за допомогою одного з трьох зумовлених значень: тонкий, середній або товстий.
border-width властивість може мати від одного до чотирьох значень (для верхньої межі, правої межі, нижньої межі, а також лівої межі).
p.one border-style: solid;
border-width: 5px;
>
p.two border-style: solid;
border-width: medium;
>
p.three border-style: solid;
border-width: 2px 10px 4px 20px;
>
колір кордону
border-color властивість використовується. щоб встановити колір чотирьох кордонів.
Колір може бути встановлений за допомогою:
- name - вказати ім'я кольору, як "red"
- Hex - задати шістнадцяткове значення, наприклад "# ff0000"
- RGB - вкажіть значення RGB, як "rgb (255,0,0)"
- transparent
border-color властивість може мати від одного до чотирьох значень (для верхньої межі, правої межі, нижньої межі, а також лівої межі).
Якщо border-color не встановлено, він успадковує колір елемента.
p.one border-style: solid;
border-color: red;
>
p.two border-style: solid;
border-color: green;
>
p.three border-style: solid;
border-color: red green blue yellow;
>
Кордон - Окремі Сторони
З наведених вище прикладів вами побачили, що можна вказати іншу кордон для кожної зі сторін.
В CSS, є також властивості для завдання кожної з меж (зверху, праворуч, знизу і зліва направо):
p border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
>
Наведений вище приклад дає той же результат, що і це:
p border-style: dotted solid;
>
Отже, ось як це працює:
Якщо border-style власності має чотири значення:
- border-style. пунктирний твердих подвійний штриховий;
- Верхня межа пунктир
- права межа є твердою
- нижня межа вдвічі
- ліва межа пунктирна
Якщо border-style власності має три значення:
- border-style. пунктирний твердих подвійний;
- Верхня межа пунктир
- праві і ліві кордону є твердими
- нижня межа вдвічі
Якщо border-style власності має два значення:
- border-style. пунктирний твердої речовини;
- верхні і нижні межі усіяні
- праві і ліві кордону є твердими
Якщо border-style власності має одне значення:
border-style властивість використовується в наведеному вище прикладі. Тим не менш, він також працює з border-width і border-color.
Кордон - скорочене властивість
Як ви можете бачити з наведених вище прикладів, є багато властивостей, які необхідно враховувати при роботі з кордонами.
Для скорочення коду, також можна вказати всі окремі прикордонні властивості в одному власності.
border властивість властивість є узагальнюючим для наступних окремих прикордонних властивостей:
- border-width
- border-style (обов'язково)
- border-color
p border: 5px solid red;
>
ще приклади
Всі кращі властивості кордону в одній декларації
Цей приклад демонструє скорочене властивість для установки всіх властивостей для верхньої межі в одній декларації.
Встановлює стиль нижньої межі
Цей приклад показує, як встановити стиль нижньої межі.
Встановіть ширину лівої межі
Цей приклад показує, як встановити ширину лівої межі.
Встановіть колір чотирьох кордонів
Цей приклад показує, як встановити колір чотирьох кордонів. Він може мати від одного до чотирьох кольорів.
Встановіть колір правої межі
Цей приклад показує, як встановити колір правої межі.