CSS'de kesikli kenar çizgileri arasındaki uzunluğu ve mesafeyi kontrol etmek mümkün müdür?

Aşağıdaki bu örnek, tarayıcılar arasında farklı şekilde görüntülenir:

div {
  border: dashed 4px #000;
  padding: 20px;
  display: inline-block;
}

<div>I have a dashed border!</div>

Büyük farklar: IE 11 / Firefox / Chrome

Kesikli kenarlık görünümü üzerinde daha fazla kontrol sağlayabilecek herhangi bir yöntem var mı?

Css render tarayıcıya özeldir ve üzerinde herhangi bir ince ayar bilmiyorum, Ham tarafından tavsiye edilen resimlerle çalışmalısınız. Referans: http://www.w3.org/TR/CSS2/box.html#border-style-properties

Yerel kesikli kenarlık özelliği değeri, çizgiler üzerinde kontrol sağlamaz ... bu yüzden border-imageözelliği getirin!

İle kendi sınırınızı oluşturun border-image

Uyumluluk : Harika bir tarayıcı desteği sunar (IE 11 ve tüm modern tarayıcılar). Daha eski tarayıcılar için bir yedek olarak normal bir sınır belirlenebilir.

Hadi bunları oluşturalım

Bu sınırlar, aynı çapraz tarayıcıyı gösterecektir!

Adım 1 - Uygun bir görüntü oluşturun

Bu örnek 15 piksel genişliğinde ve 15 piksel yüksekliğindedir ve boşluklar şu anda 5 piksel genişliğindedir. Şeffaflık içeren bir .png dosyasıdır.

Photoshop yakınlaştırıldığında şöyle görünüyor:

Ölçeklendirmek böyle görünüyor:

Boşluğu ve strok uzunluğunu kontrol etme

Daha geniş / daha kısa boşluklar veya konturlar oluşturmak için görüntüdeki boşlukları veya konturları genişletin / kısaltın.

İşte 10 piksellik daha geniş boşluklara sahip bir resim:

doğru ölçeklenmiş =

2. Adım - CSS'yi oluşturun - bu örnek 4 temel adım gerektirir

1. Border-image-source tanımlayın :

   border-image-source:url("http://i.stack.imgur.com/wLdVc.png");  

2. İsteğe bağlı - border-image-width'i tanımlayın :

   border-image-width: 1;

   Varsayılan değer 1'dir. Bir piksel değeri, yüzde değeri veya başka bir kat (1x, 2x, 3x vb.) İle de ayarlanabilir. Bu, herhangi bir border-widthseti geçersiz kılar .

3. Border-image-slice tanımlayın :

   Bu örnekte, görüntülerin üst, sağ, alt ve sol kenarlıklarının kalınlığı 2 pikseldir ve bunların dışında boşluk yoktur, dolayısıyla dilim değerimiz 2'dir:

   border-image-slice: 2; 

   Dilimler şöyle görünür, üstten, sağdan, alttan ve soldan 2 piksel:

   

4. Border-image-tekrarını tanımlayın :

   Bu örnekte, örüntünün div'in etrafında eşit olarak kendini tekrar etmesini istiyoruz. Bu yüzden biz seçiyoruz:

   border-image-repeat: round;

Steno yazma

Yukarıdaki özellikler ayrı ayrı veya border-image kullanılarak kısaca ayarlanabilir :

border-image: url("http://i.stack.imgur.com/wLdVc.png") 2 round;

Tam örnek

Geri border: dashed 4px #000dönüşe dikkat edin. Desteklemeyen tarayıcılar bu sınırı alacaktır.

.bordered {
  display: inline-block;
  padding: 20px;
  /* Fallback dashed border
     - the 4px width here is overwritten with the border-image-width (if set)
     - the border-image-width can be omitted below if it is the same as the 4px here
  */
  border: dashed 4px #000;
  
  /* Individual border image properties */
  border-image-source: url("http://i.stack.imgur.com/wLdVc.png");
  border-image-slice: 2;
  border-image-repeat: round;  
  
  /* or use the shorthand border-image */
  border-image: url("http://i.stack.imgur.com/wLdVc.png") 2 round;
}


/*The border image of this one creates wider gaps*/
.largeGaps {
  border-image-source: url("http://i.stack.imgur.com/LKclP.png");
  margin: 0 20px;
}

<div class="bordered">This is bordered!</div>

<div class="bordered largeGaps">This is bordered and has larger gaps!</div>

Özelliğe ek olarak, border-imagekontur uzunluğu ve aralarındaki mesafe üzerinde kontrole sahip kesikli bir kenarlık oluşturmanın birkaç başka yolu vardır. Aşağıda açıklanmıştır:

Yöntem 1: SVG'yi Kullanma

Kesikli kenarlığı a pathveya bir polygoneleman kullanarak ve stroke-dasharrayözelliği ayarlayarak oluşturabiliriz . Özellik, biri tirenin boyutunu, diğeri de aralarındaki boşluğu belirleyen iki parametre alır.

