CSS 08. 테두리 관련 스타일

테두리 관련 스타일(border-)

선택자 {

        *테두리 스타일

        border[-위치]-style : none | dotted | dashed | solid | double | groove | ridge | inset| outset;

       

        *테두리 두께

        border[-위치]-width : 테두리두께;

        *테두리 색상

        border[-위치]-color : 테두리색상;

       

        *테두리두께, 스타일, 색상을 한큐에 지정

        border[-위치] : 두께 스타일 [색상];

   

        *테두리 모서리 둥그스름하게

        border[-상하위치-좌우위치]-radius :숫자;

        *박스의 그림자 효과

        box-shadow : 가로거리(x) 세로거리(y) 흐림정도 번짐정도 색상 ;

    }  

<div class ="test" id="test1"></div>
<div class ="test"id="test2"></div>
<div class ="test"id="test3"></div>
<div class ="test"id="test4"></div>
<div class ="test"id="test5"></div>
<div class ="test"id="test6"></div>
<div class ="test"id="test7"></div>
<div class ="test"id="test8"></div>
<div class ="test"id="test9"></div>
<div class ="test"id="test10"></div>

<button id="btn">로그인</button>

<style>
        .test{
            width:100px;
            height:100px;
            border-width:3px;
            margin:15px
        }
        #test1{
            border-style:dotted;
            border-top-width: 10px;
        }
        #test2{
            border-style:dashed;
            border-left-color: blue;
        }

        #test3{
            border-style:dashed double solid dotted;
            border-width: 7px;
        }
        #test4{
            border-style: groove;
            border-width: 10px;
        }
        #test5{
            border-style: ridge;
            border-width:10px
        }
        #test6{
            border-style: inset;
            border-width: 10px;
        }
        #test7{
            border-style:outset;
            border-width: 10px;
        }
        #test8{
            box-shadow: 5px 5px 5px 5px gray;
        }
        #test9{
            border-style:solid;
           /* border-radius: 50px;*/
           border-top-right-radius: 50px;
           border-bottom-left-radius: 50px;
           background-color: green;
        }
        #test10{
            border:10px dashed pink;
        }
        #btn{border:none;
        padding:10px 20px;
        border-radius: 10px;}

        #btn:hover{
            background-color: lightgray;
            cursor: pointer;
        }
    </style>