Computer >> 컴퓨터 >  >> 프로그램 작성 >> JavaScript

CSS로 테두리 스타일 설정

<시간/>

테두리 스타일을 설정하려면 border-style을 사용하세요. 재산. border-style 속성을 사용하면 다음 테두리 스타일 중 하나를 선택할 수 있습니다.

  • 없음: 국경 없음
  • 단단함: 테두리는 단일 실선입니다.
  • 점선: 테두리는 일련의 점입니다.
  • 파선: 테두리는 일련의 짧은 줄입니다.
  • 이중: 테두리는 두 개의 실선입니다.
  • 그루브: 테두리가 페이지에 새겨진 것처럼 보입니다.
  • 릿지: 테두리는 홈의 반대처럼 보입니다.
  • 삽입: 테두리는 상자가 페이지에 포함된 것처럼 보이게 합니다.
  • 시작: 테두리는 상자가 캔버스에서 튀어나온 것처럼 보이게 합니다.
  • 숨김: 테이블 요소에 대한 경계 충돌 해결 측면을 제외하고는 없음과 동일합니다.

예시

다음 코드를 실행하여 테두리 스타일을 설정할 수 있습니다.

<html>
   <head>
   </head>
   <body>.
      <p style = "border-width:4px; border-style:none;">
         This is a border with none width.
      </p>
      <p style = "border-width:4px; border-style:solid;">
         This is a solid border.
      </p>
      <p style = "border-width:4px; border-style:dashed;">
         This is a dashed border.
      </p>
      <p style = "border-width:4px; border-style:double;">
         This is a double border.
      </p>
      <p style = "border-width:4px; border-style:groove;">
         This is a groove border.
      </p>
   </body>
</html>