التحكم متقطع الحدود السكتة الدماغية طول المسافة بين السكتات الدماغية

Question

هل من الممكن التحكم في طول المسافة بين متقطع الحدود السكتات الدماغية في CSS ؟

هذا المثال أدناه يعرض بشكل مختلف بين المتصفحات:

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

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

الاختلافات الكبيرة:11 IE / فايرفوكس / كروم

هل هناك أي الطرق التي يمكن أن توفر قدرا أكبر من السيطرة على الحدود متقطع المظهر ؟

Answer 1

CSS Render هو متصفح محدد ولا أعرف أي ضبط جيد عليه ، يجب أن تعمل مع الصور كما أوصت به HAM. المرجعي: http://www.w3.org/tr/css2/box.html#border-style-properties

Answer 2

الأم متقطع الحدود قيمة العقار لا نقدم السيطرة على شرطات أنفسهم...حتى تحقيق على border-image الملكية!

الشراب الخاص بك الحدود مع border-image

التوافق:ويقدم المتصفح دعم كبير (أي 11 و جميع المتصفحات الحديثة).عادي الحدود يمكن أن تكون على النحو تراجع عن المتصفحات القديمة.

دعونا إنشاء هذه

هذه الحدود سيتم عرض نفسه تماما عبر متصفح!

الخطوة 1 - إنشاء صورة مناسبة

هذا المثال هو 15 بكسل واسعة من قبل 15 بكسل عالية و الثغرات حاليا 5px واسعة.بل هو .png مع الشفافية.

هذا هو ما يبدو في فوتوشوب عند التكبير:

هذا هو ما يبدو على نطاق واسع:

السيطرة على الفجوة طول السكتة الدماغية

لخلق أوسع / أقصر الثغرات أو السكتات الدماغية ، توسيع / تقصير الثغرات أو السكتات الدماغية في الصورة.

هنا هو صورة أوسع 10px الثغرات:

صحيح تحجيم =

الخطوة 2 - إنشاء CSS — هذا المثال يتطلب 4 خطوات أساسية

1. تعريف الحدود-صورة المصدر:

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

2. اختياري - تحديد الحدود-صورة العرض:

   border-image-width: 1;
   

   القيمة الافتراضية هي 1.فإنه يمكن أيضا أن تكون مع مجموعة بكسل القيمة ، قيمة النسبة المئوية ، أو أخرى متعددة (1x, 2x, 3x الخ).هذا يتجاوز أي border-width تعيين.

3. تعريف الحدود-صورة-شريحة:

   في هذا المثال, سمك الصور أعلى ، أسفل وترك الحدود 2px ، وليس هناك فجوة خارج منهم ، لذلك لدينا شريحة القيمة 2:

   border-image-slice: 2; 
   

   شرائح تبدو مثل هذا ، 2 بكسل من أعلى, يمين, أسفل اليسار:

   

4. تعريف الحدود-صورة-تكرار:

   في هذا المثال نريد نمط تكرار نفسها بشكل متساو حول div.لذلك علينا أن نختار:

   border-image-repeat: round;
   

كتابة الاختزال

خصائص أعلاه يمكن تعيين بشكل فردي أو في الاختزال باستخدام الحدود-صورة:

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

المثال الكامل

ملاحظة border: dashed 4px #000 تراجع.غير دعم المتصفحات سوف تتلقى هذه الحدود.

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

Answer 3

بالإضافة الى border-image الخاصية ، هناك بعض الطرق الأخرى لإنشاء حدود متقطعة مع السيطرة على طول السكتة الدماغية والمسافة بينهما. تم وصفها أدناه:

الطريقة 1: استخدام SVG

يمكننا إنشاء الحدود المتقطعة باستخدام أ path أو أ polygon العنصر ووضع stroke-dasharray منشأه. يأخذ الخاصية معلمتين حيث يحدد المرء حجم اندفاعة والآخر يحدد المسافة بينهما.

الايجابيات:

