Dua batas warna

Klien menginginkan dua batas warna untuk tampilan timbul. Bisakah saya melakukan ini pada satu elemen? Saya berharap untuk menghindari menumpuk dua elemen DOM dengan batas individu.

Ya: Gunakan outlineproperti; itu bertindak sebagai perbatasan kedua di luar perbatasan Anda. Berhati-hatilah, tho ', itu dapat berinteraksi dengan cara miring dengan margin, paddings dan drop-shadow. Di beberapa browser, Anda mungkin juga harus menggunakan awalan khusus browser; untuk memastikannya menangkapnya: -webkit-outlinedan sejenisnya (meskipun WebKit secara khusus tidak memerlukan ini).

Ini juga dapat berguna dalam kasus di mana Anda ingin membuang kerangka untuk browser tertentu (seperti kasus jika Anda ingin menggabungkan garis besar dengan bayangan jatuh; di WebKit garis besar berada di dalam bayangan; di FireFox itu adalah di luar, jadi -moz-outline: 0berguna untuk memastikan bahwa Anda tidak mendapatkan garis kusut di sekitar drop shadow CSS Anda yang indah).

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

Sunting: Beberapa orang berkomentar bahwa outlinetidak cocok dengan IE <8. Meskipun ini benar; mendukung IE <8 sebenarnya bukanlah sesuatu yang harus Anda lakukan.

Ini sangat mungkin. Ini hanya membutuhkan sedikit tipuan 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>

Itukah yang kamu cari?

Cara lain adalah dengan menggunakan 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>

Lihat contoh di sini.

Sudahkah Anda mencoba gaya batas berbeda yang tersedia dalam spesifikasi CSS? Sudah ada dua gaya pembatas yang mungkin mengakomodasi kebutuhan Anda:

border-style: ridge;

Atau

border-style: groove;

Garis luarnya bagus, tetapi hanya jika Anda menginginkan garis tepi di sekeliling.

Katakanlah jika Anda ingin membuatnya hanya di bagian bawah atau atas yang dapat Anda gunakan

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

Dan untuk bagian bawah:

<style>

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

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

Semoga ini bisa membantu.

Alih-alih menggunakan garis besar yang tidak didukung dan bermasalah, gunakan saja

• background-color + padding untuk batas dalam
• batas normal untuk bagian luar.

Contoh:

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

Jika yang Anda maksud dengan "emboss" adalah dua batas yang mengelilingi satu sama lain dengan dua warna berbeda, ada outlineproperti ( outline-left,outline-right ....) tetapi tidak didukung dengan baik di keluarga IE (yaitu, IE6 dan 7 tidak mendukung sama sekali ). Jika Anda membutuhkan dua batas, elemen pembungkus kedua memang yang terbaik.

Jika Anda bermaksud menggunakan dua warna di perbatasan yang sama. Gunakan mis

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

ada yang khusus border-stylesuntuk ini juga ( ridge, outsetdan inset) tetapi mereka cenderung bervariasi di seluruh browser menurut pengalaman saya.

Tidak mungkin, tetapi Anda harus memeriksa untuk melihat apakah border-stylenilai-nilai seperti inset, outsetatau yang lain, mencapai efek yang Anda inginkan .. ( meskipun saya ragu .. )

CSS3 memiliki properti gambar batas , tetapi saya belum mengetahui tentang dukungan dari browser (info lebih lanjut di http://www.css3.info/preview/border-image/ ) ..

Cukup tulis

style="border:medium double;"

untuk tag html

Anda bisa menggunakan

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

Ini menghasilkan efek yang bagus.

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