| Главная » Все материалы сайта » Справочник CSS-3 » Границы |
border-top-style | Свойство CSS
border-top-style
Краткая информация
Версии CSS
ОписаниеСвойство border-top-style устанавливает стиль для верхней границы элемента. Значения стиля могут указываться значением имени для этого свойства. Свойство применимо ко всем элементам, создано в версии CSS2 и проходит валидацию согласно версии CSS3. Синтаксис border-top-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|inherit
Значения
Немножко в другом виде дополнительные значения border-style
Вид указанных стилей представлен на рис.  Рис. Стили границ
Пример применения свойства<!DOCTYPE html>
<html lang="ru"> <head> <title>Свойство border-top-style</title> <style type="text/css"> <!-- .none { border-top-width:40px; border-top-style:none; border-top-color:red; padding:30px; color: yellow; font-size: 20px; text-decoration:blink; } .hidden { border-top-width:40px; border-top-style:hidden; border-top-color:red; padding:30px; color: yellow; font-size: 20px; text-decoration:blink; } .dotted { border-top-width:40px; border-top-style:dotted; border-top-color:red; padding:30px; color: yellow; font-size: 20px; text-decoration:blink; } .dashed { border-top-width:40px; border-top-style:dashed; border-top-color:red; padding:30px; color: yellow; font-size: 20px; text-decoration:blink; } .solid { border-top-width:40px; border-top-style:solid; border-top-color:red; padding:30px; color: yellow; font-size: 20px; text-decoration:blink; } .double { border-top-width:40px; border-top-style:double; border-top-color:red; padding:30px; color: yellow; font-size: 20px; text-decoration:blink; } .groove { border-top-width:40px; border-top-style:groove; border-top-color:red; padding:30px; color: yellow; font-size: 20px; text-decoration:blink; } .ridge { border-top-width:40px; border-top-style:ridge; border-top-color:red; padding:30px; color: yellow; font-size: 20px; text-decoration:blink; } .inset { border-top-width:40px; border-top-style:inset; border-top-color:red; padding:30px; color: yellow; font-size: 20px; text-decoration:blink; } .outset { border-top-width:40px; border-top-style:outset; border-top-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.borderTopStyle
БраузерыБраузер 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/ | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Поделись ссылкой на эту страницу с друзьями:
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Просмотров: 937 | Рейтинг: 0.0/0 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||
