CSS : 버튼을 꾸미는 Border-Style CSS

CSS : 버튼을 꾸미는 Border-Style CSS 

---

CSS : Button을 꾸미는 Border-Style CSS

 

/* 버튼 간격 설정 */
button {
  width: 100px;
  height: 100px;
  margin: 0px 5px 15px 0px;
}

/* 버튼 정렬하기 */
.buttonBox {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

/* 하단부터 버튼 스타일링 */

.dotted {
  border-style: dotted;
}
.double {
  border-style: double;
}
.none {
  border-style: none;
}
.groove {
  border-style: groove;
}
.dashed {
  border-style: dashed;
}
.outset {
  border-style: outset;
}
.inset {
  border-style: inset;
}
.dashedSolid {
  border-style: dashed solid;
}
.dashedDouble {
  border-style: dashed double none;
}
.dashedGroove {
  border-style: dashed groove none dotted;
}

/* 

 위 | 오른쪽 | 아래 | 왼쪽 
border-style: none solid dotted dashed;

*/

 

 

---

.none {
  border-style: none;
}

• none : 테두리를 표시하지 않으며, background-image를 지정하지 않았으면 해당면의 border-width 값은 지정 값을 무시하고 0이 되며 none은 제일 낮은 순위를 가지기 때문에 주변 칸이 테두리를 가진다면 테두리를 그린다.

 

.hidden {
  border-style: hidden;
}

• hidden : none 키워드와 마찬가지로 테두리를 표시하지 않으나 제일 높은 우선순위를 가지기 때문에 주변 칸이 테두리를 가지더라도 테두리를 그리지 않는다.

 

.dotted {
  border-style: dotted;
}

• dotted : 테두리를 둥근 점 여러개로 그린다.
  • 점 간격은 지정하지 않으면 웹브라우저마다 상이하다.
  • 점의 반지름은 해당면의 border-width의 절반이다.

 

.dashed {
  border-style: dashed;
}

• dashed : 테두리를 직사각형 여러 개로 그린다.
  • 사각형의 크기와 길이는 지정하지 않으면 웹브라우저마다 상이하다

 

.solid {
  border-style: solid;
}

• solid : 테두리를 하나의 직선으로 그린다.

 

.double {
  border-style: double;
}

• double : 테두리를 두 개의 평행한 직선으로 그린다.

.groove {
  border-style: groove;
}

• groove : 테두리가 파인것처럼 그린다ridge와 반대이다.

 

.ridge {
  border-style: ridge;
}

• ridge : 테두리가 튀어나오는 것처럼 그린다. groove의 반대이다. 

 

.inset {
  border-style: inset;
}

• inset : 요소가 파인 것처럼  테두리를 그린다.
  • outset의 반대이며, border-collapse 가 collapsed 칸에서는 groove와 동일하다 

 

.outset {
  border-style: outset;
}

• outset : 요소가 튀어나온 것처럼 테두리를 그린다. 
  • inset의 반대이며, border-collapse가 collapsed 칸에서는 ridge와 동일하다.

 

 

---