Artıları:

1. Doğası gereği SVG'ler ölçeklenebilir grafiklerdir ve herhangi bir konteyner boyutuna uyarlanabilir.
2. border-radiusİşin içinde olsa bile çok iyi çalışabilir . Biz sadece yerine olurdu pathbir ile circleolduğu gibi bu cevap (veya) dönüştürmek pathbir daire içine.
3. SVG için tarayıcı desteği oldukça iyidir ve geri dönüş, IE8- için VML kullanılarak sağlanabilir.

Eksileri:

1. Kabın boyutları orantılı olarak değişmediğinde, yollar ölçeklenme eğilimindedir ve bu da tirenin boyutunda ve aralarındaki boşlukta bir değişikliğe neden olur (ön bilgideki ilk kutuya gelmeyi deneyin). Bu, eklenerek kontrol edilebilir vector-effect='non-scaling-stroke'(ikinci kutuda olduğu gibi) ancak bu özellik için tarayıcı desteği IE'de sıfırdır.

.dashed-vector {
  position: relative;
  height: 100px;
  width: 300px;
}
svg {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
}
path{
  fill: none;
  stroke: blue;
  stroke-width: 5;
  stroke-dasharray: 10, 10;
}
span {
  position: absolute;
  top: 0px;
  left: 0px;
  padding: 10px;
}


/* just for demo */

div{
  margin-bottom: 10px;
  transition: all 1s;
}
div:hover{
  height: 100px;
  width: 400px;
}

<div class='dashed-vector'>
  <svg viewBox='0 0 300 100' preserveAspectRatio='none'>
    <path d='M0,0 300,0 300,100 0,100z' />
  </svg>
  <span>Some content</span>
</div>

<div class='dashed-vector'>
  <svg viewBox='0 0 300 100' preserveAspectRatio='none'>
    <path d='M0,0 300,0 300,100 0,100z' vector-effect='non-scaling-stroke'/>
  </svg>
  <span>Some content</span>
</div>

Yöntem 2: Degradeleri Kullanma

linear-gradientKesikli bir sınır efekti oluşturmak için birden fazla arka plan görüntüsü kullanabilir ve bunları uygun şekilde konumlandırabiliriz. Bu aynı zamanda a ile de yapılabilir, repeating-linear-gradientancak her bir gradyanı yalnızca bir yönde tekrarlamak için ihtiyacımız olduğundan, yinelenen bir gradyan kullanılması nedeniyle çok fazla gelişme yoktur.

.dashed-gradient{
  height: 100px;
  width: 200px;
  padding: 10px;
  background-image: linear-gradient(to right, blue 50%, transparent 50%), linear-gradient(to right, blue 50%, transparent 50%), linear-gradient(to bottom, blue 50%, transparent 50%), linear-gradient(to bottom, blue 50%, transparent 50%);
  background-position: left top, left bottom, left top, right top;
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-size: 20px 3px, 20px 3px, 3px 20px, 3px 20px;
}

.dashed-repeating-gradient {
  height: 100px;
  width: 200px;
  padding: 10px;
  background-image: repeating-linear-gradient(to right, blue 0%, blue 50%, transparent 50%, transparent 100%), repeating-linear-gradient(to right, blue 0%, blue 50%, transparent 50%, transparent 100%), repeating-linear-gradient(to bottom, blue 0%, blue 50%, transparent 50%, transparent 100%), repeating-linear-gradient(to bottom, blue 0%, blue 50%, transparent 50%, transparent 100%);
  background-position: left top, left bottom, left top, right top;
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-size: 20px 3px, 20px 3px, 3px 20px, 3px 20px;
}

/* just for demo */

