CSSを使用してレリーフ効果を実現する

今回はCSSを使ってレリーフ効果を実現する方法を紹介します。CSSを使用してレリーフ効果を実現するための注意点は何ですか。以下は実際のケースです。

まえがき

最近、百度地図を見ていて、このエフェクトをWebページに使うとかなり良さそうなエフェクトを見つけたので勉強してみました。

効果の画像は次のとおりです:

エンボス効果には伸縮ボックス(フレックス)の知識が必要です

フレックスはChromeで完全にサポートされており、-webkit-プレフィックスを追加する必要があります。他のブラウザはサポートしていますが、サポートされていません。CSS マニュアルを自分で確認してください。今日は主にエンボス効果の作成方法について話したいと思います

まず、コードを添付します:

<p class="title">
        <p class="word">生活服务</p>
        <p class="relief">
            <p class="border"></p>
        </p>
    </p>

body,p{
     padding: 0;
     margin: 0;
 }
.title{
    font-size: 15px;
    font-family: "Microsoft Yahei", "Trebuchet MS", Arial, Helvetica, sans-serif;
    display: -webkit-flex;
    -webkit-align-items: center;
    margin-top: 50px;
    margin-left: 20px;
    margin-right: 20px;
}
.word{
    -webkit-flex: 0 0 auto;
    padding-right: 10px;
}
.relief{
    -webkit-flex: 1;
}
.border{
    height: 0;
    width: 100%;
    border-top: 1px solid #808080;
    border-bottom: 1px solid #fff;
}

そして、作成したエフェクトを添付します:

非常に実用的な効果

フレックススタイル分析:

display:-webkit-flex フレックスボックスのコンテナを提供します

-webkit-align-items:

flex-start: 開始位置の境界フレックス ボックス要素の横軸 (縦軸) の行の交差軸の開始境界に近い。

flex-end: フレックスボックス要素の交差軸(縦軸)の開始位置の境界が、行の交差軸の終了境界に近いです。

center: フレックスボックス要素は行の交差軸 (垂直軸) の中心に配置されます。 (行のサイズがフレックスボックス要素のサイズより小さい場合、両方向に同じ長さでオーバーフローします)。

-webkit-flex: 複合プロパティ。

フレックスボックス モデルオブジェクトの子要素がスペースを割り当てる方法を設定または取得します。

none:

none キーワードの計算値は次のとおりです: 0 0 auto

[ flex-grow ]: フレックス ボックス要素の拡張率を定義します。 (スペース割り当て権限の定義)

[ flex-shrink ]: フレックスボックス要素の縮小率を定義します。 (オーバーフローした場合、余分なスペースは比例して消化されます)

[ flex-basis ]: フレックス ボックス要素のデフォルトの基準値を定義します。 (要素の幅の値を定義します。指定されていない場合は要素自体の幅の値に依存します)

最後に境界線にborder属性を設定してレリーフ効果の演出が完了です

この記事の事例を読んでその方法をマスターした方は、よりエキサイティングな内容については、php 中国語 Web サイトの他の関連記事にご注意ください。

推奨読書:

マウスを上に動かすときにアイコンを回転させるCSS

CSS3を使用して輝く正方形の境界線を実現

CSS3を使用してシームレスなスクロール効果の無限ループを実現

以上がCSSを使用してレリーフ効果を実現するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。