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属性を設定して、レリーフ効果の演出が完了です

その他の関連記事は、救済効果を実現するcssサンプルコード PHP中国語サイトをフォローしてください！