css3의 새로운 속성은 무엇입니까? 이 질문을 하러 오시는 분들은 CSS3가 CSS의 업그레이드 버전이라는 점을 아셔야 합니다. 따라서 CSS3는 업그레이드 버전이므로 자연스럽게 몇 가지 새로운 속성이 추가될 것입니다. 다음으로, 이 글에서는 일반적으로 사용되는 새로운 기능을 소개하겠습니다. css3 속성 .
1. CSS3의 새로운 테두리 속성
1. CSS3의 새로운 속성인 Border-color: 테두리에 여러 색상을 설정합니다.
p { border-style:solid; border-color:#ff0000 #0000ff; }
여기에서 좀 더 자세히 설명하겠습니다. 다음 사항에 주의해야 합니다. -width" 속성 단독으로 사용하면 작동하지 않습니다. 먼저 "border-style" 속성을 사용하여 테두리를 설정해 주세요.
2. CSS3의 새로운 속성인 Border-image: 그림 테두리
css3의 border-image 속성은 이미지를 사용하여 테두리를 만듭니다.
div { -webkit-border-image:url(border.png) 30 30 round; /* Safari 5 */ -o-border-image:url(border.png) 30 30 round; /* Opera */ border-image:url(border.png) 30 30 round; }
참고: Internet Explorer는 border-image 속성을 지원하지 않습니다. -image 속성 테두리로 사용되는 이미지를 지정합니다.
3. CSS3의 새로운 속성인 Border-radius: 둥근 테두리
div { border:2px solid; border-radius:25px; }
4. box-shadow, CSS3의 새로운 속성: 그림자 효과
css3의 box-shadow는 그림자를 추가하는 데 사용됩니다. 상자
div { box-shadow: 10px 10px 5px #888888; }
2. CSS3의 새로운 배경 속성
1. CSS3의 새로운 속성인 Background-size: 배경 이미지 크기를 지정합니다.
CSS3 이전에는 배경 이미지의 크기가 이미지의 실제 크기입니다. CSS3에서는 배경 이미지의 크기를 지정할 수 있어 다양한 환경에서 배경 이미지를 재사용할 수 있습니다. 크기를 픽셀이나 백분율로 지정할 수 있습니다. 크기가 백분율로 지정된 경우 크기는 상위 요소의 너비와 높이를 기준으로 합니다.
div { background:url(img_flwr.gif); background-size:80px 60px; background-repeat:no-repeat; }
2. CSS3의 새로운 속성인 Background-origin: 배경 이미지 표시를 시작할 위치를 지정합니다.
배경 이미지는 콘텐츠 상자, 패딩 상자 또는 테두리 상자 영역에 배치할 수 있습니다.
div { background-image:url('smiley.gif'); background-repeat:no-repeat; background-position:left; background-origin:content-box; }
3. CSS3의 새로운 속성인 Background-clip: 배경 이미지 자르기를 시작할 위치를 지정하세요
div { background-color:yellow; background-clip:content-box; }
3. CSS3의 새로운 텍스트 효과
1. css3 -shadow: 텍스트 그림자
h1 { text-shadow: 5px 5px 5px #FF0000; }
설명:
(1)
(2) 그림자는 다음과 같이 쉼표로 구분된 목록일 수 있습니다. text-shadow: 2px 2px 2px #ccc, 3px 3px 3px #ddd;
(3 ) 그림자 효과는 그림자 목록에 지정된 순서대로 요소에 적용됩니다.
(4) 이러한 그림자 효과는 서로 겹칠 수 있지만 텍스트 자체는 겹치지 않습니다.
(5) 그림자가 경계 외부로 실행될 수 있습니다. 컨테이너의 크기이지만 컨테이너 크기에는 영향을 미치지 않습니다.
2. CSS3의 새로운 속성인 Word-wrap: 자동 줄 바꿈
단어가 너무 길면 특정 영역을 초과하지 않을 수 있습니다. 긴 단어는 분할되어 다음 줄로 넘어갈 수 있습니다.
p {word-wrap:break-word;}
four, css3 새로운 애니메이션 효과
1. 변형 변형 효과:
속성 값: (1) 변환; (2) 변환-원점: 변환-원점 속성은 변환의 시작점을 설정할 수 있습니다. 기본적으로 요소의 중심이 시작점으로 사용됩니다.
2. 애니메이션 애니메이션 효과
5. CSS3의 새로운 전환 효과
1. 전환 효과
전환 효과는 일반적으로 :hover, :focus, :active, :checked 등과 같은 몇 가지 간단한 CSS 작업을 통해 부드러운 전환 기능을 실행합니다. . CSS3은 이 전환 기능을 구현하기 위해 전환 속성을 제공합니다. CSS3의 새로운 전환 콘텐츠와 새로운 애니메이션 효과에 대해서는CSS3 최신 버전 참조 매뉴얼을 참조할 수도 있습니다. 내용이 아주 자세하게 나와있습니다.
이 글은 여기서 끝납니다. 위 내용은 CSS3의 새로운 공통 속성을 요약한 것입니다. 관련 권장 사항:CSS3의 새로운 배경 속성과 사용법은 무엇입니까?
위 내용은 CSS3의 새로운 속성은 무엇입니까? CSS3에서 일반적으로 사용되는 새로운 속성 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!