>웹 프론트엔드 >CSS 튜토리얼 >CSS3의 새로운 기능은 무엇입니까? CSS3의 새로운 기능에 대한 자세한 설명

CSS3의 새로운 기능은 무엇입니까? CSS3의 새로운 기능에 대한 자세한 설명

云罗郡主
云罗郡主앞으로
2019-01-04 09:53:488007검색

이 기사에서는 CSS3의 새로운 기능이 무엇인지 소개합니다. CSS3의 새로운 기능에 대한 자세한 설명은 참고할만한 가치가 있습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다. [추천 튜토리얼: CSS 튜토리얼]

CSS3의 새로운 기능은 무엇인가요?

새 선택기 p:nth-child(n){color: rgba(255, 0, 0, 0.75)}

플렉스 박스 모델 디스플레이: flex;

다중 열 레이아웃 열 개수: 5;

미디어 쿼리 @media (최대 너비: 480px) {.box: {column-count: 1;}}

맞춤형 글꼴 @font-face{font-family:BorderWeb;src:url(BORDERW0.eot) }

색상 투명도 색상: rgba(255, 0, 0, 0.75);

둥근 테두리 반경: 5px;

그라데이션 배경: 선형 그라데이션(빨간색, 녹색, 파란색)

그림자 상자 그림자:3px 3px rgba (0, 64, 128, 0.3);

반사 상자-반영: 2px 이하;

텍스트 장식 텍스트-획-색상: 빨간색;

텍스트 오버플로 텍스트-오버플로:

배경 효과 배경- 크기: 100px 100px;

테두리 효과 border-image: url (bt_blue.png) 0 10;

변환

회전 변환: 회전(20deg)

기울기 변환: 기울이기(150deg, -10deg) ; 변위 변환: 변환(20px, 20px);

스케일 변환: 스케일(.5);

부드러운 전환 전환: 모든 .3s easy-in .1s

animation @keyframes anim-1 {50% 반경: 50%;}} 애니메이션: anim-1 1s;

위 내용은 CSS3의 새로운 기능은 무엇입니까? CSS3의 새로운 기능에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
이 기사는 csdn.net에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제