아무래도 7note입니다. border를 사용하여 직선을 그리는 것 외에 할 수있는 일을 정리했습니다.

div {
  border: solid 1px #000;
}

이것 이외에 사용한 적이 없다 ... 뭐라고 하지 않습니까?
알고 있는 것 같고 모르는지도 모르는, border로 할 수 있는 것을 여러가지 정리했습니다.

「직선 이외도 그릴 수 있다」

비교적 기본적인 일이지만 일단.
border의 스타일을 solid 이외로 지정하면 점선이나 물결선도 그릴 수 있습니다.

style.css

div {
  border: dotted 1px #000; /* 点線を引く */
  border: dashed 1px #000; /* 破線を引く */
  border: double 1px #000; /* 二重線を引く */
}

「곡선도 그릴 수 있다」※ 물결선은 조금 어렵다

당연한 사람은 당연할 수 있지만, border-radius와 결합하여 곡선을 만들 수 있습니다.

style.css

div {
  border-top: solid 1px #000;  /* 線を引く（※borderを4方向に指定すれば円になる） */
  border-radius: 50%;          /* 曲線にする */
}

「입체감이 있는 선을 그린다」

의사 요소를 사용하거나 그림자와 함께 입체감 있는 선을 그릴 수 있습니다.
※견본 화상은 배경에( background: #666; )를 넣고 있습니다.

그림자를 사용한 예

style.css

div {
  border-bottom: solid 1px #333;
  box-shadow: 0 1px 0 #ccc;
}

의사 요소를 사용한 예

style.css

div {
  position: relative;
}
div::after {
  content: '';
  width: 100%;
  border-bottom: solid 1px #333;
  box-shadow: 0 1px 0 #ccc;
  position: absolute;
  left: 0;
  bottom: 0;
}

"삼각형 만들기"

삼각형도 쉽게 만들 수 있습니다. 이 삼각형을 사용하여 연설 거품을 만들거나 왠지 자주 있는 수법이군요.
삼각형 발전기가 있기 때문에 이러한 WEB 도구를 사용하는 것이 좋습니다!


style.css

div {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 10px 10px 10px;
  border-color: transparent transparent #007bff transparent;
}

「삼각형 이외에도 사다리꼴도 만들 수 있습니다」

style.css

div {
  width: 20px;  /* ここの値で調整可能 */
  height: 20px; /* ここの値で調整可能 */
  border-style: solid;
  border-width: 0 10px 10px 10px;
  border-color: transparent transparent #007bff transparent;
}

"화살표 만들기"

border의 위와 오른쪽을 작성해, 45도 회전시키면 자주 버튼에 붙는 화살표도 만들 수 있습니다.

style.css

div {
  width: 20px;
  height: 20px;
  border-top: 1px solid #000;
  border-right: 1px solid #000;
  transform: rotate(45deg);
}

「덤」

할 수없는 것, 그라디언트 보더 만들기

이것은 border를 사용하여 재현 할 수 없습니다.
배경을 사용하여 표현할 수 있습니다.

style.css

.div{
    width: 100%;
    height: auto;
    padding: 0;
    text-align: center;
    border-left: 2px solid #43C6AC;
    border-right: 2px solid #d9e653;
}
div::before,
div::after{
    content: "";
    display: block;
    height: 2px;
    background: linear-gradient(to right, #43C6AC 0%, #d9e653 100%);
}

요소 점유 범위 확인

어떤 요소가 어디에 표시되고 있는지 모르거나 표시 장소 뭔가가 생각했던 대로가 되지 않을 때, 우선 border나 background등을 지정해, 상황을 확인하는데 사용합니다.

나 자신도 시작한 지 얼마 안 되면, 잘 모르게 되면 우선 Border를 붙여 요소의 현재치를 확인하도록 하고 있었습니다.

※border의 분만큼 요소의 가로폭이 길어지므로 피타피타의 디자인이라고 border가 원인으로 무너지는 일도 있으므로 주의!

참고:
h tp : // s 드라. b. jp/bぉg/? p=511
htp /// ps. 에 ky. hk / cs-t 리안 g ㅇ
htps //w w. 니후 쿠레 st. 이. jp/bぉg/카테고 ry/치 ps/442/

소마츠!

~ Qiita에서 매일 게시 중!! ~
【초보자용】WEB 제작의 조금 테크 모임