Due bordi di colore

Il cliente desidera due bordi di colore per un aspetto in rilievo. Posso farlo su un elemento? Speravo di evitare di impilare due elementi DOM con bordi individuali.

Sì: usa la outlineproprietà; funge da secondo confine al di fuori del tuo confine. Attenzione, però, può interagire in modo traballante con margini, imbottiture e ombre. In alcuni browser potrebbe essere necessario utilizzare anche un prefisso specifico del browser; per essere sicuri che lo rilevi: -webkit-outlinee simili (sebbene WebKit in particolare non lo richieda).

Questo può essere utile anche nel caso in cui si desidera eliminare il contorno per alcuni browser (come nel caso in cui si desideri combinare il contorno con un'ombra esterna; in WebKit il contorno è all'interno dell'ombra; in FireFox è all'esterno, quindi -moz-outline: 0è utile per assicurarti di non ottenere una linea nodosa attorno alla tua bellissima ombra esterna CSS).

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

Modifica: alcune persone hanno osservato che outlinenon va bene con IE <8. Anche se questo è vero; supportare IE <8 non è davvero qualcosa che dovresti fare.

Questo è molto possibile. Ci vuole solo un piccolo trucco 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>

È quello che stai cercando?

Un altro modo è usare 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>

Vedi esempio qui.

Hai provato i diversi stili di bordo disponibili nelle specifiche CSS? Esistono già due stili di bordo che potrebbero soddisfare le tue esigenze:

border-style: ridge;

O

border-style: groove;

Il contorno è buono, ma solo quando vuoi il bordo tutt'intorno.

Diciamo che se vuoi farlo solo in basso o in alto puoi usare

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

E per il fondo:

<style>

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

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

Spero che questo aiuti.

Invece di usare schemi non supportati e problematici, usa solo

• background-color + padding per il bordo interno
• bordo normale per quello esterno.

Esempio:

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

TEST (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" />

Se per "goffratura" intendi due bordi l'uno attorno all'altro con due colori diversi, c'è la outlineproprietà ( outline-left, outline-right....) ma è scarsamente supportata nella famiglia IE (vale a dire, IE6 e 7 non la supportano affatto ). Se hai bisogno di due bordi, un secondo elemento wrapper sarebbe davvero il migliore.

Se intendi usare due colori nello stesso bordo. Usa ad es

border-right: 1px white solid;
border-left: 1px black solid;
border-top: 1px black solid;
border-bottom: 1px white solid;

ci sono speciali border-stylesanche per questo ( ridge, outsete inset), ma tendono a variare tra i vari browser nella mia esperienza.

Non è possibile, ma dovresti controllare se border-stylevalori come inset, outseto qualche altro, hanno ottenuto l'effetto desiderato .. (ne dubito però .. )

CSS3 ha le proprietà border-image , ma non conosco ancora il supporto dai browser (maggiori informazioni su http://www.css3.info/preview/border-image/ ) ..

Scrivi semplicemente

style="border:medium double;"

per il tag html

Potresti usare

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

Questo produce un bell'effetto.

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