div {
  margin: 10px;
  transition: all 1s;
}
div:hover {
  height: 150px;
  width: 300px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class='dashed-gradient'>Some content</div>
<div class='dashed-repeating-gradient'>Some content</div>

Artıları:

1. Ölçeklenebilir ve konteynerin boyutları dinamik olsa bile uyarlanabilir.
2. Herhangi bir ekstra sözde unsur kullanmaz, bu da başka herhangi bir potansiyel kullanım için ayrı tutulabilecekleri anlamına gelir.

Eksileri:

1. Doğrusal gradyanlar için tarayıcı desteği nispeten daha düşüktür ve IE 9-'u desteklemek istiyorsanız bu bir uygulama değildir. CSS3 PIE gibi kütüphaneler bile IE8-'de gradyan desenlerinin oluşturulmasını desteklemez.
2. border-radiusArka planlar temel alınarak eğri olmadığından dahil olduğunda kullanılamaz border-radius. Bunun yerine kırpılırlar.

Yöntem 3: Kutu Gölgeleri

Sözde elemanları kullanarak küçük bir çubuk (çizgi şeklinde) oluşturabilir ve ardından box-shadowaşağıdaki parçadaki gibi bir kenarlık oluşturmak için bunun birden fazla versiyonunu oluşturabiliriz.

Kesik çizgi bir kare şeklindeyse, tek bir sözde öğe yeterli olacaktır, ancak bu bir dikdörtgense, üst + alt kenarlıklar için bir sözde öğeye ve sol + sağ kenarlıklar için bir diğerine ihtiyacımız olacaktır. Bunun nedeni, üst sınırdaki çizgi için yükseklik ve genişliğin soldakinden farklı olmasıdır.

Artıları:

1. Çizginin boyutları, sözde elemanın boyutları değiştirilerek kontrol edilebilir. Aralık, her gölge arasındaki boşluk değiştirilerek kontrol edilebilir.
2. Her kutu gölgesine farklı bir renk eklenerek çok özgün bir efekt üretilebilir.

Eksileri:

1. Çizginin boyutlarını ve aralığı manuel olarak ayarlamamız gerektiğinden, bu yaklaşım, ana kutunun boyutları dinamik olduğunda işe yaramaz.
2. IE8 ve altı kutu gölgesini desteklemez . Bununla birlikte, CSS3 PIE gibi kütüphaneler kullanılarak bunun üstesinden gelinebilir.
3. Birlikte kullanılabilir, border-radiusancak bunları konumlandırmak, bir daire üzerinde noktalar (ve muhtemelen hatta transform) bulmak zorunda kalmakla çok zor olacaktır .

.dashed-box-shadow{
  position: relative;
  height: 120px;
  width: 120px;
  padding: 10px;
}
.dashed-box-shadow:before{ /* for border top and bottom */
  position: absolute;
  content: '';
  top: 0px;
  left: 0px;
  height: 3px; /* height of the border top and bottom */
  width: 10px; /* width of the border top and bottom */
  background: blue; /* border color */
  box-shadow: 20px 0px 0px blue, 40px 0px 0px blue, 60px 0px 0px blue, 80px 0px 0px blue, 100px 0px 0px blue, /* top border */
    0px 110px 0px blue, 20px 110px 0px blue, 40px 110px 0px blue, 60px 110px 0px blue, 80px 110px 0px blue, 100px 110px 0px blue; /* bottom border */
}
.dashed-box-shadow:after{ /* for border left and right */
  position: absolute;
  content: '';
  top: 0px;
  left: 0px;
  height: 10px; /* height of the border left and right */
  width: 3px; /* width of the border left and right */
  background: blue; /* border color */
  box-shadow: 0px 20px 0px blue, 0px 40px 0px blue, 0px 60px 0px blue, 0px 80px 0px blue, 0px 100px 0px blue, /* left border */
    110px 0px 0px blue, 110px 20px 0px blue, 110px 40px 0px blue, 110px 60px 0px blue, 110px 80px 0px blue, 110px 100px 0px blue; /* right border */
}

<div class='dashed-box-shadow'>Some content</div>

Kısa olan: Hayır, değil. Bunun yerine resimlerle çalışmanız gerekecek.

@Kovart tarafından yapılmış , kesikli sınır üreteci adı verilen harika bir araç var .

İstediğiniz çizgi çizgi dizisini ayarlamaya izin vermek için arka plan görüntüsü olarak bir svg kullanır ve oldukça kullanışlıdır.

Daha sonra bunu, sınır yerine öğenizde arka plan özelliği olarak kullanırsınız:

div {
  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='black' stroke-width='4' stroke-dasharray='6%2c 14' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
  padding: 20px;
  display: inline-block;
}

Strok uzunluğu, strok genişliğine bağlıdır. Genişliği artırarak uzunluğu artırabilir ve sınırın bir kısmını iç elemanla gizleyebilirsiniz.

.thin {
    background: #F4FFF3;
    border: 2px dashed #3FA535;  
    position: relative;
}

.thin:after {
    content: '';
    position: absolute;
    left: -1px;
    top: -1px;
    right: -1px;
    bottom: -1px;
    border: 1px solid #F4FFF3;
}

https://jsfiddle.net/ok6srt2z/

Geçenlerde aynı sorunu yaşadım.

Bunu, sınırı taşıyan (biri yatay, diğeri dikey) ve sonra dönüştüren iki mutlak konumlandırılmış div ile çözmeyi başardım. Dış kutunun göreceli olarak konumlandırılması gerekiyor.

<div class="relative">
    <div class="absolute absolute--fill overflow-hidden">
        <div class="absolute absolute--fill b--dashed b--red"
            style="
                border-width: 4px 0px 4px 0px;
                transform: scaleX(2);
        "></div>
        <div class="absolute absolute--fill b--dashed b--red"
            style="
                border-width: 0px 4px 0px 4px;
                transform: scaleY(2);
        "></div>
    </div>

    <div> {{Box content goes here}} </div>
</div>

Not: Bu örnekte takyon kullandım, ancak sanırım sınıflar bir tür kendinden açıklamalı.

Bu, div üzerindeki class = "sınıfım" ı kullanarak turuncu ve gri bir kenarlık oluşturacaktır.

.myclass {
    outline:dashed darkorange  12px;
    border:solid slategray  14px;
    outline-offset:-14px;
}