집 > 기사 > 웹 프론트엔드 > CSS3의 새로운 속성은 무엇입니까? CSS3에서 일반적으로 사용되는 새로운 속성 요약

CSS3의 새로운 속성은 무엇입니까? CSS3에서 일반적으로 사용되는 새로운 속성 요약

不言원래의: 2018-08-30 15:41:1618539검색

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(&#39;smiley.gif&#39;);
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) 5275270f2d75787ee7654275985cc94f 및 d1e7a011b4299cd1bb50fec200b64ff8는 선택 사항입니다. 5275270f2d75787ee7654275985cc94f 흐림 반경> 지정되지 않은 경우 반경 값은 0입니다.

(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. 변형 변형 효과:

css3은 변형이라고도 하는 요소 변형 효과를 제공합니다. 요소를 회전, 크기 조정 및 변환할 수 있습니다.

속성 값: (1) 변환; (2) 변환-원점: 변환-원점 속성은 변환의 시작점을 설정할 수 있습니다. 기본적으로 요소의 중심이 시작점으로 사용됩니다.

2. 애니메이션 애니메이션 효과

CSS3는 애니메이션 속성을 통해 달성되는 플래시 키프레임 제어와 유사한 애니메이션 효과를 제공합니다. 그러면 이전 전환 속성은 속성의 초기 상태와 종료 상태를 지정해야만 애니메이션 효과를 얻을 수 있으며, 여기에는 특정 제한이 있습니다.

animation 애니메이션 효과 구현은 크게 두 부분으로 구성됩니다. 1. Flash 애니메이션과 유사한 키 프레임을 통해 애니메이션을 선언합니다. 2. 애니메이션 속성에서 키 프레임으로 선언된 애니메이션을 호출합니다.

5. CSS3의 새로운 전환 효과

1. 전환 효과

전환 효과는 일반적으로 :hover, :focus, :active, :checked 등과 같은 몇 가지 간단한 CSS 작업을 통해 부드러운 전환 기능을 실행합니다. . CSS3은 이 전환 기능을 구현하기 위해 전환 속성을 제공합니다.

CSS3의 새로운 전환 콘텐츠와 새로운 애니메이션 효과에 대해서는

이 글은 여기서 끝납니다. 위 내용은 CSS3의 새로운 공통 속성을 요약한 것입니다.

CSS3의 새로운 속성은 무엇입니까? CSS3에서 일반적으로 사용되는 새로운 속성 요약

관련 기사