Клиент хочет двухцветные рамки для тисненого вида. Могу я сделать это с одним элементом? Я надеялся избежать объединения двух элементов DOM с отдельными границами.
Да: используйте outlineсвойство; он действует как вторая граница за пределами вашей границы. Остерегайтесь, хотя он может нестабильно взаимодействовать с полями, отступами и тенями. В некоторых браузерах вам, возможно, также придется использовать префикс для конкретного браузера; чтобы убедиться, что он его уловит: -webkit-outlineи тому подобное (хотя WebKit, в частности, этого не требует).
Это также может быть полезно в случае, когда вы хотите отказаться от контура для определенных браузеров (например, в случае, если вы хотите объединить контур с падающей тенью; в WebKit контур находится внутри тени; в FireFox это снаружи, поэтому -moz-outline: 0полезно убедиться, что вы не получите корявую линию вокруг красивой тени CSS).
Изменить: некоторые люди отметили, что outlineэто не очень хорошо с IE <8. Хотя это правда; поддержка IE <8 на самом деле не то, что вам следует делать.
-1 за «поддержка IE <8 на самом деле не то, что вам следует делать». Не поддерживать IE6 может быть нормально. Но не поддерживать IE7 - это смешно, ни один сайт с нетехнической аудиторией не может себе этого позволить
Пекка
6
outlineсуществует со времен CSS2.
BoltClock
156
+1 за то, что не поддерживает IE 7, хотя ваш сайт всегда должен работать и достаточно хорошо выглядеть в IE 7, полная поддержка не требуется. особенно если это просто двухцветная рамка. Я лично использую box-shadow и другие «продвинутые» функции. IE7 не видит тени блока, ... большое дело. нет причин использовать менее подходящее, слишком сложное или даже устаревшее решение, просто чтобы обойти причуды IE7.
Мариан Тайзен,
2
Кроме того, см. Этот справочник для хороших причин доступности: НЕ взламывайте свойство контура в целях дизайна: outlinenone.com
Джоэл Гловье,
11
Предупреждение, outlineменее универсален, чем border. В частности, W3C говорит : «Обратите внимание. Контур одинаков со всех сторон. В отличие от границ, здесь нет свойства « outline-top »или« outline-left » . (Акцент мой.)
Боб Штейн,
68
Это вполне возможно. Требуется небольшая хитрость с CSS!
На самом деле это сложно, но он изящно ухудшается и даже работает в стандартном браузере моего HTC (Android)! Если вы используете border-radius, попробуйте уменьшить радиус внутренней границы на один пиксель, это сделает зазор между двумя закругленными границами почти незаметным.
flu
Это хорошо. Использование, bottom:1pxа не height:100%работало для меня лучше только для нижней границы :)
Ник
если у вас есть отступ для div.border, я обнаружил, что добавление отрицательного поля с теми же размерами для div.border:before, помогло сохранить все внутри. Может есть способ получше? jsFiddle
NW Tech
+1 за использование псевдоэлементов. Я думаю, что этот ответ лучше, чем ответ Williham Totland
Работает хорошо, но только если у вас есть контент с фоном.
Culme
4
Если под «тиснением» вы имеете в виду две границы вокруг друг друга двумя разными цветами, это outlineсвойство есть ( outline-left, outline-right....), но оно плохо поддерживается в семействе IE (а именно, IE6 и 7 вообще его не поддерживают. ). Если вам нужны две границы, лучше всего подойдет второй элемент-оболочка.
Если вы имеете в виду использование двух цветов в одной рамке. Используйте, например,
border-right:1px white solid;
border-left:1px black solid;
border-top:1px black solid;
border-bottom:1px white solid;
border-stylesдля этого тоже есть специальные ( ridge, outsetи inset), но, по моему опыту, они, как правило, различаются в зависимости от браузера.
Я считаю, что он спрашивает что-то вроде того, border : black white; что означает определение двух разных цветов для одной границы, которая выглядит последовательно одновременно.
Tarik
1
@Braveyard ах, понятно. Теоретически это можно было бы использовать, outlineно это не будет работать в IE <8
Пекка
3
Обратите внимание, что есть только контур ... к сожалению, нет таких вещей, как контур-левый, контур-правый, контур-верх или контур-низ.
Дэвид Шеррет
-1
Не возможно, но вы должны проверить , чтобы увидеть , если border-styleзначения нравится inset, outsetили какой - то другой, достигается эффект , который вы хотите .. ( я сомневаюсь , что , хотя .. )
Ответы:
Да: используйте
outline
свойство; он действует как вторая граница за пределами вашей границы. Остерегайтесь, хотя он может нестабильно взаимодействовать с полями, отступами и тенями. В некоторых браузерах вам, возможно, также придется использовать префикс для конкретного браузера; чтобы убедиться, что он его уловит:-webkit-outline
и тому подобное (хотя WebKit, в частности, этого не требует).Это также может быть полезно в случае, когда вы хотите отказаться от контура для определенных браузеров (например, в случае, если вы хотите объединить контур с падающей тенью; в WebKit контур находится внутри тени; в FireFox это снаружи, поэтому
-moz-outline: 0
полезно убедиться, что вы не получите корявую линию вокруг красивой тени CSS).Изменить: некоторые люди отметили, что
outline
это не очень хорошо с IE <8. Хотя это правда; поддержка IE <8 на самом деле не то, что вам следует делать.источник
outline
существует со времен CSS2.outline
менее универсален, чемborder
. В частности, W3C говорит : «Обратите внимание. Контур одинаков со всех сторон. В отличие от границ, здесь нет свойства « outline-top »или« outline-left » . (Акцент мой.)Это вполне возможно. Требуется небольшая хитрость с CSS!
Это то, что вы ищете?
источник
border-radius
, попробуйте уменьшить радиус внутренней границы на один пиксель, это сделает зазор между двумя закругленными границами почти незаметным.bottom:1px
а неheight:100%
работало для меня лучше только для нижней границы :)div.border
, я обнаружил, что добавление отрицательного поля с теми же размерами дляdiv.border:before
, помогло сохранить все внутри. Может есть способ получше? jsFiddleДругой способ - использовать
box-shadow
:См. Пример здесь.
источник
Вы пробовали разные стили границ, доступные в спецификации CSS? Уже есть два стиля границ, которые могут удовлетворить ваши потребности:
Или
источник
Контур хорош, но только тогда, когда вы хотите, чтобы граница была вокруг.
Допустим, если вы хотите сделать это только снизу или сверху, вы можете использовать
А для низа:
Надеюсь, это поможет.
источник
Вместо использования неподдерживаемой и проблемной схемы просто используйте
Пример:
HTML:
CSS:
ТЕСТ (JSFiddle) :
Показать фрагмент кода
источник
Если под «тиснением» вы имеете в виду две границы вокруг друг друга двумя разными цветами, это
outline
свойство есть (outline-left
,outline-right
....), но оно плохо поддерживается в семействе IE (а именно, IE6 и 7 вообще его не поддерживают. ). Если вам нужны две границы, лучше всего подойдет второй элемент-оболочка.Если вы имеете в виду использование двух цветов в одной рамке. Используйте, например,
border-styles
для этого тоже есть специальные (ridge
,outset
иinset
), но, по моему опыту, они, как правило, различаются в зависимости от браузера.источник
border : black white;
что означает определение двух разных цветов для одной границы, которая выглядит последовательно одновременно.outline
но это не будет работать в IE <8Не возможно, но вы должны проверить , чтобы увидеть , если
border-style
значения нравитсяinset
,outset
или какой - то другой, достигается эффект , который вы хотите .. ( я сомневаюсь , что , хотя .. )CSS3 имеет свойства border-image , но я пока не знаю о поддержке браузерами (подробнее см. Http://www.css3.info/preview/border-image/ ).
источник
Просто напишите
style="border:medium double;"
для тега html
источник
Вы могли бы использовать
источник
Это производит приятный эффект.
источник