점선 테두리 점 사이의 공간을 늘리는 방법
내 상자에 점선 스타일 테두리를 사용하고 있습니다.
.box {
width: 300px;
height: 200px;
border: dotted 1px #f00;
float: left;
}
테두리의 각 점 사이의 간격을 늘리고 싶습니다.
이 트릭은 가로 및 세로 테두리 모두에 적용됩니다.
/*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;
배경 크기로 크기를 조정하고 선형 그라데이션 비율로 비율을 조정할 수 있습니다. 이 예에서는 1px 도트와 2px 간격의 점선이 있습니다. 이렇게하면 여러 배경을 사용하여 여러 개의 점선 테두리를 가질 수 있습니다.
이 JSFiddle 에서 시도 하거나 코드 스 니펫 예제를 살펴보십시오.
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>다음은 가로 테두리로 원하는 거의 모든 것을 달성하기 위해 최근 프로젝트에서 사용한 트릭입니다. <hr/>가로 테두리가 필요할 때마다 사용 합니다. 이 시간에 테두리를 추가하는 기본 방법은 다음과 같습니다.
hr {border-bottom: 1px dotted #000;}
그러나 경계를 제어하고 예를 들어 점 사이의 간격을 늘리려면 다음과 같이 시도하십시오.
hr {
height:14px; /* specify a height for this hr */
overflow:hidden;
}
그리고 다음에서는 테두리를 만듭니다 (여기에 점이있는 예가 있습니다).
hr:after {
content:".......................................................................";
letter-spacing: 4px; /* Use letter-spacing to increase space between dots*/
}
이것은 또한 점, 그라디언트 등에 텍스트 그림자를 추가 할 수 있음을 의미합니다.
가로 테두리에 정말 좋습니다. 수직 클래스가 필요한 경우 다른 시간에 클래스를 지정하고 CSS3 rotation속성을 사용할 수 있습니다.
순수한 CSS 로는 할 수 없습니다 -CSS3 스펙 에도 이것에 대한 구체적인 인용문이 있습니다 :
참고 : 점과 대시의 간격이나 대시 길이를 제어 할 수 없습니다. 모서리를 대칭으로 만드는 간격을 선택하는 것이 좋습니다.
그러나 트릭을 수행 하는 테두리 이미지 또는 배경 이미지를 사용할 수 있습니다 .
표준 CSS 테두리와 의사 element + overflow : hidden을 사용합니다. 이 예에서는 3px의 두 가지 테두리가 있습니다. 보통, 5px 간격, 10px 간격입니다. 실제로 10-8 = 2px 만 표시되는 10px입니다.
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>둥근 모서리가 큰 작은 요소에 적용하면 재미있는 효과가 발생할 수 있습니다.
사용 가능한 값 은 MDN 문서 를 참조하십시오 border-style.
- none : 테두리 없음, 너비를 0으로 설정합니다. 이것이 기본값입니다.
- hidden : 테이블 요소의 경계 충돌 해결을 제외하고 '없음'과 동일합니다.
- 파선 : 일련의 짧은 파선 또는 선 세그먼트.
- 점이 찍힌 : 일련의 점.
- double : 경계 너비로 정의 된 픽셀 양에 더하는 두 개의 직선.
- 그루브 : 조각 효과.
- inset : 상자를 포함 된 것으로 표시합니다.
- outset : 'inset'과 반대입니다. 상자를 3D로 표시합니다 (양각).
- 릿지 : '홈'의 반대. 테두리가 3D로 나타납니다 (출시 예정).
- 실선 : 단일 직선 직선.
이러한 선택 외에도 표준 테두리 스타일에 영향을 줄 수있는 방법은 없습니다.
원하는대로 가능성이 없다면 CSS3을 사용할 수 는 border-image있지만 브라우저 지원은 여전히 매우 흔합니다.
따라서 주어진 대답으로 시작하여 CSS3이 여러 설정을 허용한다는 사실을 적용하면 아래 코드가 완전한 상자를 만드는 데 유용합니다.
#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>배경 크기의 10px는 대시와 간격이 차지하는 영역을 제공한다는 점에 유의하십시오. 배경 태그의 50 %는 대시의 실제 너비입니다. 따라서 각 경계면에 길이가 다른 대시를 사용할 수 있습니다.
이것은 정말 오래된 질문이지만 Google에서 높은 순위를 차지하므로 필요에 따라 작동 할 수있는 방법을 사용할 것입니다.
내 경우에는 대시 사이에 최소한의 휴식이있는 두꺼운 점선 테두리를 원했습니다. CSS 패턴 생성기 (예 : http://www.patternify.com/ )를 사용하여 가로 10px x 세로 1px의 패턴을 만들었습니다. 그 중 9px는 단색 대시, 1px는 흰색입니다.
CSS에서 해당 패턴을 배경 이미지로 포함한 다음 background-size 속성을 사용하여 확장했습니다. 나는 20px x 2px 반복 대시, 18px는 실선 및 2px 흰색으로 끝났습니다. 정말 두꺼운 파선으로 더 확장 할 수 있습니다.
좋은 점은 이미지가 추가 외부 HTTP 요청이없는 데이터로 인코딩되므로 성능 부담이 없다는 것입니다. 내 이미지를 SASS 변수로 저장하여 내 사이트에서 재사용 할 수 있습니다.
이것은 오래되었지만 여전히 관련성이 높은 주제입니다. 현재 상단의 대답은 잘하지만, 매우 작은 점에 대해 작동합니다. Bhojendra Rauniyar가 이미 주석에서 지적했듯이 더 큰 (> 2px) 점의 경우 점이 둥근 것이 아니라 사각형으로 나타납니다. 이 페이지는 간격이 정사각형이 아닌 간격 점을 검색합니다 (여기서 답변이 사용되는 대시).
이것을 바탕으로 나는을 사용했다 radial-gradient. 또한 Ukuser32의 답변을 사용 하면 네 가지 경계 모두에 대해 도트 속성을 쉽게 반복 할 수 있습니다. 모서리 만 완벽하지는 않습니다.
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>radial-gradient 예상하는 :
- 모양과 선택적인 위치
- 두 개 이상의 정지 점 : 색상 및 반경
여기서는 5 픽셀 직경 (2.5px 반경)의 점을 원했고, 도트 사이의 직경 (10px)의 2 배이며 최대 15px를 추가했습니다. 이것 background-size과 일치해야합니다.
두 개의 정지 점은 점이 훌륭하고 매끄 럽도록 정의됩니다. 반지름의 반은 전체 검정의 그라데이션보다 검은 색입니다.
짧은 대답 : 할 수 없습니다.
border-image속성과 몇 개의 이미지 를 사용해야 합니다.
최신 브라우저만을 대상으로하고 컨텐츠와 다른 요소에 테두리를 둘 수 있다면 CSS 스케일 변환을 사용하여 더 큰 점 또는 대시를 얻을 수 있습니다.
border: 1px dashed black;
border-radius: 10px;
-webkit-transform: scale(8);
transform: scale(8);
정렬하려면 많은 위치 조정이 필요하지만 작동합니다. 테두리의 두께, 시작 크기 및 배율을 변경하여 원하는 두께-길이 비율에 도달 할 수 있습니다. 만질 수없는 것은 대시 대 갭 비율입니다.
많은 사람들이 "당신은 할 수 없습니다"라고 말합니다. 그래 넌 할수있어. 대시 사이의 거터 공간을 제어하는 CSS 규칙은 없지만 CSS에는 다른 기능이 있습니다. 일을 할 수 없다고 너무 빨리 말하지 마십시오.
.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)는 거터 "폭"을 결정하는 규칙입니다. 물론, 필요에 따라 색상을 조정해야합니다. 이것은 또한 수평선의 작은 예입니다. 수직선을 만들기 위해 왼쪽과 오른쪽을 사용하십시오.
간단한 구문으로 @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 */
#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>AFAIK에는 이렇게 할 수있는 방법이 없습니다. 점선 테두리를 사용하거나 테두리 너비를 조금 늘릴 수 있지만 CSS를 사용하면 더 많은 간격을 두는 것이 불가능합니다.
(자바 스크립트를 통해) 캔버스를 만들고 안에 점선을 그릴 수 있습니다. 캔버스 내에서 대시와 공백 사이의 간격을 제어 할 수 있습니다.
<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>
이것은 내가 한 일입니다-이미지를 사용 하십시오 여기에 이미지 설명을 입력하십시오
svg로 점을 만드는 자바 스크립트 함수를 만들었습니다. 자바 스크립트 코드에서 도트 간격과 크기를 조정할 수 있습니다.
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"><circle cx="50" cy="50" r="50" fill="black" /></svg>');
}<div class="dotted">Lorem Ipsum</div>참고 URL : https://stackoverflow.com/questions/6250394/how-to-increase-space-between-dotted-border-dots
'IT' 카테고리의 다른 글
| 정밀도가 2 인 소수에 대한 간단한 정규식 (0) | 2020.04.01 |
|---|---|
| 디렉토리에서 모든 Python 단위 테스트를 어떻게 실행합니까? (0) | 2020.04.01 |
| Xcode 8에서 파생 데이터를 어떻게 삭제합니까? (0) | 2020.04.01 |
| 숭고한 텍스트 2 : 빈 줄을 비우는 방법 (0) | 2020.04.01 |
| 문자열 형식을 사용하여 소수점 이하 2 자리 또는 간단한 정수 표시 (0) | 2020.04.01 |