나는 내 상자를 사용하여 같은 형식의 스타일 테두리
.box {
width: 300px;
height: 200px;
border: dotted 1px #f00;
float: left;
}
I want to the 증가되지는 의 각 점 사이의 공간을 정의하였다.
이 전략은 가로 · 세로 모두 사용할 수 있다.
/*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 간격. 이 방법은 여러 배경이 너무 점선 사용하여 여러 개 있을 수 있다.
그 시도하시겠습니까 이 [이스피들] (
) 또는 코드를 살펴보도록 스니핏 예:<! - begin 스니핏: js 숨기십시오: 참 - >.
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 {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 인사 및
Css 는 순결케 함께 할 수 없습니다 - [CSS3 사양] [1] 는 이에 대해 특정 쿼트에 있다.
>. 참고: 간격을 제어할 수 없는 점과 대시, disk_b_s10database 길이에 비해 대시. 선택할 수 있는 코너를 통해 구축 권장됨 간격은 대칭.
그러나 a 국경 이미지 또는 사용할 수 있는 배경 이미지를 산아래의 트릭.
[1]: http://www.w3.org/TR/css3-background/ # 국경 스타일
이 표준 CSS 는 국경 및 dtep element+overflow:hidden. 예를 들어, 3 개의 다른 2px 확보하십시오 경계 태세에 돌입했다. 보통, 간격이 간격이 10px 5px, 같은 것 같다. 실제로 10px 만 10 8 로 = 2px 가시적입니다.
<! - begin 스니핏: js 숨기십시오: 거짓값 콘솔: 진정한 바벨. > 거짓값 -;
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>
끝 - < 스니핏 >;!
크기가 작고 둥근 일부 재미 요소를 발려짐 큰 효과를 만들 수 있습니다.
매든 docs 의 값을 볼 수 있는 '의 테두리 스타일':
- 없음: 국경 없는, 너비 0 으로 설정합니다. 기본값입니다.
- 숨겨짐: # 39, & # 39 none& 제외한 모든 면에서 같은. 테이블에 대한 국경 분쟁 해결 요소.
- 태세에 돌입했다. 시리즈 파선-짧은 대시 또는 선분.
- 점선. 연속 점.
- 연산뿐: 두 개의 직선 추가 용량을 최대 픽셀입니다 선 테두리 폭 정의된다.
- 그루브 (groove): 새겨진 효과를 얻을 수 있습니다.
- 인세트의: 는 기입란 임베드된 나타납니다.
- 시끄러웠다. 반대편
39, & # 39, inset&. 3d 기입란 나타날 수 있습니다
(양각).
- ridge: 반대편
39, & # 39, groove&. 국경 전능하신분은 dl3d
(coming out).
- 솔리드로: 싱글 직선, 솔리드로 할말이다
이런 선택이 별도로 영향을 준 것으로, 표준 border& # 39 의 스타일을 길이 없다.
그래서 오토메이티드 있다는 것을 시작으로) 를 적용해 css3 를 통해 여러 설정 - 아래 코드는 완료하십시오 상자를 만드는 데 유용합니다.
<! - begin 스니핏: js 숨기십시오: 거짓값 콘솔: 진정한 바벨. > 거짓값 -;
#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 확인하면서 그 가치가 있는 영역을 커버할 수 있는 크기, gap 대시입니다 배경. 실제로 이 태그는 50% 의 너비를 대시입니다 배경. 따라서 각 테두리 할 수 있는 다른 길이 대시 때는기대어.
하지만 이것이 정말 오래된 질문을 던질 수 있는 것, 그래서 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 의 성능에 전혀 된다. 그래서 나는 내 이미지를 다시 사용할 수 있는 저장됩니까 자스 가변으로 내 사이트.
그러나 이것은 오래된 매우 관련 주제. 이 [현재 상단형 오토메이티드] (https://stackoverflow.com/a/18064496/2286722) 는 뿐 아니라 극히 작은 점. 이미 지적한 대로 라우니야르 바오젠드라 있는 점, 주석, 대규모 (>, 2px) 점이 표시될 사각형, 반올림되지. 내가 아닌 검색 결과 이 페이지를 간격이 dots 간격이 squares (심지어 대시, 특히 일부 여기에 대답을 사용).
이 ',' 요골동맥 그래디언트 기반으로 사용. 또한 사용하여 [이 답을 Ukuser32] (https://stackoverflow.com/a/50368553/2286722) 에 대한 4 가지 모두 joyon. 속성 반복될 수 있다. 전용 코너를 완벽했지 않습니다.
<! - begin 스니핏: js 숨기십시오: 거짓값 콘솔: 진정한 바벨. > 거짓값 -;
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>
끝 - < 스니핏 >;!
이 '요골동맥 그래디언트' [있다] (https://developer.mozilla.org/en-us/docs/web/css/radial-gradient):
여기서, 제가 그들이성년에 픽셀입니다 지름 (2.5px radius) 와 5 점, 점, 최대 지름 (10px) 사이에 2 배 정도 추가 15px. 이러한 '이' 배경 크기 일치해야 합니다.
그러한 두 중됩니다 정의됩니까 좋은 점 및 준대칭: 검은색은 솔리드로 반단면 반지름 및 그래디언트 비해 전체 반지름입니다.
.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" ";). 오이프 과정이든 조정하십시오 요건에 맞는 색상을 사용해야 합니다. 이 역시 작은 예 사용할 수 있도록 수직, 수평 라인 왼쪽 및 오른쪽 라인.
border: 1px dashed black;
border-radius: 10px;
-webkit-transform: scale(8);
transform: scale(8);
많이 걸리는 줄 수 있지만, 위치 면변형을 이해했소 작동하잖아. 테두리 두께를 변경하여, 시작 크기와 배율입니다 팩터도 단순한 두께 길이 제거율 운영까지도 이용할 수 있습니다. # 39 만 t touch 는 정말 can&, 대시입니다 할 것으로 보인다. 제거율.
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 숨기십시오: 거짓값 콘솔: 진정한 바벨. > 거짓값 -;
#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>
끝 - < 스니핏 >;!
I made a 자바스크립트 함수를 만들 수 있는 점이 svg. Javascript 코드를 joyon. 간격과 크기를 조정할 수 있습니다.
<! - begin 스니핏: js 숨기십시오: 거짓값 콘솔: 진정한 바벨. > 거짓값 -;
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>
끝 - < 스니핏 >;!
<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>
이것이 내가 이미지를 사용하여 아니하였으매 - 입력하십시오. 이미지 여기에 설명을