Как сделать border только снизу css

border-bottom-style

Стили рамок

Браузер Internet Explorer до версии 6.0 включительно при толщине границы 1px отображает dotted как dashed . При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7 значение dotted превращается в dashed .

Internet Explorer до версии 7.0 включительно не поддерживает значения hidden и inherit .

Стиль границы в разных браузерах может несколько различаться при использовании значений groove , ridge , inset или outset .

Рамки для таблиц, строк и ячеек в HTML

Рамка таблиц важный элемент. Она универсальна и часто используема. В этом уроке будет разобрано, как сделать рамку таблицы, ячейки и строки при помощи атрибута, но основная часть урока будет направлена на свойства CSS, потому что рамка становится универсальной при использовании стилей CSS.

Создание рамки при помощи атрибута

Вообще не расширяемый атрибут, я бы сказал бессмысленный. Атрибут border устанавливает толщину рамки и все. Далее пример:

Простой способ создать рамку вокруг элемента

Сразу говорю, подробные записи приводить не буду, так как о свойстве border будет огромный урок в дальнейшем и может не один. Универсальное свойство border способно установить сразу и толщину, и стиль, и цвет границ (рамки). Толщина может быть любой, цвет границ устанавливается в шестнадцатеричном формате, rgb формате и ключевыми словами (red, black и т.д.). Какие бывают стили, картинка ниже (картинка взята с сайта htmlbook.ru) и далее пример:

Рамка слева, справа, снизу и сверху

При использовании border рамка создается со всех сторон. Но можем контролировать, с какой же стороны обрисовывать рамку. Рамка слева border-left: 2px solid black ; рамка справа border-right: 1px dotted #FF0000 ; рамка снизу border-bottom: 10px solid #000000 ; рамка сверху border-top: 1px solid green . Как видите, они не обязательно должны иметь одинаковые значения, а так же их можно комбинировать, то есть написать несколько, например, левую и правую границу (рамку) и т.д. Все. Далее лезть не буду, эта тема другого урока. Пример:

Закругленные углы

Теперь немного затронем тему «красивостей» и юзабилити. Чтобы сделать края рамок закругленными, существует свойство border-radius . Это тоже отдельный урок, сильно подробно разбирать не будем. Он принимает разное количество аргументов. Мы будем писать (только в этом уроке) один аргумент, и если пишем одно значение, значит, будет одинаковое закругление со всех сторон (углов). Значение может быть в разных «мерах», например, в пикселях и процентах. Далее пример:

Поля или внутренний отступ

Дабы текст не был впритык к рамке, нужно делать отступ от нее. В этом нам поможет свойство padding . Оно тоже многофункционально, но мы рассмотрим его частично, все по той же причине. Будем использовать только одно значение. Значение может быть в разных «мерах», например, в пикселях и процентах. Далее пример:

CSS тень коробки — только сверху и снизу

Я не могу найти какие-либо примеры, как это сделать, но как я могу добавить тень окно только в верхней и нижней части элемента?

Как Кристиан отметил, хороший контроль над Z-значения будут часто решить ваши проблемы.

Если это не работает, вы можете взглянуть на https://stackoverflow.com/questions/4561097/css-box-shadow-bottom-only/4561164#4561164 используя переполнение скрытый, чтобы скрыть излишки теней.

Я хотел бы также иметь в виду, что коробка-тени собственность может принимать через запятую теней такой:

Это даст вам некоторый контроль над тем, что "Сумма" из тени в каждом направлении.

Взгляните на http://www.css3.info/preview/box-shadow/ для получения дополнительной информации о окна-тени.

Надеюсь, что это было то, что вы искали!

После некоторых экспериментов я обнаружил, что четвертое значение в строке контролирует распространение (по крайней мере в ФФ 10). Я против вертикального смещения и дал им отрицательный спред.

Это прекрасно работает для меня!

Так что это мой первый ответ здесь, и потому что мне нужно что-то подобное я сделал с элементами псевдо для 2 внутренних теней, и дополнительный div для верхний наружный тень. Дон'т знаю, если это лучшее решение, но, возможно, это поможет кому-то.

В формате HTML

УСБ

Я'вэ играл с ним и я думаю у меня есть решение. В следующем примере показано, как установить окно-тень, так что он будет показывать только тень на вставке верхней и нижней части элемента.

Легенда: insetOption leftPosition topPosition blurStrength spreadStrength цвет

Описание Ключ к решению-установить значение размытия в <= отрицательное значение спреда (бывш. 0px отступ 5 пикселей -?ПКС 5 пикселей #000; значение размытия должна быть -5 и ниже), а также, чтобы сохранить размытость значения и gt; 0 при вычитании из начального значения позиционирования (бывш. используя пример выше, значение размытия должна быть -9 и вверх, что дает нам оптимальное значение для размытия, чтобы быть между -5 и -9).

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *