CSS レリーフ効果_html/css_WEB-ITnose

エンボス効果

今日百度地図を見ていたらあるエフェクトを見つけました

このエフェクトをWebページで使うとかなり良い効果がありそうな気がしたので勉強しました

エンボス効果には、伸縮 Box 知識 (フレックス) を使用する必要があります。

flex は Chrome で完全にサポートされており、他のブラウザーではこれをサポートしているものとサポートしていないものがあります。今すぐ CSS マニュアルを確認してください。主にエンボスの作り方について話したいと思います。まず、コードを添付します:

次に、そのエフェクトを自分で添付します:

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

表示: -webkit-Flex は伸縮自在の収縮を提供します ボックスのコンテナー

-webkit-align-items: flex-start: 交差軸 (垂直軸) の開始位置の境界線フレックス ボックス要素の は、行の交差軸の開始境界に近いです。 flex-end: フレックスボックス要素の交差軸(縦軸)の開始位置の境界が、行の交差軸の終了境界に近いです。 center: フレックスボックス要素は、行の交差軸 (垂直軸) の中心に配置されます。 (行のサイズがフレックスボックス要素のサイズより小さい場合、両方向に同じ長さでオーバーフローします)。

-webkit-flex:

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

none: none キーワードの計算値は次のとおりです: 0 0 auto [flex-grow]: フレックス ボックス要素の拡張率を定義します。 (スペース割り当て権限の定義) [ flex-shrink ]: フレックスボックス要素の縮小率を定義します。 (オーバーフローした場合、余分なスペースは比例して消化されます) [flex-basis]: フレックス ボックス要素のデフォルトの基準値を定義します。 (要素の幅の値を定義します。指定しない場合は要素自体の幅の値に依存します)

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

🎜 🎜🎜 🎜 🎜