1. SVGs بطبيعتها هي رسومات قابلة للتطوير ويمكن أن تتكيف مع أي أبعاد حاوية.
2. يمكن أن تعمل بشكل جيد للغاية حتى لو كان هناك border-radius متضمن. سنحل محل path مع circle كما هو الحال في هذا الجواب (أو) تحويل path في دائرة.
3. دعم المتصفح لـ SVG هو جيد جدا ويمكن توفير احتياطي باستخدام VML لـ IE8-.

سلبيات:

1. عندما لا تتغير أبعاد الحاوية بشكل متناسب ، تميل المسارات إلى التوسع مما يؤدي إلى حدوث تغيير في حجم الاندفاع والمسافة بينهما (حاول التحوم على المربع الأول في المقتطف). يمكن التحكم في ذلك عن طريق الإضافة vector-effect='non-scaling-stroke' (كما هو الحال في المربع الثاني) ولكن دعم المتصفح لهذا العقار هو لا شيء في IE.

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

---

الطريقة 2: استخدام التدرجات

يمكننا استخدام متعددة linear-gradient صور الخلفية ووضعها بشكل مناسب لإنشاء تأثير حدود متقطع. يمكن أيضًا القيام بذلك باستخدام repeating-linear-gradient ولكن لا يوجد الكثير من التحسن بسبب استخدام التدرج المتكرر لأننا نحتاج إلى كل تدرج للتكرار في اتجاه واحد فقط.

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

الايجابيات:

1. قابلة للتطوير ويمكن أن تتكيف حتى لو كانت أبعاد الحاوية ديناميكية.
2. لا يستفيد من أي عناصر زائفة إضافية مما يعني أنها يمكن أن تبقى جانباً لأي استخدام محتمل آخر.

سلبيات:

1. دعم المتصفح للتدرجات الخطية هو أقل نسبيا وهذا هو عدم النقل إذا كنت تريد دعم أي 9-. حتى المكتبات مثل فطيرة CSS3 لا تدعم إنشاء أنماط التدرج في IE8-.
2. لا يمكن استخدامه عندما border-radius متورط لأن الخلفيات لا تنحني على أساس border-radius. يتم قصها بدلا من ذلك.

---

الطريقة 3: ظلال مربع

يمكننا إنشاء شريط صغير (على شكل اندفاعة) باستخدام العناصر الزائفة ثم إنشاء متعددة box-shadow إصدارات منه لإنشاء حدود كما هو الحال في المقتطف أدناه.

إذا كان الاندفاع شكلًا مربعًا ، فسيكون عنصر زائف واحد كافيًا ولكن إذا كان مستطيلًا ، فسوف نحتاج إلى عنصر زائف واحد للحدود السفلية العلوية + والآخر للحدود اليمنى + اليمنى. وذلك لأن الارتفاع والعرض للاندفاع على الحدود العلوية سيكونان مختلفًا عن ذلك على اليسار.

الايجابيات:

1. يمكن التحكم في أبعاد اندفاعة عن طريق تغيير أبعاد العنصر الزائف. يمكن التحكم في التباعد عن طريق تعديل المسافة بين كل ظل.
2. يمكن إنتاج تأثير فريد للغاية عن طريق إضافة لون مختلف لكل ظل مربع.

سلبيات:

1. نظرًا لأننا يتعين علينا ضبط أبعاد DASH والمسافات يدويًا ، فإن هذا النهج ليس جيدًا عندما تكون أبعاد المربع الأصل ديناميكيًا.
2. IE8 وخفض لا دعم مربع الظل. ومع ذلك ، يمكن التغلب على هذا باستخدام مكتبات مثل فطيرة CSS3.
3. يمكن استخدامه مع border-radius لكن وضعها سيكون صعبًا للغاية مع الاضطرار إلى العثور على نقاط على دائرة (وربما حتى transform).

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

Answer 4

واحد قصير: لا ، ليس كذلك. سيكون عليك العمل مع الصور بدلاً من ذلك.