border-radius:CSS3 필렛 경계 상자.CSS2에 원각 사각형을 추가하려면 기교가 필요합니다. 원각마다 다른 그림을 사용해야 합니다.CSS에서는 원각을 만드는 것이 매우 쉽습니다. CSS3에서border-radius 속성은 원각을 만드는 데 사용됩니다.border: 2px solid;
border-image: CSS3 테두리 그림.CSS3의 border-iamge 속성을 사용하면 프레임을 만들 수 있습니다.border-image: url(border.png) 30 30 round;
2. CSS3 배경
background-size: 이 속성은 배경 그림의 사이즈를 규정합니다.CSS3 이전에 배경 그림의 사이즈는 이 그림의 실제 사이즈에 의해 결정된다.CSS3에서 배경 그림의 사이즈를 정할 수 있습니다. 이로써 서로 다른 환경에서 배경 그림을 반복적으로 사용할 수 있습니다.치수는 픽셀 또는 백분율로 지정할 수 있습니다.치수를 백분율로 지정하면 치수는 모 요소의 너비와 높이를 기준으로 합니다.
background-origin: 이 속성은 배경 그림의 포지셔닝 구역을 규정합니다.배경 그림은 콘텐츠-box,padding-box,border-box 구역에 놓을 수 있습니다.
3. CSS 3 텍스트 효과
text-shadow: CSS3에서 text-shadow는 텍스트 응용에 음영을 추가할 수 있습니다.text-shadow: 5px 5px 5px #ccc;
word-warp: 단어가 너무 길면 한 구역을 넘지 못할 수도 있습니다. 긴 단어를 나누어 다음 줄로 바꿀 수 있습니다.p { word-wrap: break-word; }
4. CS3 2D 변환 transform: CSS3 변환을 통해 우리는 원소를 이동, 축소, 회전, 늘리기 또는 당길 수 있습니다.
translate(): 원소가 현재 위치에서 이동하고 주어진left(X 좌표)와 top(Y 좌표)의 위치 파라미터에 따라 이동합니다.transform: translate(50px, 100px);값translate(50px, 100px)는 원소를 왼쪽에서 50픽셀, 맨 위에서 100픽셀로 이동시킨다.
rotate(): 원소가 시계 바늘을 따라 주어진 각도를 회전한다.음수 값을 허용하면 요소가 반시계 방향으로 회전합니다.transform: rotate(45deg);값rotate(454deg)는 원소를 시계 방향으로 45도 회전시킨다.
scale(): 요소의 크기는 지정된 너비(X축)와 높이(Y축) 매개변수에 따라 증가하거나 감소합니다.transform: scale(2, 4);값 scale(2,4)는 너비를 원 사이즈의 2배, 높이를 원시 높이의 4배로 변환한다.
skew(): 원소는 주어진 각도를 돌려 주어진 수평선(X축)과 수직선(Y축) 매개 변수를 따른다.transform: skew(30deg, 20deg);값 skew(30deg, 20deg)는 X축을 둘러싸고 원소를 30도, Y축을 둘러싸고 20도 돌린다.
matrix():matrix() 방법은 모든 2D 변환 방법을 결합시킨다.matrix () 방법은 6개의 인자가 필요합니다. 디지털 함수를 포함하여 회전, 축소, 이동, 경사 요소
를 허용합니다. 5. CS3 3D 변환
rotateX(): 원소는 X축을 둘러싸고 주어진 도수로 회전한다.transform: rotateX(120deg);
rotateY(): 원소는 Y축을 둘러싸고 주어진 도수로 원전한다.transform: rotateY(120deg);
6.CSS3 변환 transition은 CSS의 속성 값이 일정한 시간 동안 매끄러운 과도를 허용하고 마우스를 클릭하거나 초점을 얻거나 클릭하거나 요소에 대한 변경 사항을 터치하며 원활하게 움직이는 효과로 CSS의 속성 값을 변경할 수 있습니다.호환성: IE10+, Firefox16+, Safari6.1+、Opera12.1+
transition-property: 대상에서 과도에 참여하는 속성을 검색하거나 설정합니다.transition-property: none | all | property; 매개변수 설명:
none: 속성 변경 없음
all: 모든 속성 변경(기본값)
property: 요소 속성 이름
transition-duration: 검색 또는 설정 대상의 과도 지속 시간.transition-duration: time; 매개변수 설명:
ease-in: 느린 것에서 빠른 것까지.베지어 커브(0.42, 0, 1.0, 1.0)와 동일
ease-out: 빠른 것에서 느린 것까지.베지어 커브(0, 0, 0.58, 1.0)와 동일
ease-in-out: 느린 것에서 빠른 것, 그리고 느린 것까지.베지어 커브(0.42, 0, 0.58, 1.0)와 동일
step-start: steps(1,start)와 동일
step-end: steps(1,end)와 동일
steps([, [start | end]]?): 두 개의 매개 변수를 받아들이는 보진 함수 첫 번째 매개 변수: 반드시 정수로 함수(함수의 보수, 몇 걸음으로 완성하는지를 가리키는 것)를 지정해야 한다. 두 번째 매개 변수: 값은 start 또는end일 수 있고, 한 걸음마다 값이 바뀌는 시간점을 지정해야 한다(선택 가능, 기본값end)
transition-delay: 검색 또는 설정 대상이 과도하게 지연되는 시간transition-delay: time; 파라미터 설명:
