| Главная » Все материалы сайта » Справочник CSS-3 » Границы |
border-left-style | Свойство CSS
border-left-style
Краткая информация
Версии CSS
ОписаниеУстанавливает стиль границы слева от элемента. Значения стиля могут указываться значением имени для этого свойства. Свойство применимо ко всем элементам, создано в версии CSS2, но проходит валидацию согласно версии CSS3. Синтаксис border-left-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|inherit
Значения
Вид указанных стилей представлен на рис.  Рис. Стили границ
Пример применения свойства<!DOCTYPE html>
<html lang="ru"> <head> <title>Свойство border-left-style</title> <style type="text/css"> <!-- .none { border-left-width:40px; border-left-style:none; border-left-color:red; padding:30px; color: yellow; font-size: 20px; text-decoration:blink; } .hidden { border-left-width:40px; border-left-style:hidden; border-left-color:red; padding:30px; color: yellow; font-size: 20px; text-decoration:blink; } .dotted { border-left-width:40px; border-left-style:dotted; border-left-color:red; padding:30px; color: yellow; font-size: 20px; text-decoration:blink; } .dashed { border-left-width:40px; border-left-style:dashed; border-left-color:red; padding:30px; color: yellow; font-size: 20px; text-decoration:blink; } .solid { border-left-width:40px; border-left-style:solid; border-left-color:red; padding:30px; color: yellow; font-size: 20px; text-decoration:blink; } .double { border-left-width:40px; border-left-style:double; border-left-color:red; padding:30px; color: yellow; font-size: 20px; text-decoration:blink; } .groove { border-left-width:40px; border-left-style:groove; border-left-color:red; padding:30px; color: yellow; font-size: 20px; text-decoration:blink; } .ridge { border-left-width:40px; border-left-style:ridge; border-left-color:red; padding:30px; color: yellow; font-size: 20px; text-decoration:blink; } .inset { border-left-width:40px; border-left-style:inset; border-left-color:red; padding:30px; color: yellow; font-size: 20px; text-decoration:blink; } .outset { border-left-width:40px; border-left-style:outset; border-left-color:red; padding:30px; color: yellow; font-size: 20px; text-decoration:blink; } --> </style> </head> <body> <center> <div class="none"><p>Стиль none левой границы не указан</p></div><br> <div class="hidden"><p>Стиль hidden скрыт но ширина осталась</p></div><br> <div class="dotted"><p>Стиль dotted как серия точек</p></div><br> <div class="dashed"><p>Стиль dashed как пунктирная линия</p></div><br> <div class="solid"><p>Стиль solid как сплошная линия</p></div><br> <div class="double"><p>Стиль double как двойная сплошная линия</p></div><br> <div class="groove"><p>Стиль groove как будто содержимое выдавлено из фона</p></div><br> <div class="ridge"><p>Стиль ridge как будто содержимое вдавлено в фон</p></div><br> <div class="inset"><p>Стиль inset как будто содержимое,это нажатая кнопка</p></div><br> <div class="outset"><p>Стиль outset как будто содержимое,это не нажатая кнопка</p></div><br> </center> <br> </body> </html> Пример в действииОбъектная модель [window.]document.getElementById("elementID").style.borderLeftStyle
БраузерыБраузер Internet Explorer до шестой версии включительно при толщине границы 1px отображает dotted как dashed. При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7 значение dotted превращается в dashed. Internet Explorer до версии 7.0 включительно не поддерживает значения hidden и inherit. Стиль границы в разных браузерах может несколько различаться при использовании значений groove, ridge, inset или outset. Источники: http://htmlbook.ru/ и http://delaisait.ucoz.ru/ | |||||||||||||||||||||||||||||||||
Поделись ссылкой на эту страницу с друзьями:
| |||||||||||||||||||||||||||||||||
| Просмотров: 534 | Рейтинг: 0.0/0 | |||||||||||||||||||||||||||||||||
