ホームページ > ウェブフロントエンド > CSSチュートリアル > cssでレリーフ効果を実現するサンプルコード

cssでレリーフ効果を実現するサンプルコード

高洛峰
リリース: 2017-02-16 13:04:47
オリジナル
2076 人が閲覧しました

この記事では、CSS を使用して救済効果を実現する方法を主に紹介しており、詳細なサンプルコードと説明が記載されているので、興味のある方はぜひご覧ください。

まえがき

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

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

cssでレリーフ効果を実現するサンプルコード

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

フレックスは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;
}
ログイン後にコピー

作成したエフェクト:

cssでレリーフ効果を実現するサンプルコード

非常に実用的なエフェクト

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

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中国語サイトをフォローしてください!

関連ラベル:
css
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート