面白いbox-decoration-break

5777 ワード
css
この2日間は興味深いCSS属性であるbox-decoration-breakに触れた.次は一緒に真相を探ってみましょう.
MDNにはこの属性について、中国語のドキュメントがないので、合理的で適切な中国語翻訳を考えています.直訳すると
  • box--ボックス、要素ボックスモデル
    • と理解できる
  • decoration--装飾、要素スタイル
    • と理解
  • break--断行,word-break参照,断行時の表現
    • と理解する.
    では、このプロパティは、エレメントがブレークダウンしたときのスタイルの表現形式として理解できます.
    MDN上の英語の解釈は、The box-decoration-break CSS property specifies how an element's fragments should be rendered when broken across multiple lines,columns,or pagesである.box-decoration-breakプロパティは、エレメントクリップが折り曲げ/ブレーク時にどのようにレンダリングされるべきかを規定しています.
    オプションの値は2つのみです.
    {
    box-decoration-break: slice;   //     
    box-decoration-break: clone;
}

    行の例


    このプロパティは、通常、インライン要素に作用します.次の構造が存在し、枠線を追加するとします.
    ABCDEFGHIJKLMN
    span {
    border: 2px solid #999;
}

    ええ、効果は以下の通りです.普通です.
    はい、次はbreakです.上の行の文字を断行します.スタイルは変わりません.
    ABCD 
    EFG 
     HI
     JKLMN

    以下の結果が得られた.
    O,文字の改行とともに枠線が変化し,頭と尾の2行に3辺の枠線があり,中間の2行には上下の2辺の枠線しかないことがわかる.4行を合わせると、図1にまとめることができます.これは正常な展示効果です.
    次に、本稿の主役box-decoration-break: cloneを加えます.
    span {
    border: 2px solid #999;
+   box-decoration-break: clone;
}

    有効になると、次のような結果が得られます.

    box-decoration-break:clone使用小結


    ここでは、この属性の役割を大体理解することができます.box-decoration-break: cloneのインライン要素が使用され、折り返し表示がある場合、各ローは元のローのすべての完全なスタイルを有します.
    さらに例を見て理解を深めると、box-decoration-break: clone前後の2つの効果を用いた構造が存在する.

    CodePen Demo -- box-decoration-break

    box-decoration-break:clone有効スタイル影響範囲


    もちろん、box-decoration-break: cloneを使用した要素は、各スタイルに適用されるわけではありません.次のスタイルにのみ適用されます.
  • background
  • border
  • border-image
  • box-shadow
  • clip-path
  • margin
  • padding
  • Syntax

    • box-decoration-break:clone実用化


    次に、何か頼りになる実際の応用シーンがあるかどうか見てみましょう.

    box-decoration-break:cloneテキスト選択効果を実現


    このようなシーンがあり、1つの複数行のテキストの特定のテキストを重点的に表示したいと考えています.このとき、によってをネストし、に包まれた文字を特定の展示することができます.
    例えば、私たちはこのような文案を持っています.
    
The box-decoration-break CSS property specifies how an element's fragments should be rendered when broken across multiple lines, columns, or pages..Each box fragment is rendered independently with the specified border, padding, and margin wrapping each fragment. The border-radius, border-image, and box-shadow are applied to each fragment independently.

    ここで、強調すべき内容をのラベルで包み、特定のスタイルを付与し、box-decoration-break: cloneを加えることで、強調文案が改行されているかどうかにかかわらず、各箇所の強調背景が一致します.
    p {
    font-size: 22px;
    line-height: 36px;
}

span {
    background-image: linear-gradient(135deg, deeppink, yellowgreen);
    color: #fff;
    padding: 2px 10px;
    border-radius: 50% 3em 50% 3em;
    box-decoration-break: clone;
}

    以下の効果が得られます.box-decoration-break: cloneを追加しないと?では、改行がある場合、効果は大きく割引されます.
    CodePen Demo--text-decoration-breakテキスト選択効果

    box-decoration-break各行のテキストに特定の枠線を付ける


    また、各行の文案に特定の枠線スタイルがあることを望んでいます.
    どうやって実現しますか?各行はであり、各行は上記のスタイルを設定することができるかもしれない.しかし、テキストの内容が不確定であれば、容器の幅も不確定ですか?
    このシーンは、box-decoration-breakを使うのも便利です.もちろん、ここには小さなテクニックがあります.通常、box-decoration-break: cloneはinline要素にのみ有効です.もし私たちの文案がこのようにラベルに包まれていたら、
    
The box-decoration-break CSS property specifies how an element's fragments should be rendered when broken across multiple lines, columns, or pages..Each box fragment is rendered independently with the specified border, padding, and margin wrapping each fragment. The border-radius, border-image, and box-shadow are applied to each fragment independently.
    box-decoration-break: clone対を有効にするには、のdisplay: inlineを設定することによって実現することができる.このように、上記の効果を達成するには、次のようにする必要があります.
    p {
    display: inline;
    box-decoration-break: clone;
    background:linear-gradient(110deg, deeppink 0%, deeppink 98%, transparent 98%, transparent 100%);
}

    テキストの内容やコンテナの幅がどのように変化しても、完璧にフィットします.
    CodePen Demo--box-decoration-break各行のテキストには特定の枠線があります.

    box-decoration-breakブレンドアニメーション


    上記の内容と併せて、box-decoration-breakを遷移効果またはアニメーション効果と組み合わせることも考えられる.
    例えば、hoverの文字の内容を強調して表示する必要がある文字の段落があることを望んでいます.そうかもしれません.
    CodePen Demo--box-decoration-break遷移アニメーション
    あるいは、
    CodePen Demo--box-decoration-breakブレンドアニメーション
    デモを入れてbox-decoration-break: cloneを外すと、効果が大きく割引されます.

    互換性


    ええ、慣例によって互換性はあまりよくないはずです.MDNは、次のようなヒントを与えています.
    This is an experimental technology. Check the Browser compatibility table carefully before using this in production.
    CanI Useを見てみると、IEシリーズ以外は全滅しているので、モバイル端末への応用も考えられます.このプロパティが互換性がなくても、ダウングレード表示はページに影響しません.
    また、本明細書では、与えられたコードはすべてbox-decoration-break: cloneであり、CodePenはautoprefixerを持参しているが、実際には以下のように書く必要がある可能性がある.
    {
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

    最後に


    国内では大砂漠先生と張鑫旭がこの属性を書いたのを見て、みんなは比較して見て、理解を深めることができます.
  • CSS/CSS 3 box-decoration-breakプロパティ概要
  • 初探box-decoration-break
    • もっとすばらしいCSS技術の文章は私のGithub--iCSSにまとめて、引き続き更新して、starをクリックしてコレクションを購読することを歓迎します.
    では、本文はこれで終わります.あなたに役に立つことを望んでいます.
    もし何か疑問やアドバイスがあれば、もっと交流することができます.オリジナルの文章は、文章が限られていて、浅いので、文の中に不正なところがあれば、お知らせください.
    167.markdown htmlの別の試み
    CSSにおける背景画像位置属性background-position