점선으로 표시된 테두리를 점 사이의 공간을 늘리는 방법

나는 내 상자를 사용하여 같은 형식의 스타일 테두리

.box {
    width: 300px;
    height: 200px;
    border: dotted 1px #f00;
    float: left;
}

I want to the 증가되지는 의 각 점 사이의 공간을 정의하였다.

Dejan
편집된 질문3일 10월 2012 в 8:46
프로그래밍
css3 html css border
6일 6월 2011 в 10:00
1495 파운드
해결책

이 전략은 가로 · 세로 모두 사용할 수 있다.

/*Horizontal*/
background-image: linear-gradient(to right, black 33%, rgba(255,255,255,0) 0%);
background-position: bottom;
background-size: 3px 1px;
background-repeat: repeat-x;

/*Vertical*/
background-image: linear-gradient(black 33%, rgba(255,255,255,0) 0%);
background-position: right;
background-size: 1px 3px;
background-repeat: repeat-y;

함께 있는 선형 그래디언트 배경 크기 및 퍼센트 비율은 크기를 조정할 수 있습니다. I have a 의 예제에서와 점선 1px 점과 2px 간격. 이 방법은 여러 배경이 너무 점선 사용하여 여러 개 있을 수 있다.

그 시도하시겠습니까 이 [이스피들] (https://jsfiddle.net/yyp67pbg/) 또는 코드를 살펴보도록 스니핏 예:

<! - begin 스니핏: js 숨기십시오: 참 - &gt.

div {
  padding: 10px 50px;
}
.dotted {
  border-top: 1px #333 dotted;
}
.dotted-gradient {
  background-image: linear-gradient(to right, #333 40%, rgba(255, 255, 255, 0) 20%);
  background-position: top;
  background-size: 3px 1px;
  background-repeat: repeat-x;
}
.dotted-spaced {
  background-image: linear-gradient(to right, #333 10%, rgba(255, 255, 255, 0) 0%);
  background-position: top;
  background-size: 10px 1px;
  background-repeat: repeat-x;
}
.left {
  float: left;
  padding: 40px 10px;
  background-color: #F0F0DA;
}
.left.dotted {
  border-left: 1px #333 dotted;
  border-top: none;
}
.left.dotted-gradient {
  background-image: linear-gradient(to bottom, #333 40%, rgba(255, 255, 255, 0) 20%);
  background-position: left;
  background-size: 1px 3px;
  background-repeat: repeat-y;
}
.left.dotted-spaced {
  background-image: linear-gradient(to bottom, #333 10%, rgba(255, 255, 255, 0) 0%);
  background-position: left;
  background-size: 1px 10px;
  background-repeat: repeat-y;
}
<div>no
  <br>border</div>
<div class='dotted'>dotted
  <br>border</div>
<div class='dotted-gradient'>dotted
  <br>with gradient</div>
<div class='dotted-spaced'>dotted
  <br>spaced</div>

<div class='left'>no
  <br>border</div>
<div class='dotted left'>dotted
  <br>border</div>
<div class='dotted-gradient left'>dotted
  <br>with gradient</div>
<div class='dotted-spaced left'>dotted
  <br>spaced</div>

끝 - &lt 스니핏 >;!

insertusernamehere
편집된 답변26일 4월 2016 в 2:25
해설 (11)

39 의 속임수, ve here& I& # 39 에서 사용할 수 있는 내가 원하는 수펑 최근 프로젝트 거의 아무것도 할 수 있다. 내가 사용하는 ',' hr/&gt &lt, 매번 데릭쉐퍼드와 오버클로킹된 가로 정의하였다. Hr 은 이 같은 일이 이 기본적인 방법은 추가하기에서는 국경

 hr {border-bottom: 1px dotted #000;}

그러나 스케쳐내 국경 제어할 수 있으며, 예를 들어, 이 같은 일이 시도하시겠습니까 점 사이의 거리를 늘릴 수 있습니다.

hr {
height:14px; /* specify a height for this hr */
overflow:hidden;
}

또한 생성한 다음 국경 (예를 들어, s 와 here& # 39 점)

hr:after {
content:".......................................................................";
letter-spacing: 4px; /* Use letter-spacing to increase space between dots*/
}

또한, 이 텍스트 섀도 를 추가할 수 있는 점, 그래디언트 상술합니다. 뭐든 로렌아줌마가.

음, 정말 좋은 작동하잖아 수평적 있다. 수직 수준들과 하는 경우 다른 클래스를 사용하여 지정할 수 있습니다 '순환' 재산이잖아 CSS3 인사 및

ЯegDwight
편집된 답변3일 10월 2012 в 2:08
해설 (11)

Css 는 순결케 함께 할 수 없습니다 - [CSS3 사양] [1] 는 이에 대해 특정 쿼트에 있다.

&gt. 참고: 간격을 제어할 수 없는 점과 대시, disk_b_s10database 길이에 비해 대시. 선택할 수 있는 코너를 통해 구축 권장됨 간격은 대칭.

그러나 a 국경 이미지 또는 사용할 수 있는 배경 이미지를 산아래의 트릭.

[1]: http://www.w3.org/TR/css3-background/ # 국경 스타일

Cody Gray
편집된 답변17일 8월 2014 в 1:01
해설 (2)

이 표준 CSS 는 국경 및 dtep element+overflow:hidden. 예를 들어, 3 개의 다른 2px 확보하십시오 경계 태세에 돌입했다. 보통, 간격이 간격이 10px 5px, 같은 것 같다. 실제로 10px 만 10 8 로 = 2px 가시적입니다.

<! - begin 스니핏: js 숨기십시오: 거짓값 콘솔: 진정한 바벨. &gt 거짓값 -;

div.two{border:2px dashed #FF0000}

div.five:before {
  content: "";
  position: absolute;
  border: 5px dashed #FF0000;
  top: -3px;
  bottom: -3px;
  left: -3px;
  right: -3px;
}

div.ten:before {
  content: "";
  position: absolute;
  border: 10px dashed #FF0000;
  top: -8px;
  bottom: -8px;
  left: -8px;
  right: -8px;
}

div.odd:before {left:0;right:0;border-radius:60px}

div {
  overflow: hidden;
  position: relative;

  text-align:center;
  padding:10px;
  margin-bottom:20px;
}
<div class="two">Kupo nuts here</div>
<div class="five">Kupo nuts<br/>here</div>
<div class="ten">Kupo<br/>nuts<br/>here</div>
<div class="ten odd">Kupo<br/>nuts<br/>here</div>

끝 - &lt 스니핏 >;!

크기가 작고 둥근 일부 재미 요소를 발려짐 큰 효과를 만들 수 있습니다.

해설 (2)

매든 docs 의 값을 볼 수 있는 '의 테두리 스타일':

  • 없음: 국경 없는, 너비 0 으로 설정합니다. 기본값입니다.
  • 숨겨짐: # 39, & # 39 none& 제외한 모든 면에서 같은. 테이블에 대한 국경 분쟁 해결 요소.
  • 태세에 돌입했다. 시리즈 파선-짧은 대시 또는 선분.
  • 점선. 연속 점.
  • 연산뿐: 두 개의 직선 추가 용량을 최대 픽셀입니다 선 테두리 폭 정의된다.
  • 그루브 (groove): 새겨진 효과를 얻을 수 있습니다.
  • 인세트의: 는 기입란 임베드된 나타납니다.
  • 시끄러웠다. 반대편

    39, & # 39, inset&. 3d 기입란 나타날 수 있습니다

    (양각).

  • ridge: 반대편

    39, & # 39, groove&. 국경 전능하신분은 dl3d

    (coming out).

  • 솔리드로: 싱글 직선, 솔리드로 할말이다

이런 선택이 별도로 영향을 준 것으로, 표준 border& # 39 의 스타일을 길이 없다.

  • CSS3& 사용할 수 있어 원하는 대로 없는 경우, 당신은 * # 39 의 '국경 이미지' 그러나 참고로 브라우저 지원 엔드입니다 여전히 매우 얼룩짐.
Mark Amery
편집된 답변8일 11월 2018 в 12:11
해설 (2)

그래서 오토메이티드 있다는 것을 시작으로) 를 적용해 css3 를 통해 여러 설정 - 아래 코드는 완료하십시오 상자를 만드는 데 유용합니다.

<! - begin 스니핏: js 숨기십시오: 거짓값 콘솔: 진정한 바벨. &gt 거짓값 -;

#border {
  width: 200px;
  height: 100px;
  background: yellow;
  text-align: center;
  line-height: 100px;
  background: linear-gradient(to right, orange 50%, rgba(255, 255, 255, 0) 0%), linear-gradient(blue 50%, rgba(255, 255, 255, 0) 0%), linear-gradient(to right, green 50%, rgba(255, 255, 255, 0) 0%), linear-gradient(red 50%, rgba(255, 255, 255, 0) 0%);
  background-position: top, right, bottom, left;
  background-repeat: repeat-x, repeat-y;
  background-size: 10px 1px, 1px 10px;
}
<div id="border">
  bordered area
</div>

끝 - &lt 스니핏 >;!

10px 확인하면서 그 가치가 있는 영역을 커버할 수 있는 크기, gap 대시입니다 배경. 실제로 이 태그는 50% 의 너비를 대시입니다 배경. 따라서 각 테두리 할 수 있는 다른 길이 대시 때는기대어.

Tushar
편집된 답변16일 5월 2018 в 10:45
해설 (0)

하지만 이것이 정말 오래된 질문을 던질 수 있는 것, 그래서 I& # 39 는 구글 상위권에 있는 필요에 따라 내 방식을 m 일할 수 있다.

제 경우에는 내가 원한 것은 국경 사이에 있던 두꺼운 최소 분할합니다 대시. Css 사용 패턴 발생기입니다 (이와 같은: http://www.patternify.com/) 를 통해 큰 폭 1px 패턴화합니다 10px 만듭니다. 즉 솔리드로 대시입니다 9px 의 색상, 1px 흰색입니다.

Css, 난 내 이미지를 배경으로 포함되어 있는 비율 조정 후 패턴을 사용하여 속성용 배경 크기 it up. 내가 가진 것을 거듭 대시입니다 2px 20px 됐지, 그 선을 따라 18px 솔리드로 2px 슬픔으로창백해지고. It up 의 굵은선 정말 대시 할말이다 더욱 확장할 수 있습니다.

이후 훌륭한 것은 데이터가 없는 이미지가 인코딩됩니다 don& # 39, HTTP 요청 때문에 추가 바깥쪽인지가 there& # 39 의 성능에 전혀 된다. 그래서 나는 내 이미지를 다시 사용할 수 있는 저장됩니까 자스 가변으로 내 사이트.

해설 (0)

그러나 이것은 오래된 매우 관련 주제. 이 [현재 상단형 오토메이티드] (https://stackoverflow.com/a/18064496/2286722) 는 뿐 아니라 극히 작은 점. 이미 지적한 대로 라우니야르 바오젠드라 있는 점, 주석, 대규모 (&gt, 2px) 점이 표시될 사각형, 반올림되지. 내가 아닌 검색 결과 이 페이지를 간격이 dots 간격이 squares (심지어 대시, 특히 일부 여기에 대답을 사용).

이 ',' 요골동맥 그래디언트 기반으로 사용. 또한 사용하여 [이 답을 Ukuser32] (https://stackoverflow.com/a/50368553/2286722) 에 대한 4 가지 모두 joyon. 속성 반복될 수 있다. 전용 코너를 완벽했지 않습니다.

<! - begin 스니핏: js 숨기십시오: 거짓값 콘솔: 진정한 바벨. &gt 거짓값 -;

div {
    padding: 1em;
    background-image:
        radial-gradient(circle at 2.5px, #000 1.25px, rgba(255,255,255,0) 2.5px),
        radial-gradient(circle, #000 1.25px, rgba(255,255,255,0) 2.5px),
        radial-gradient(circle at 2.5px, #000 1.25px, rgba(255,255,255,0) 2.5px),
        radial-gradient(circle, #000 1.25px, rgba(255,255,255,0) 2.5px);
    background-position: top, right, bottom, left;
    background-size: 15px 5px, 5px 15px;
    background-repeat: repeat-x, repeat-y;
}
<div>Some content with round, spaced dots as border</div>

끝 - &lt 스니핏 >;!

이 '요골동맥 그래디언트' [있다] (https://developer.mozilla.org/en-us/docs/web/css/radial-gradient):

여기서, 제가 그들이성년에 픽셀입니다 지름 (2.5px radius) 와 5 점, 점, 최대 지름 (10px) 사이에 2 배 정도 추가 15px. 이러한 '이' 배경 크기 일치해야 합니다.

그러한 두 중됩니다 정의됩니까 좋은 점 및 준대칭: 검은색은 솔리드로 반단면 반지름 및 그래디언트 비해 전체 반지름입니다.

해설 (0)

39 라고 &quot can& t";; 이제 많은 사람들이 있습니다. 예, 가능합니다. # 39 의 css 규칙을 제어할 수 없는 진정한 it& 간격 사이에 공간이 대시 하지만 css 는 다른 것이다. 그래서 아무 것도 할 수 없는 빠른 don& # 39, t be done.

.hr {
    border-top: 5px dashed #CFCBCC;
    margin: 30px 0;
    position: relative;
}

.hr:before {
    background-color: #FFFFFF;
    content: "";
    height: 10px;
    position: absolute;
    top: -2px;
    width: 100%;
}

.hr:after {
    background-color: #FFFFFF;
    content: "";
    height: 10px;
    position: absolute;
    top: -13px;
    width: 100%;
}

기본적으로 국경 상단형 높이 (5px 이 경우) 은 그리드 결정하는 규칙을 width&quot ";). 오이프 과정이든 조정하십시오 요건에 맞는 색상을 사용해야 합니다. 이 역시 작은 예 사용할 수 있도록 수직, 수평 라인 왼쪽 및 오른쪽 라인.

해설 (1)

짧은 대답: # 39, t can& 있습니다.

['국경 이미지'] 사용할 수 있습니다 (http://www.css3.info/preview/border-image/) 속성 및 일부 지원한다.

해설 (0)

39 만 최신 브라우저 · you& 경우, re 대상으로 할 수 있습니다 다음 테두리 에서 직접 콘텐츠를 별도의 요소에 더 큰 joyon. 배율입니다 변형 또는 대시입니다 afaq CSS 를 사용할 수 있습니다.

border: 1px dashed black;
border-radius: 10px;
-webkit-transform: scale(8);
transform: scale(8);

많이 걸리는 줄 수 있지만, 위치 면변형을 이해했소 작동하잖아. 테두리 두께를 변경하여, 시작 크기와 배율입니다 팩터도 단순한 두께 길이 제거율 운영까지도 이용할 수 있습니다. # 39 만 t touch 는 정말 can&, 대시입니다 할 것으로 보인다. 제거율.

해설 (1)

39 의 대표 문법을 통해 오토메이티드 @Eagorajose& 기준 4 개의 모서리가 솔루션 구축

background: linear-gradient(to right, #000 33%, #fff 0%) top/10px 1px repeat-x, /* top */
linear-gradient(#000 33%, #fff 0%) right/1px 10px repeat-y, /* right */
linear-gradient(to right, #000 33%, #fff 0%) bottom/10px 1px repeat-x, /* bottom */
linear-gradient(#000 33%, #fff 0%) left/1px 10px repeat-y; /* left */

<! - begin 스니핏: js 숨기십시오: 거짓값 콘솔: 진정한 바벨. &gt 거짓값 -;

#page {
    background: linear-gradient(to right, #000 33%, #fff 0%) top/10px 1px repeat-x, /* top */
    linear-gradient(#000 33%, #fff 0%) right/1px 10px repeat-y, /* right */
    linear-gradient(to right, #000 33%, #fff 0%) bottom/10px 1px repeat-x, /* bottom */
    linear-gradient(#000 33%, #fff 0%) left/1px 10px repeat-y; /* left */

    width: 100px;
    height: 100px;
}
<div id="page"></div>

끝 - &lt 스니핏 >;!

해설 (0)

I made a 자바스크립트 함수를 만들 수 있는 점이 svg. Javascript 코드를 joyon. 간격과 크기를 조정할 수 있습니다.

<! - begin 스니핏: js 숨기십시오: 거짓값 콘솔: 진정한 바벨. &gt 거짓값 -;

var make_dotted_borders = function() {
    // EDIT THESE SETTINGS:

    var spacing = 8;
    var dot_width = 2;
    var dot_height = 2;

    //---------------------

    var dotteds = document.getElementsByClassName("dotted");
    for (var i = 0; i < dotteds.length; i++) {
        var width = dotteds[i].clientWidth + 1.5;
        var height = dotteds[i].clientHeight;

        var horizontal_count = Math.floor(width / spacing);
        var h_spacing_percent = 100 / horizontal_count;
        var h_subtraction_percent = ((dot_width / 2) / width) * 100;

        var vertical_count = Math.floor(height / spacing);
        var v_spacing_percent = 100 / vertical_count;
        var v_subtraction_percent = ((dot_height / 2) / height) * 100;

        var dot_container = document.createElement("div");
        dot_container.classList.add("dot_container");
        dot_container.style.display = getComputedStyle(dotteds[i], null).display;

        var clone = dotteds[i].cloneNode(true);

        dotteds[i].parentElement.replaceChild(dot_container, dotteds[i]);
        dot_container.appendChild(clone);

        for (var x = 0; x < horizontal_count; x++) {
            // The Top Dots
            var dot = document.createElement("div");
            dot.classList.add("dot");
            dot.style.width = dot_width + "px";
            dot.style.height = dot_height + "px";

            var left_percent = (h_spacing_percent * x) - h_subtraction_percent;
            dot.style.left = left_percent + "%";
            dot.style.top = (-dot_height / 2) + "px";
            dot_container.appendChild(dot);

            // The Bottom Dots
            var dot = document.createElement("div");
            dot.classList.add("dot");
            dot.style.width = dot_width + "px";
            dot.style.height = dot_height + "px";

            dot.style.left = (h_spacing_percent * x) - h_subtraction_percent + "%";
            dot.style.top = height - (dot_height / 2) + "px";
            dot_container.appendChild(dot);
        }

        for (var y = 1; y < vertical_count; y++) {
            // The Left Dots:
            var dot = document.createElement("div");
            dot.classList.add("dot");
            dot.style.width = dot_width + "px";
            dot.style.height = dot_height + "px";

            dot.style.left = (-dot_width / 2) + "px";
            dot.style.top = (v_spacing_percent * y) - v_subtraction_percent + "%";
            dot_container.appendChild(dot);
        }
        for (var y = 0; y < vertical_count + 1; y++) {
            // The Right Dots:
            var dot = document.createElement("div");
            dot.classList.add("dot");
            dot.style.width = dot_width + "px";
            dot.style.height = dot_height + "px";

            dot.style.left = width - (dot_width / 2) + "px";
            if (y < vertical_count) {
                dot.style.top = (v_spacing_percent * y) - v_subtraction_percent + "%";
            }
            else {
                dot.style.top = height - (dot_height / 2) + "px";
            }

            dot_container.appendChild(dot);
        }
    }
}

make_dotted_borders();
div.dotted {
    display: inline-block;
    padding: 0.5em;
}

div.dot_container {
    position: relative;
    margin-left: 0.25em;
    margin-right: 0.25em;
}

div.dot {
    position: absolute;
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="100" width="100"></svg>');
}
<div class="dotted">Lorem Ipsum</div>

끝 - &lt 스니핏 >;!

해설 (0)

아파이크 좁히어 isn& # 39 는 방법으로, 이. 아마도 증가되지는 대시 테두리 또는 사용할 수 있습니다 테두리 폭을 조금 간격이 점점 더 아웃해야 한 것이 아니라, CSS 를 사용한 것은 불가능하다는 점.

해설 (0)
 
<div style="width: 100%; height: 100vh; max-height: 20px; max-width: 100%; background: url('https://kajabi-storefronts-production.global.ssl.fastly.net/kajabi-storefronts-production/themes/853636/settings_images/Ei2yf3t7TvyRpFaLQZiX_dot.jpg') #000; background-repeat: repeat;"> </div>

이것이 내가 이미지를 사용하여 아니하였으매 - 입력하십시오. 이미지 여기에 설명을

해설 (0)

(Via 자바스크립트) 및 그리기 내에서 점선이 캔바스를 만들 수 있습니다. 캔바스를 내에서 얼마나 오랫동안 대시입니다 및 사이의 공간에 될 것이라 제어할 수 있습니다.

해설 (1)