Две цветовые границы - PullRequest
Новая
       11

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

86 голосов
/ 11 октября 2010

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

Ответы [ 11 ]

134 голосов
/ 11 октября 2010

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

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

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

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

60 голосов
/ 30 сентября 2011

Это очень возможно. Это займет немного CSS-хитрости!

jsFiddle 

<div class="border">
    Hi I have two border colors<br />
    I am also Fluid
</div>

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;
}

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

33 голосов
/ 11 октября 2010

Другой способ - использовать 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>

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

18 голосов
/ 11 октября 2010

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

border-style: ridge;

Или 

border-style: groove;
14 голосов
/ 03 сентября 2013

Схема хороша, но только если вы хотите, чтобы граница была круговой.

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

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

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

5 голосов
/ 13 сентября 2012

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

  • 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): http://jsfiddle.net/68gb7/

3 голосов
/ 11 октября 2010

Если под «тиснением» вы подразумеваете две границы вокруг друг друга двумя разными цветами, существует свойство 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), но в моем опыте они различаются для разных браузеров.

0 голосов
/ 02 августа 2012

Это дает хороший эффект. 

<div style="border: 1px solid gray; padding: 1px">
<div style="border: 1px solid gray">
   internal stuff
</div>
</div>
0 голосов
/ 07 мая 2012

Вы можете использовать 

<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>
0 голосов
/ 11 октября 2010

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

style="border:medium double;"

для тега html

Страница:
...