Две цветные границы


96

Клиент хочет двухцветные рамки для тисненого вида. Могу я сделать это с одним элементом? Я надеялся избежать объединения двух элементов DOM с отдельными границами.


Вы хотите использовать Javascript для достижения эффекта? jquery.malsup.com/corner
nopuck4you

Ответы:


140

Да: используйте outlineсвойство; он действует как вторая граница за пределами вашей границы. Остерегайтесь, хотя он может нестабильно взаимодействовать с полями, отступами и тенями. В некоторых браузерах вам, возможно, также придется использовать префикс для конкретного браузера; чтобы убедиться, что он его уловит: -webkit-outlineи тому подобное (хотя WebKit, в частности, этого не требует).

Это также может быть полезно в случае, когда вы хотите отказаться от контура для определенных браузеров (например, в случае, если вы хотите объединить контур с падающей тенью; в WebKit контур находится внутри тени; в FireFox это снаружи, поэтому -moz-outline: 0полезно убедиться, что вы не получите корявую линию вокруг красивой тени CSS).

.someclass {
  border: 1px solid blue;
  outline: 1px solid darkblue;
}

Изменить: некоторые люди отметили, что outlineэто не очень хорошо с IE <8. Хотя это правда; поддержка IE <8 на самом деле не то, что вам следует делать.


27
-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!

div.border {
  border: 1px solid #000;
  position: relative;
}

div.border:before {
  position: absolute;
  display: block;
  content: '';
  border: 1px solid red;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
<div class="border">Hi I have two border colors<br />I am also Fluid</div>

Это то, что вы ищете?


На самом деле это сложно, но он изящно ухудшается и даже работает в стандартном браузере моего HTC (Android)! Если вы используете border-radius, попробуйте уменьшить радиус внутренней границы на один пиксель, это сделает зазор между двумя закругленными границами почти незаметным.
flu

Это хорошо. Использование, bottom:1pxа не height:100%работало для меня лучше только для нижней границы :)
Ник

если у вас есть отступ для div.border, я обнаружил, что добавление отрицательного поля с теми же размерами для div.border:before, помогло сохранить все внутри. Может есть способ получше? jsFiddle
NW Tech

+1 за использование псевдоэлементов. Я думаю, что этот ответ лучше, чем ответ Williham Totland
Матиас Канепа

Это круто! :)
BennKingy

33

Другой способ - использовать box-shadow:

#mybox {
box-shadow:
  0 0 0 1px #CCC,
  0 0 0 2px #888,
  0 0 0 3px #444,
  0 0 0 4px #000;
-moz-box-shadow:
  0 0 0 1px #CCC,
  0 0 0 2px #888,
  0 0 0 3px #444,
  0 0 0 4px #000;
-webkit-shadow:
  0 0 0 1px #CCC,
  0 0 0 2px #888,
  0 0 0 3px #444,
  0 0 0 4px #000;
}

<div id="mybox">ABC</div>

См. Пример здесь.


Я предпочитаю это, так как он работает с border-radius в отличие от метода контура
Йохан

18

Вы пробовали разные стили границ, доступные в спецификации CSS? Уже есть два стиля границ, которые могут удовлетворить ваши потребности:

border-style: ridge;

Или

border-style: groove;

1
Это было именно то, что мне было нужно. (Исправление <fieldset> в IE8)
DOOManiac

15

Контур хорош, но только тогда, когда вы хотите, чтобы граница была вокруг.

Допустим, если вы хотите сделать это только снизу или сверху, вы можете использовать

<style>

  #border-top {
  border-top: 1px solid  #ccc;
  box-shadow: inset 0 1px 0 #fff;
}
</style>

<p id="border-top">This is my content</p>

А для низа:

<style>

      #border-bottom {
      border-top: 1px solid  #ccc;
      box-shadow: 0 1px 0 #fff;
    }
</style>

    <p id="border-bottom">This is my content</p>

Надеюсь, это поможет.


6

Вместо использования неподдерживаемой и проблемной схемы просто используйте

  • background-color + padding для внутренней границы
  • нормальная граница для внешней.

Пример:

HTML:

<img src="http://cdn3.thumbs.common.smcloud.net/common/8/6/s/863444wpPN.jpg/r-0,500-n-863444wpPN.jpg" alt="malkovich" />

CSS:

img {
    padding: 1px;
    background: yellow;
    border:1px solid black;
}

ТЕСТ (JSFiddle) :


Работает хорошо, но только если у вас есть контент с фоном.
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), но, по моему опыту, они, как правило, различаются в зависимости от браузера.


3
Я считаю, что он спрашивает что-то вроде того, border : black white; что означает определение двух разных цветов для одной границы, которая выглядит последовательно одновременно.
Tarik

1
@Braveyard ах, понятно. Теоретически это можно было бы использовать, outlineно это не будет работать в IE <8
Пекка

3
Обратите внимание, что есть только контур ... к сожалению, нет таких вещей, как контур-левый, контур-правый, контур-верх или контур-низ.
Дэвид Шеррет

-1

Не возможно, но вы должны проверить , чтобы увидеть , если border-styleзначения нравится inset, outsetили какой - то другой, достигается эффект , который вы хотите .. ( я сомневаюсь , что , хотя .. )

CSS3 имеет свойства border-image , но я пока не знаю о поддержке браузерами (подробнее см. Http://www.css3.info/preview/border-image/ ).


В мире программирования нет ничего невозможного: P ну, мне нравится делать это утверждение все время :)
Tarik

-1

Просто напишите

style="border:medium double;"

для тега html


1
Это дает две границы с одним цветом между ними.
Williham Totland,

-1

Вы могли бы использовать

<html>
<head>
<title>Two Colors</title>
<style type="text/css">

.two-colors {
background: none repeat scroll 0% 0% rgb(245, 245, 245); border-color: rgba(111,111,111,0.2) transparent;
 padding: 4px; outline: 1px solid green;
}

</style>

<style type="text/css">
      body {
        padding-top: 20px;
        padding-bottom: 40px;
        background-color:yellow;        
      }
    </style>

</head>
<body>
<a target="_blank" href="people.htm">
  <img class="two-colors" src="people.jpg" alt="Klematis" width="213" height="120" />
  </a>

</body>
</html>

-2

Это производит приятный эффект.

<div style="border: 1px solid gray; padding: 1px">
<div style="border: 1px solid gray">
   internal stuff
</div>
</div>
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.