점선 테두리 스트로크 길이 및 스트로크 간 거리 제어

점선 테두리 스트로크 길이 및 스트로크 간 거리 제어

CSS에서 점선 테두리 획 사이의 길이와 거리를 제어할 수 있습니까?

아래 예제는 브라우저마다 다르게 표시됩니다.

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

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

큰 차이점: IE 11 / Firefox / Chrome

파선 테두리 모양을 더 잘 제어할 수 있는 방법이 있습니까?

기본 파선 테두리 속성 값은 대시 자체에 대한 제어를 제공하지 않습니다...그러니 어서 오세요.border-image재산!

당신만의 경계를 만듭니다.border-image

호환성:훌륭한 브라우저 지원(IE 11 및 모든 최신 브라우저)을 제공합니다.일반 테두리는 이전 브라우저의 경우 예비로 설정할 수 있습니다.

이것들을 만들자

이 테두리는 정확히 동일한 크로스 브라우저를 표시합니다!

1단계 - 적합한 이미지 생성

이 예는 가로 15픽셀, 세로 15픽셀이며 간격은 현재 5px입니다.투명도가 있는 .png입니다.

포토샵을 확대하면 다음과 같습니다.

확장 방법은 다음과 같습니다.

갭 및 스트로크 길이 제어

간격 또는 스트로크를 더 넓히거나 짧게 만들려면 이미지의 간격 또는 스트로크를 더 넓히거나 짧게 합니다.

다음은 10px 간격이 더 넓은 이미지입니다.

하게 축척된 = 정한축척 =

2단계 - CSS 만들기 - 이 예에서는 4개의 기본 단계가 필요합니다.

