[CSS3] 속성

• -webkit- 웹킷 방식 브라우저 (사파리, 크롬)
• -moz- 게코 방식 브라우저 (모질라나, 파이어폭스)
• -o- 오페라 브라우저
• -ms- 마이크로소프트 인터넷 익스플로러

border-radius

• css

.round{-webkit-border-radius:20px;-moz-border-radius:20px;-o-border-radius:20px;-ms-border-radius:20px;}

.round1{-webkit-border-top-left-radius:20px;} // 왼쪽 위

.round2{-webkit-border-top-right-radius:20px;} //오른쪽 위

.round3{-webkit-border-bottom-left-radius:20px;} // 왼쪽 아래

.round4{-webkit-border-bottom-right-radius:20px;} //오른쪽 아래

resize

• css

.resize{resize:both; overflow:auto;} // 가로,세로 

.resize{resize:vertical; overflow:auto;} // 세로 

.resize{resize:horizontal; overflow:auto;} //가로 

border-shadow

• css

.shadow{box-shadow:5px 5px 20px red;-webkit-box-shadow:5px 5px 20px red;}

.shadow{box-shadow:5px 5px 20px rgba(255,0,0,0.2);}

text-shadow

• css

.text{font-size:2em;font-weight:bold;background:#fff;text-shadow:5px 5px 5px rgba(0,255,0,0.5);}

text-overflow

• css

.overflow{width:200px;border:1px solid red; text-overflow:clip;overflow:hidden;}

.overflow{width:200px;border:1px solid red; text-overflow:ellipsis;overflow:hidden;}

background-image

• css

.bg{width:600px;height:400px;border:1px solid green;background:url(bg.jpg) no-repeat, url(bg2.gif) repeat;}

background-origin

• css

.origin{width:200px;padding:30px;border:1px solid green;background:url(bg.gif) no-repeat;background-origin:content-box;}

//padding을 제외한 컨텐츠 영역부터 기준점으로 배경 배치. repeat 지정시 기준점 밖 영역은 repeat 배경으로 채움 

.origin{width:200px;padding:30px;border:1px solid green;background:url(bg.gif) no-repeat;background-origin:padding-box;}

//padding영역부터 배경이미지 배치. 기준점 밖 영역은 repeat 배경으로 채움

.origin{width:200px;padding:30px;border:1px solid green;background:url(bg.gif) no-repeat;background-origin:border-box;}

//border의 바깥쪽 라인영역을 기준으로 배경이미지 배치.

background-size

• css

.bgsize{background:url(bg.gif) no-repeat;background-repeat:no-repeat;background-size:80px 60px;}

background:Gradients

• css

.gradient{width:300px; height:200px;

background:gradient(linear,left top,left bottom,from(#f00),to(#fff));

background:-webkit-gradient(linear,left top,left bottom,from(#f00),to(#fff));}

// barground:gradient(유형linear,시작위치,끝위치,색상시작지정,색상끝지정)

.gradient{width:300px; height:200px;

background:gradient(radial,center center,10,center center,90,from(#f00),to(#fff));

background:-webkit-gradient(radial,center center,10,center center,90,from(#f00),to(#fff));}

// barground:gradient(유형radial,시작위치,반지름,위치,반지름,색상시작지정,색상끝지정)

linear-gradient

• css

.linear-gradient{width:200px; height:100px;

background:linear-gradient(45deg,red,green,blue);

background:linear-gradient(to top, rgba(0,255,0,0),rgba(0,255,0,0.8));}

columns

• css

.columns{column-count:4; //단의 개수

   -webkit-column-count:4; 

   column-gap:50px; //단과 단사이의 공백

   -webkit-column-gap:50px;

   column-rule:2px dotted gray; //라인

   -webkit-column-rule:2px dotted gray;

   column-width:100px; //단의 가로크기

   -webkit-column-width:100px;}

font-face

• css

@font-face{font-family:src:url(파일명);}

animation

• css

.animation{width:50px; height:50px;

background:blue; position:relative;

animation:ani 5s;-webkit-animation:ani 5s;}

@keyframes ani{

0%{background:blue; left:0px; top:0px;}

100%{background:red; left:200px; top:0px;}

}

@-webkit-keyframes ani{

0%{background:blue; left:0px; top:0px;}

100%{background:red; left:200px; top:0px;}

}

opacity

• css

.opacity{opacity:0.3;}

flex

• html

<div class="flex">

<div class="box1">box1</div>

<div class="box2">box2</div>

<div class="box3">box3</div>

</div>

• css

.flex{width:400px; height:300px; border:1px solid red; display:flex;}

.flex div{flex-basis:100px;}

.flex div:nth-of-type(1){flex-basis:200px;}

.box1{background:red;}

.box2{background:green;}

.box3{background:blue;}