Дві кольорові межі

Клієнт бажає двох кольорових меж для рельєфного вигляду. Чи можу я це зробити на одному елементі? Я сподівався уникнути складання двох елементів DOM з окремими межами.

Так: використовувати outlineвластивість; він діє як друга межа за межами вашого кордону. Остерігайтеся, адже він може хитро взаємодіяти з полями, прокладками та тінями. У деяких браузерах вам, можливо, доведеться використовувати префікс для певного браузера; для того, щоб переконатися, що він його підхоплює: -webkit-outlineі тому подібне (хоча, зокрема, WebKit цього не вимагає).

Це також може бути корисно у випадку, коли ви хочете викинути контур для певних браузерів (наприклад, якщо ви хочете поєднати контур із тінню; у WebKit контур знаходиться всередині тіні; у FireFox це зовні, тому -moz-outline: 0корисно переконатися, що ви не отримаєте вузької лінії навколо вашої красивої тіні CSS).

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

Редагувати: Деякі люди зауважували, що outlineне вдається з IE <8. Хоча це правда; підтримка IE <8 насправді не те, що ви повинні робити.

Це дуже можливо. Потрібна лише невелика хитрість 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>

Це те, що ви шукаєте?

Інший спосіб - використовувати 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>

Дивіться приклад тут.

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

border-style: ridge;

Або

border-style: groove;

Контур хороший, але лише тоді, коли ви хочете, щоб кордон був навколо.

Скажімо, якщо ви хочете зробити це лише знизу або зверху, ви можете використовувати

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

Сподіваюся, що це допомагає.

Замість використання непідтримуваних та проблемних контурів просто використовуйте

• background-color + відступ для внутрішньої межі
• нормальна межа для зовнішньої.

Приклад:

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

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

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

Якщо під "тисненням" ви маєте на увазі дві межі навколо один одного двома різними кольорами, є 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-styleзначення, наприклад inset, outsetчи якісь інші, досягли бажаного ефекту .. ( я сумніваюся в цьому .. )

CSS3 має властивості border-image , але я ще не знаю про підтримку браузерів (докладніше на http://www.css3.info/preview/border-image/ ).

Просто напишіть

style="border:medium double;"

для тегу html

Ви можете використовувати

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

Це дає приємний ефект.

<div style="border: 1px solid gray; padding: 1px">
<div style="border: 1px solid gray">
   internal stuff
</div>
</div>