[CSS] Border 스타일

2332 단어 CSSCSS

border

테두리 스타일,두께,색상 한번에 지정(순서 상관 없음)

border: <두께> | <스타일> | <색상>

border-width: 테두리 두께

border-width: <크기> | thin | medium | thick

border-style: 테두리 스타일

border-style: <값>
  • none : 선없음
  • solid : 실선(일반 선)
  • dashed : 파선(약간 긴 점선)
  • dotted : 점선
  • double : 두 줄 선
  • groove : 홈이 파여있는 모양
  • ridge : 솟은 모양
  • inset : 요소 전체가 들어간 모양
  • outset : 요소 전체가 나온 모양
  • hidden : 테두리가 존재하기는 하지만 표현되지는 않음.

border-color: 테두리 색상(기본값 black)

border-color: <색상>

border-radius

모서리 부분 둥글게 처리(원만들기: 50%)

border-radius: <크기> | <백분율>

border-shdow

그림자 효과 내기

border-shdow: none | <그림자 값>

그림자 값
<수평 거리> <수직 거리> <흐림 정도> <번짐 정도> <색상> [<inset>]

  • inset: 안쪽 그림자

overflow

요소의 크기 이상으로 넘치는 내용 처리

overflow: <값>

visible: 넘친 내용을 그래도 보여줌(디폴트)
hidden: 넘친 내용을 잘라냄
auto: 넘친 내용은 잘라내고 스크롤바 생성

overflow-x, overflow-y 속성으로 한 방향만 개별 처리할 수 있다.

좋은 웹페이지 즐겨찾기