1. 경계-이미지-소스를 정의합니다.

    border-image-source:url("https://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("https://i.stack.imgur.com/wLdVc.png") 2 round;

완전한 예

참고:border-style은 다과같값설합정니야다해으와 같은 해야 합니다.solid또는dashed최초의 테두리 스타일이 그렇듯이.none" 다과같폴테백를두추수있다가니습할리은음또는,다▁as"와 테두리를 할 수 .border: dashed 4px #000이 예에서는 지원하지 않는 브라우저가 이 테두리를 수신합니다.

.bordered {
  display: inline-block;
  padding: 20px;
  /* Optional: 
     A normal dashed border can be set as a fallback, particularly if older browsers need to be supported. Notes:
     - the 4px width here is overwritten with any border-image-width value
     - a border-image-width can be omitted if it is the same value as the dashed border width
  */
  border: dashed 4px #000;/*optional*/

  /* the initial value of border-style is "none", so it must be set to a different value for the border-image to show*/
  border-style: dashed;

  /* Individual border image properties */
  border-image-source: url("https://i.stack.imgur.com/wLdVc.png");
  border-image-slice: 2;
  border-image-repeat: round;

  /* or use the shorthand border-image */
  border-image: url("https://i.stack.imgur.com/wLdVc.png") 2 round;
}


/*The border image of this one creates wider gaps*/

.largeGaps {
  border-image-source: url("https://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>

그 외에도border-image속성, 스트로크의 길이와 그 사이의 거리를 제어하여 점선 경계를 만드는 몇 가지 다른 방법이 있습니다.아래에 설명되어 있습니다.

방법 1: SVG 사용

다음을 사용하여 점선 테두리를 만들 수 있습니다.path또는polygon요소 및 속성 설정.속성은 두 개의 매개 변수를 사용합니다. 하나는 대시 크기를 정의하고 다른 하나는 대시 사이의 공간을 결정합니다.

찬성:

1. SVG는 본질적으로 확장 가능한 그래픽이며 모든 컨테이너 치수에 적응할 수 있습니다.
2. 사용자가 있을 때에도 매우 잘 작동할 수 있습니다.border-radius관련된.우리는 그냥 그것을 교체했을 것입니다.path와 함께circle이 대답에서 처럼 (또는) 변환합니다.path동그랗게
3. SVG에 대한 브라우저 지원은 매우 우수하며 IE8용 VML을 사용하여 폴백을 제공할 수 있습니다.

단점:

1. 컨테이너의 치수가 비례적으로 변경되지 않으면 경로가 확장되어 대시의 크기와 그 사이의 공간이 변경됩니다(스니펫의 첫 번째 상자에서 호버링).다음을 추가하여 제어할 수 있습니다.vector-effect='non-scaling-stroke'(두 번째 상자에서와 같이) 그러나 IE에서 이 속성에 대한 브라우저 지원은 0입니다.

.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. 선형 그라데이션에 대한 브라우저 지원은 비교적 낮으며 IE 9-를 지원하려면 이는 금지 사항입니다. CSS3PIE와 같은 라이브러리도 IE8-에서 그라데이션 패턴 생성을 지원하지 않습니다.
2. 다음과 같은 경우 사용할 수 없습니다.border-radius배경이 기반이 되지 않기 때문에 관련이 있습니다.border-radius그들은 대신 잘립니다.

---

방법 3: 상자 그림자

유사 요소를 사용하여 작은 막대(대시 모양)를 만든 다음 여러 개를 만들 수 있습니다.box-shadow아래 스니펫과 같이 테두리를 만들기 위한 버전입니다.

대시가 정사각형 모양이면 단일 유사 요소로 충분하지만 직사각형이면 위쪽 + 아래쪽 경계에 대해 하나의 유사 요소가 필요하고 왼쪽 + 오른쪽 경계에 대해 다른 유사 요소가 필요합니다.상단 테두리의 대시 높이와 너비가 왼쪽 테두리의 대시와 다르기 때문입니다.

찬성:

1. 대시의 치수는 유사 요소의 치수를 변경하여 제어할 수 있습니다.간격은 각 그림자 사이의 공간을 수정하여 제어할 수 있습니다.
2. 각 상자 그림자마다 다른 색을 추가하면 매우 독특한 효과를 얻을 수 있습니다.

단점:

1. 대시의 치수와 간격을 수동으로 설정해야 하기 때문에 상위 상자의 치수가 동적일 때 이 방법은 좋지 않습니다.
2. IE8 이하에서는 상자 그림자를 지원하지 않습니다.그러나 이것은 CSS3 PIE와 같은 라이브러리를 사용함으로써 극복할 수 있습니다.
3. 와 함께 할 수 .border-radius를 정하는 하기 입니다. ( 심지어는 하그들배치포찾그하원것때다매입니까심다어울로지우문기아에도마리고아야것지인만을를트에서은하는것)▁(그▁even▁butand▁on어심다▁would▁(▁possibly)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>

@kovart가 만든 멋진 도구가 있습니다. '파선 보더 제너레이터'라고 합니다.

svg를 배경 이미지로 사용하여 원하는 스트로크 대시 배열을 설정할 수 있으며 매우 편리합니다.

그런 다음 테두리 대신 요소의 배경 속성으로 사용할 수 있습니다.

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

CSS 렌더는 브라우저마다 다르며 미세 조정은 잘 모릅니다, 햄의 추천으로 이미지 작업을 하셔야 합니다.참조: http://www.w3.org/TR/CSS2/box.html#border-style-properties

짧은 것: 아니요, 그렇지 않습니다.대신 이미지 작업을 수행해야 합니다.

업데이트 이 훌륭한 도구에 대한 kovart 감사합니다. 사용해 보세요.

제 대답은:

저는 최근에 같은 문제를 겪었습니다.제가 이 문제를 해결했습니다. 누군가에게 도움이 되기를 바랍니다.

HTML + 순풍

<div class="dashed-border h-14 w-full relative rounded-lg">
    <div class="w-full h-full rounded-lg bg-page z-10 relative">
        Content goes here...
    <div>
</div>

CSS

.dashed-border::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: calc(100% + 4px);
  transform: translateY(-50%);
  background-image: linear-gradient(to right, #333 50%, transparent 50%);
  background-size: 16px;
  z-index: 0;
  border-radius: 0.5rem;
}
.dashed-border::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  height: 100%;
  width: calc(100% + 4px);
  transform: translateX(-50%);
  background-image: linear-gradient(to bottom, #333 50%, transparent 50%);
  background-size: 4px 16px;
  z-index: 1;
  border-radius: 0.5rem;
}

스트로크 길이는 스트로크 폭에 따라 달라집니다.너비를 늘려서 길이를 늘리고 내부 요소별로 테두리 부분을 숨길 수 있습니다.

편집: 추가됨pointer-events: none;벤제이 덕분에

.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;
    pointer-events: none;
}

https://jsfiddle.net/ksf9zoLh/

.outline {
    outline: 48px dashed #d5fb62;
    outline-offset: -4px;
    overflow:hidden;
}

문제가 아니라 오버플로가 숨겨진 경우, 그렇지 않으면 48 대신 4개의 개요가 표시됩니다.

<div class="outline"></div>

찾은 것 요.clip-path으로 됩니다.기본적으로 점선 경계를 추가한 다음 초과를 마스크하는 것이 전부입니다.

그clip-path속성은 또한 둥근 모서리를 지원하므로 당신은 그것을 그것과 매치할 수 있습니다.border-radius맞춤형 테두리와 둥근 모서리를 가지고 있습니다!

.demo {
  display: inline-flex;
  width: 200px;
  height: 100px;
  position: relative;
  clip-path: inset(0 round 30px 0 30px 0);
}

.demo::before {
  content: '';
  position: absolute;
  left: -7px;
  top: -7px;
  right: -7px;
  bottom: -7px;
  border: 8px dashed rgba(0, 0, 255, 0.3);
  border-radius: 37px 0 37px 0;
  box-sizing: border-box;
}

<div class="demo"></div>

직할있다니습에서 직접 할수.div물론 그것을 사용하지 않고 그 자체.::after유사 요소하지만 이것은 당신이 클립으로 끼워야 한다는 것을 의미합니다.div원래 크기보다 작아질 겁니다

이렇게 하면 div에서 class="myclass"를 사용하여 주황색과 회색 테두리가 만들어집니다.

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

저는 최근에 같은 문제를 겪었습니다.

저는 두 개의 절대적인 위치에 있는 디브(수평과 수직)로 테두리를 운반한 다음 변형하여 해결할 수 있었습니다.바깥쪽 상자는 상대적으로 위치가 정해지면 됩니다.

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

참고: 이 예에서는 타키온을 사용했지만, 수업은 일종의 자기 설명적인 것 같습니다.

언급URL : https://stackoverflow.com/questions/2771171/control-the-dashed-border-stroke-length-and-distance-between-strokes