Tüm eleman genişliğine border-width eklemeden css kullanarak herhangi bir elemana nasıl border verilir?

Tüm eleman genişliğine border-width eklemeden css kullanarak herhangi bir elemana nasıl border verilir?

Photoshop'ta olduğu gibi vuruş verebiliriz - İçeride, merkezde ve dışarıda

Varsayılan css kenarlık özelliklerinin, photoshop'ta merkez gibi merkez olduğunu düşünüyorum, değil mi?

Dışarıda değil kutunun içine kenarlık vermek istiyorum. ve kutu genişliğine sınır genişliğini dahil etmek istemezsiniz.

outline:1px solid white;

Bu ekstra genişlik ve yüksekliği eklemeyecektir.

CSS kutu boyutlandırmasına göz atın ...

Kutu boyutlandırma CSS3 özelliği bunu yapabilir. Kenarlık kutusu değeri (içerik kutusu varsayılanının aksine), son oluşturulan kutuyu bildirilen genişliğe ve kutunun içindeki herhangi bir kenarlık ve dolgu kesimine dönüştürür. Artık öğenizin piksel tabanlı dolgu ve kenarlık dahil% 100 genişlikte olduğunu güvenle beyan edebilir ve hedefinizi mükemmel şekilde gerçekleştirebilirsiniz.

• -webkit-box-boyutlandırma: border-box; / * Safari / Chrome, diğer WebKit * /
• -moz-box-boyutlandırma: border-box; / * Firefox, diğer Gecko * /
• kutu boyutlandırma: border-box; / * Opera / IE 8+ * /

Bunu sizin için halletmek için bir mixin oluşturmanızı öneririm. Kutu boyutuyla ilgili daha fazla bilgiyi W3c http://www.w3schools.com/cssref/css3_pr_box-sizing.asp adresinde bulabilirsiniz.

Amaçladığınız tarayıcı desteğine bağlı olarak box-shadowözelliği kullanabilirsiniz .

Bulanıklık değerini 0'a ve yayılmayı peşinde olduğunuz kalınlığa ayarlayabilirsiniz. Kutu gölgesinin harika yanı, dışarıda mı (varsayılan olarak) yoksa içeride mi (varsayılan olarak) çizileceğini kontrol edebilmenizdir.inset özelliği .

Misal:

box-shadow: 0 0 0 1px black; // Outside black border 1px

veya

box-shadow: 0 0 0 1px white inset; // Inside white border 1px

Kutu gölgesi kullanmanın en büyük avantajlarından biri, birden fazla kutu gölgesi kullanarak yaratıcı olabilmenizdir:

box-shadow: 0 0 0 3px black, 0 0 0 1px white inset;

Söyleyemeyeceğim tek şey, bunun işleme performansını akıllı hale getireceği fark. Bu tekniği ekranda aynı anda kullanan yüzlerce öğenin olması bir sorun haline gelebilir.

Ben de aynı sorunla karşılaştım.

.right-border {
    position: relative;
}

.right-border:after {
    content: '';
    display: block;
    position: absolute;
        top: 0; right: 0;
    width: 1px;
    height: 100%;
    background: #e0e0e0;
}

Bu cevap, tek bir tarafı belirlemenizi sağlar. Kutu gölgesi kullanmanın aksine IE8 + 'da çalışır.

Elbette, belirli bir tarafı ayırmanız gerektiğinden sözde öğelerinizin özelliklerini değiştirin.

* Yeni ve geliştirilmiş *

&:before {
content: '';
display: block;
position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
border: 1px solid #b7b7b7;
}

Bu, kenarlığı kullanma ve bir kutunun birden çok tarafına vurma yeteneği sağlar.

Div genişliğini değiştirmeden bir div İÇİNDEbox-sizing: border-box kenarlık oluşturmak için kullanın .

Div genişliğini değiştirmeden bir div DIŞINDAoutline bir kenarlık oluşturmak için kullanın .

İşte bir örnek: https://jsfiddle.net/4000cae9/1/

Notlar: border-boxşu anda IE tarafından desteklenmemektedir

Destek:

http://caniuse.com/#feat=outline

http://caniuse.com/#search=border-box

#test, #test2 {
    width: 100px;
    height:100px;
    background-color:yellow;
}
#test {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: 10px dashed blue;
}
#test2 {
    outline: 10px dashed red;
}


<p>Use box-sizing: border-box to create a border INSIDE a div without modifying div width.</p>
<div id="test">border-box</div>
<p>Use outline to create a border OUTSIDE a div without modifying div width.</p>
<div id="test2">outline</div>

Abenson'un dediği gibi, bir taslak kullanabilirsiniz, ancak bir fark, Opera'nın "dikdörtgen olmayan bir şekil" çizebileceğidir. İşe yarayan başka bir seçenek de şu css gibi negatif kenar boşlukları kullanmaktır:

div {
  float:left;
  width: 50%;
  border:1px solid black;
  margin: -1px;

}

Bu html ile:

<body>
  <div>A block</div>
  <div>Another block</div>
</body>

Daha az temiz bir seçenek, html'ye fazladan işaretleme eklemektir. Örneğin, bir dış elemanın genişliğini ayarlarsınız ve iç kenarlığı eklersiniz. CSS:

.outer { width: 50%; float: left;}
.inner { border: 1px solid black; }

Ve html:

<body>
  <div class="outer">
    <div class="inner">A block</div>
  </div>
  <div class="outer">
    <div class="inner">Another block</div>
  <div>
</body>

Kenarlık olmadığında dolgu kullanın. Bir sınır olduğunda dolguyu kaldırın.

.myDiv {
    width: 100px;
    height: 100px;
    padding-left: 2px;
    padding-right: 2px;
}

.myDiv:hover {
    padding-left: 0;
    padding-right: 0;
    border-left: 2px solid red;
    border-right: 2px solid red;
}

Esasen, 2px dolgusunu 2px kenarlıklarıyla değiştirin. Div boyutu aynı kalır.

Sizin durumunuzda, dolgudan sınırın yarısını çıkararak onu değiştirebilir misiniz? (Kenarlığınız 5 piksel genişliğindeyse dolgudan -2,5, daha küçük gitmek için kutunun toplam genişliğini azaltmanız için negatif dolgunuz olamaz). Genel kutuyu aynı boyutta tutmak için kenar boşluğuna fazladan 2,5 piksel ekleyebilirsiniz.

Bu öneriyi gerçekten beğenmedim, ama bunu temiz bir şekilde halletmenin bir yolu olduğunu sanmıyorum.

Yani, iyi bilinen IE kutusu modeli hatasıyla aynı şeyi mi elde etmeye çalışıyorsunuz ? Bu mümkün değil. Veya yalnızca Windows üzerinde IE ile istemcileri desteklemek ve IE'yi tuhaf moda zorlayan bir belge türü seçmek istiyorsunuz .

Arka plan renginiz düz ise başka bir seçenek:

body { background-color: #FFF; }

.myDiv {
    width: 100px;
    height: 100px;
    border: 3px solid #FFF;  // Border is essentially invisible since background is also #FFF;
}

.myDiv:hover {
    border-color: blue;  // Just change the border color
}

anahat: 3px düz siyah || kenarlık: 3px düz siyah

div{
height:50px;
width:150px;
text-align:center;

}

div{    /*this is what you need ! */
outline:1px solid black
}

<div>
hello world
</div>