- -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;}
'CSS' 카테고리의 다른 글
[CSS] (0) | 2015.06.08 |
---|---|
[CSS] 서버 웹폰트 적용 (0) | 2015.06.05 |
Block 요소의 가운데 정렬 (0) | 2015.05.06 |
float 요소 중앙정렬 (0) | 2015.05.06 |
[CSS] 서버 웹폰트 적용 @font-face (0) | 2015.05.01 |
IE9 이상으로 브라우저를 업그레이드하거나, 크롬, 파이어폭스 등 최신 브라우저를 이용해주세요.