05-01. css3 테두리와 투명도

border-width: 1px;

여기서 px 단위로 많이 사용 하는 이유는

얇고 웬만해선 규격이 바뀌지 않아 많이 사용한다고 한다.

 

 

box-sizing: border-box

좌우의 테두리로 요소의 크기가 결정된다.

(내부공간이 줄어든다.)

 

 

opacity: 0.6(범위)

투명도와 불투명도

범위는 0~1이며 1에 가까울 수록 불투명해진다.

만약에 배경만 투명하게 할려면 background-color: rgba(255.255.255.0.2) 형식처럼 쓰면 되고

내부에 있는 글처럼 모두를 투명하게 할경우 back-ground: blue; 를 쓴후 아래에 opacity:0.2 로 쓰면 된다.

    <style>

        /*배경만 투명하게*/
        #rgba {
            width:50%;
            height:50%;
            background-color: rgba(255.255.255.0.2);
        }

        /*모두 투명하게*/
        #opacity {
            width:50%;
            height:50px;
            background-color: blue;
            opacity:0.2;
        }
    </style>