5. CSS 정리 (2)

-CSS Border Images 

 

테두리에 이미지 넣은 것

원본이미지

 

 

border 속성 : width - style - color 순서

 

width : 테두리의 두께, 단위는 주로 px

style : 테두리의 스타일 (실선, 점선, 이중선)

color : 테두리의 색상

 

border -> transparent : 투명을 지정

 

border-image 의 5가지 속성

•  border-image-source
•  border-image-slice
•  border-image-width
•  border-image-outset
•  border-image-repeat

 

---

 

-CSS Gradients

 

from top to bottom (white to green)

 

from the top left to the bottom right(white to green)

 

 

div {
  background-image: linear-gradient(to bottom right, white, green);
}

 

 

여러가지 색

white to red to blue to green

 

 

---

 

 

-CSS Shadow Effects

 

 

수평 거리 2px, 수직거리 2px

 

 

blir-radius : 5px (흐림정도, 기본값은 0)

 

box-shadow 적용

 

그림자 효과를 여러 번 적용했을 때

 

---

 

 

-CSS Text Effects

 

 

 

텍스트가 초과될때 (...)로 나타내기  : text-overflow: ellipsis;

 

 

단어 단위로 자르기 :  word-break: break-word;

 

 

무조건 자르기 : word-break: break-all;

 

---

 

-CSS Transitions 

 

2초안에 너비 변환 : transition: width 2s;

마우스를 올렸을 때 : div:hover....

 

마우스 올렸을때; 너비 변화

마우스 올렸을때 색 변화 

마우스 올릴때, 색변화 + 회전

-> 180도 회전하면서 색 변화함