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

php中世界最好的语言
リリース: 2018-03-22 09:41:18
オリジナル
4096 人が閲覧しました

今回は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 サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!