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%;

border-radius もう 1 つの一般的に使用される方法は、CSS アニメーションです。

word-wrap と text-overflow

word-wrap 属性は、文字列が重なりすぎないようにブラウザが単語内の文を分割することを示すために使用されます。自然ブレーク期間が発生すると、オーバーフローが発生します。

word-wrap: break-word;

text-overflow はテキスト オーバーフローに使用されます:

単一行の省略形の実装は次のとおりです:

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

複数行の省略形の実装は次のとおりです(主に Webkit カーネル用):

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

background

主に次の 3 つの属性があります:

• background-clip は次のことを指定します。背景の描画領域、値は border -box | padding-box | content-box | no-clip

• background-origin は、背景の配置領域を指定します。背景、値は border |padding | content

• background-size は背景画像のサイズを指定します、値は [ | | auto]{1,2} | cover | です。含む

推奨チュートリアル:

css クイック スタート

以上がcss3の共通新機能の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。