1. дома
  2. Вопрос и ответ
  3. Две цветные границы

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

2010-10-11 2 views
83

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

источник

2010-10-11 DrANoel

+0

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

ответ

2

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

источник

2010-10-11 14:13:49

+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/).

источник

2010-10-11 14:17:40

+0

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

+0

@Braveyard, * chuckle * good point :) –

130

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

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

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

Edit: Некоторые люди отмечают, что outline не джайв хорошо с IE < 8. В то время как это верно; поддержка IE < 8 действительно не то, что вы должны делать.

источник

2010-10-11 14:17:59

+0

К сожалению, 'outline' вообще не работает в IE6/7. –

+27

-1 для «поддержки IE <8 действительно не то, что вы должны делать».Не поддерживать IE6 может быть хорошо. Но не поддерживать IE7 смешно, ни один сайт с нетехнической аудиторией не может позволить себе это –

+5

'outline' было вокруг с CSS2. – BoltClock

-1

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

style="border:medium double;"

для HTML тега

источник

2010-10-11 14:23:24 Wazzzy

+1

Это дает две границы с одним цветом между ними. –

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>

См example здесь.

источник

2010-10-11 14:27:35 livibetter

+1

+1, это здорово, но не будет работать ни в одном IE .. –

+1

К счастью, теперь работает в IE9: http://jsbin.com/eyasuk/1. –

+0

Я предпочитаю это, так как он работает с граничным радиусом в отличие от метода контура. – Johan

18

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

border-style: ridge;

Или

border-style: groove;

источник

2010-10-11 17:27:48

+1

Это именно то, что мне нужно. (Исправление

в IE8) – DOOManiac

57

Это очень возможно. Это просто требует немного 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; 
}

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

источник

2011-09-30 19:37:12 rkingon

+0

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

+0

Я использую это - и он работает БОЛЬШОЕ! – Fruxelot

+0

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

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

источник

2012-05-07 17:55:30 Gandalf

-2

Это производит хороший эффект.

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

источник

2012-08-02 18:34:53 SorcyCat

4

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

  • цвета фона + отступы для внутренней границы
  • нормальной границы для внешнего.

Пример:

HTML:

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

УС:

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

ТЕСТ (JSFiddle):http://jsfiddle.net/68gb7/

источник

2012-09-13 17:23:39

+0

Хорошо работает, но только если у вас есть контент с фоном. – Culme

12

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

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

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

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

источник

2013-09-03 06:44:21

Смежные вопросы

 Смежные вопросы