İki renkli kenarlık

Müşteri, kabartmalı bir görünüm için iki renkli kenarlık istiyor. Bunu tek bir unsurda yapabilir miyim? İki DOM öğesini ayrı sınırlarla istiflemekten kaçınmayı umuyordum.

Evet: outlineMülkü kullanın ; sınırınızın dışında ikinci bir sınır görevi görür. Dikkatli olun, tho ', kenar boşlukları, dolgular ve alt gölgelerle riskli bir şekilde etkileşime girebilir. Bazı tarayıcılarda, tarayıcıya özgü bir önek de kullanmanız gerekebilir; onu yakaladığından emin olmak için: -webkit-outlineve benzeri (özellikle WebKit bunu gerektirmese de).

Bu, belirli tarayıcılar için ana hatları atlamak istediğinizde de yararlı olabilir (örneğin, ana hatları bir alt gölgeyle birleştirmek istiyorsanız; WebKit'te anahat gölgenin içindedir; FireFox'ta dışarıda, bu nedenle -moz-outline: 0güzel CSS alt gölgenizin etrafında düzensiz bir çizgi oluşmadığından emin olmak için kullanışlıdır).

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

Düzenleme: Bazı insanlar outlineIE <8 ile pek uyuşmadığını belirtmişlerdir . Bu doğru olsa da; IE <8'i desteklemek gerçekten yapmanız gereken bir şey değil.

Bu çok mümkün. Sadece biraz CSS hilesi gerekiyor!

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>

Aradığınız şey bu mu?

Başka bir yol kullanmaktır 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>

Buradaki örneğe bakın .

CSS spesifikasyonunda bulunan farklı kenarlık stillerini denediniz mi? İhtiyaçlarınızı karşılayabilecek halihazırda iki kenar stili vardır:

border-style: ridge;

Veya

border-style: groove;

Anahat iyidir, ancak yalnızca her yerde sınırı istediğinizde.

Diyelim ki sadece alttan mı yoksa üstten mi yapmak istiyorsanız kullanabilirsiniz

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

Ve en altta:

<style>

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

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

Umarım bu yardımcı olur.

Desteklenmeyen ve sorunlu taslağı kullanmak yerine sadece

• iç kenarlık için arka plan rengi + dolgusu
• dış kısım için normal sınır.

Misal:

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

"Kabartma" derken , iki farklı renge sahip birbirinin etrafındaki iki sınırı kastediyorsanız, outlineözellik ( outline-left, outline-right....) vardır, ancak IE ailesinde yeterince desteklenmemektedir (yani, IE6 ve 7 bunu hiç desteklemiyor ). İki kenarlığa ihtiyacınız varsa, ikinci bir sarmalayıcı öğesi gerçekten en iyisidir.

Aynı sınırda iki renk kullanmayı kastediyorsanız. Örneğin kullanın

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

Orada özeldir border-stylesyanı bunun için ( ridge, outsetve inset) ama onlar benim deneyim tarayıcılar arasında farklılık eğilimindedir.

Değil mümkünse, ancak görmek için kontrol etmelidir border-styledeğerler mi inset, outsetya da başka, istediğiniz etkiyi başarılı .. ( ben gerçi şüpheliyim .. )

CSS3, border-image özelliklerine sahiptir, ancak henüz tarayıcıların desteğini bilmiyorum (daha fazla bilgi http://www.css3.info/preview/border-image/ adresinde ) ..

Basitçe yaz

style="border:medium double;"

html etiketi için

Kullanabilirsin

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

Bu hoş bir etki yaratır.

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