티스토리 뷰

DEVELOPE/CSS

CSS 외각선 형식

소찾나 2017. 11. 11. 12:10
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

CSS 외각선 형식

CSS 외각선 형식

CSS 외각선 형식



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


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


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




1 형식


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


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


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


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


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


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


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





2 외각선 예제


CSS 외각선 형식



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!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>
cs



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

'DEVELOPE > CSS' 카테고리의 다른 글

css box-shadow 속성  (0) 2017.12.02
CSS border-radius 모서리 부드럽게 처리및 원그리기  (0) 2017.11.30
CSS 외부파일 불러오기  (0) 2017.10.27
CSS DIV 속성 position  (0) 2017.10.27
CSS 폰트(Font) 글꼴속성  (0) 2017.10.26
공유하기 링크
댓글