CSS 외각선 형식

DEVELOPE/CSS

CSS 외각선 형식

소찾나 2017. 11. 11. 12:10

CSS 외각선 형식

CSS 의 외각선 형식을 설정합니다. 외각선 형식은 모든 요소에 설정할 수 있으며 border-style을 이용하면

상하좌우의 외각선 형식을 한꺼번에 설정할 수도 있습니다. 이 경우, 값을 스페이스로 구분해서 지정하면

주어진 값의 갯수에 따라 다음과 같이 외각선 형식이 설정됩니다.

1 형식

▶값이 한 개인 경우 - 상하좌우

▶값이 두 개인 경우 - 값1(상하값) 값2(좌우)

▶값이 세 개인 경우 - 값1(상) 값2(좌우) 값3(하)

▶값이 네 개인 경우 - 값1(상) 값2(우) 값3(하) 값4(좌)

none 과 hidden 은 상하좌우 외각선을 모두 나타내지 않고 외각선 굵기도 0으로 설정합니다. 단, 표의 셀 외각선과 겹쳐질 경우,

none 은 다른값이 우선되고 hidden은 자기자신의 값이 우선됩니다. 초기값은 none 입니다. 현재 dotted와 dashed는 지원되는

web 브라우저가 거의 없습니다.

2 외각선 예제

<!DOCTYPE html>
 <head>
 <style>
    body { background-color: white; }
    td { padding:5px }
    P {
        width: 100px;
        padding: 10px;
        text-align:center;
        border-width: 6px;
        border-color: #ff6600;
    }
 
 
 </style>
 </head>
 <body>
   <table>
     <tr>
       <td><P style="border-style: none">none</P></td>
       <td><P style="border-style: dotted">dotted</P></td>
       <td><P style="border-style: dashed">dashed</P></td>                                                  
    </tr>
     <tr>
       <td><P style="border-style: solid">solid</P></td>
       <td><P style="border-style: groove">groove</P></td>
       <td><P style="border-style: ridge">ridge</P></td>
    </tr>
     <tr>
       <td><P style="border-style: double">double</P></td>
       <td><P style="border-style: inset">inset</P></td>
       <td><P style="border-style: outset">outset</P></td>
    </tr>
  </table>
 </body>
</html>

Colored by Color Scripter

이글이 도움이 되셨다면 아래에 로그인이 필요없는 공감 버튼을 클릭해주세요 ^^