CSS3의 일반적인 새로운 기능 소개

새로운 요소 선택기

E:nth-last-child(n), E:nth-of-type(n), E:nth-last-of-type(n), E:last-child, E:first-of-type, E:only-child, E:only-of-type, E:empty, E:checked, E:enabled, E:disabled, E::selection, E:not(s)

border-radius

둥근 모서리 속성이라고도 하는 이 속성은 일반적으로 아바타와 같은 이미지의 둥근 모서리에 사용됩니다.

border-radius: 50%;

일반적으로 사용되는 또 다른 테두리 반경 방법은 CSS 애니메이션입니다.

word-wrap & text-overflow

word-wrap 속성은 문자열이 너무 길고 자연스러운 중단점을 찾을 수 없을 때 오버플로를 방지하기 위해 브라우저가 단어 내의 문장을 나누는 것을 나타내는 데 사용됩니다.

word-wrap: break-word;

text-overflow는 텍스트 오버플로에 사용됩니다.

한 줄 약어 구현은 다음과 같습니다.

.oneline {
    white-space: nowrap; //强制文本在一行内输出
    overflow: hidden; //隐藏溢出部分
    text-overflow: ellipsis; //对溢出部分加上...
}

여러 줄 약어 구현은 다음과 같습니다(주로 웹킷 커널의 경우):

.multiline {
    display: -webkit-box !important;
    overflow: hidden;
    
    text-overflow: ellipsis;
    word-break: break-all;
    
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

배경

주로 다음 세 가지 속성이 있습니다.

• Background-clip은 배경의 그리기 영역을 지정하며 값은 border-box | padding-box | no-clip

• background-입니다. 원점은 배경의 위치 지정 영역을 지정하며 값은 테두리 | 패딩 | 배경 크기는 배경 이미지의 크기를 지정하며 값은 [ | contain

• 추천 튜토리얼:

  css 빠른 시작

위 내용은 CSS3의 일반적인 새로운 기능 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!