H5 チュートリアル

H5モバイル端末超実践CSS3模擬境界線最新研究サンプルコード

黄舟

Mar 10, 2017 pm 04:54 PM

H5モバイル端末向けの超実践的なcss3模擬ボーダーの最新研究サンプルコード

前書き

以前ブログ記事「モバイルH5の基礎知識まとめ第5章ボーダー処理」で書きました。 , box-shadow:0 0 0 1px #ddd; を使用して境界線をシミュレートできると述べました。もちろん、ブログ投稿の内容は間違っていませんが、一定の制限があります。そのため、今日は、以前のブログ投稿

の欠陥を修正し、改善するためにここにいます。

なぜ境界線を直接書くのではなく、境界線をシミュレートするのですか? 境界線はボックスモデルを計算する必要があるため、モバイル端末では境界線を計算するのに非常に手間がかかります。したがって、境界線をシミュレートする方法を使用すると、境界線の幅を考慮する必要がなく、より便利です
。もちろん、
のような属性を使用して、ボックスモデルに含まれる境界線を除外することもできます。そして、このメソッドは多くの最新の CSS フレームワークで使用されています
ただし、ボックスモデルにはパッドが含まれていないため、個人的にはこのアプローチはお勧めしません。とにかく、私はこのアプローチが好きではないので、境界線をシミュレーションしました。 box-sizing:border-box

前の記事のレビュー
上のリンクを開きたくない場合は、前回のブログ投稿の内容をご覧ください。 2つの重要な点を載せておきます。理解できない場合は、次の内容を読んでください。

方法 1 outline 境界線をシミュレートします。

アウトラインを使用します: 1px Solid #ddd; このストローク方法は境界線をシミュレートします

利点: outline 模拟边框

使用 outline: 1px solid #ddd; 这样的描边线的方式模拟边框

优点:
1. 可以和 border 一样使用各种线形
2. 可以调整边框到盒子的距离 outline-offset 参数

缺点:
1. 不能做成贴合圆角元素(这被W3C认为是一个BUG,可能在不远的将来修复)
2. 只能一下子加到四边,不能只加一边.

方法二 box-shadow 模拟边框

使用 box-shadow:0 0 0 1px #ddd; 外发光模拟边框

优点:
1. 可以贴合圆角元素,生成完美的边框
2. 可以重复参数,生成多条边框

缺点:
1. 只有实线线性,不能做虚线

更多请看我前面的博文,或者百度相关信息.

`box-shadow` 可以模拟任意边的边框

我原来以为是做不到的.可见我的CSS功底还是不够强,还要努力学习呀.

上次我闲来无事,用一个p写了一套字母数字表查看DEMO.虽然用到了相关的知识点,但是还是没有往模拟边框的这条思路上靠.

今天仔细一想,原来 box-shadow 是可以模拟四条边中的任意一条边的.因此,才写下这篇博文.

语言太多,都不如直接看代码:

html代码

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Document</title></head><body>
    <p class="box sibian"></p>
    <p class="box shangbian"></p>
    <p class="box xibian"></p>
    <p class="box zuobian"></p>
    <p class="box youbian"></p>
    <p class="box zuoshangbian"></p>
    <p class="box youshangbian"></p>
    <p class="box zuoxiabian"></p>
    <p class="box youxiabian"></p>
    <p class="box wushangbian"></p>
    <p class="box wuyoubian"></p>
    <p class="box wuxiabian"></p>
    <p class="box wuzuobian"></p></body></html>

CSS代码

.box {width: 100px;
height: 100px;background: #f00; 
margin: 50px;float: left;}
.sibian {box-shadow: 0 0 0 5px #000;}
.shangbian {box-shadow: 0 -5px #000;}
.xibian {box-shadow: 0 5px #000;}
.zuobian {box-shadow: -5px 0 #000;}
.youbian {box-shadow: 5px 0 #000;}
.zuoshangbian {box-shadow: -5px -5px #000,-5px 0 #000,0 -5px #000;}
.youshangbian {box-shadow: 5px -5px #000,5px 0 #000,0 -5px #000;}
.zuoxiabian {box-shadow: -5px 5px #000,-5px 0 #000,0 5px #000;}
.youxiabian {box-shadow: 5px 5px #000,5px 0 #000,0 5px #000;}
.wushangbian {box-shadow: 5px 5px #000,5px 0 #000,0 5px #000,-5px 5px #000,-5px 0 #000;}
.wuyoubian {box-shadow: -5px -5px #000,-5px 0 #000,0 -5px #000,-5px 5px #000,0 5px #000;}
.wuxiabian {box-shadow: -5px -5px #000,-5px 0 #000,0 -5px #000,5px -5px #000,5px 0 #000;}
.wuzuobian {box-shadow: 5px -5px #000,5px 0 #000,0 -5px #000,5px 5px #000,0 5px #000;}

查看box-shadow模拟边框DEMO

总结

利用了 box-shadow 的属性可以无限重复特性,可以通过不断的填充,来满足我们的需求.
并且, box-shadow 可以只设置两个值,这样就没有扩展,没有虚化,一比一的移动.
box-shadow1. のようなさまざまな線の形状を使用できます。 >border
2 . 境界線からボックスまでの距離は outline-offset パラメータで調整できます
欠点:
1.角の丸い要素をフィットさせる (これは W3C によるバグとみなされます。近い将来修正される可能性があります)
2. 1 つの側面だけではなく、一度に 4 つの側面にのみ追加できます。
方法 2 box。 -shadow は、境界線をシミュレートします

外側の光るシミュレートされた境界線を使用します🎜🎜利点: 🎜1. 丸い角の要素をフィットさせて完璧な境界線を生成できます🎜2.複数の境界線を生成するには🎜🎜欠点: 🎜1. 実線のみが直線であり、点線ではありません🎜🎜詳細については、以前のブログ投稿または Baidu 関連情報を参照してください。🎜🎜 box-shadow は任意の辺の境界線をシミュレートできます🎜🎜 当初はそれができないと思っていましたが、私の CSS スキルがまだ十分ではないことがわかり、まだまだ勉強する必要があります。前回は何もすることがなく、DEMO を表示するために一連の英数字テーブルを作成しましたが、私はまだ境界線をシミュレートするというアイデアに頼っていません。今日注意深く調べてみたところ、box-shadow は 4 つの側面のいずれかをシミュレートできることがわかりました。そのため、このブログ記事を書きました。🎜🎜言語が多すぎるため、コードを直接:🎜

html コード

rrreee

CSS コード

rrreee🎜🎜 ボックスシャドウのシミュレートされた境界線のデモを表示 🎜🎜概要🎜

box-shadow

box-shadow は 2 つの値しか設定できないため、拡張もぼかしも 1 対 1 の移動もありません 🎜🎜🎜🎜<code>box-shadow

以上がH5モバイル端末超実践CSS3模擬境界線最新研究サンプルコードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

基本を超えて：H5コードの高度な手法May 02, 2025 am 12:03 AM

H5の高度なヒントには以下が含まれます。1。複雑なグラフィックスを使用して描画します。2。ウェブワーカーを使用してパフォーマンスを向上させます。これらのヒントは、開発者がよりダイナミックでインタラクティブで効率的なWebアプリケーションを構築するのに役立ちます。

H5：Webコンテンツとデザインの未来May 01, 2025 am 12:12 AM

H5（HTML5）は、新しい要素とAPIを介してWebコンテンツと設計を改善します。 1）H5はセマンティックタグ付けとマルチメディアサポートを強化します。 2）キャンバスとSVGを導入し、Webデザインを濃縮します。 3）H5は、新しいタグとAPIを介してHTML機能を拡張することにより機能します。 4）基本的な使用には、それを使用したグラフィックの作成が含まれ、高度な使用法にはwebstorageapiが含まれます。 5）開発者は、ブラウザの互換性とパフォーマンスの最適化に注意を払う必要があります。

H5：Web開発の新機能と機能Apr 29, 2025 am 12:07 AM

H5は多くの新しい機能と機能をもたらし、Webページのインタラクティブ性と開発効率を大幅に改善します。 1。SEOの強化などのセマンティックタグ。 2.マルチメディアサポートは、オーディオとビデオの再生とタグを簡素化します。 3. Canvas Drawingは、動的なグラフィックスの描画ツールを提供します。 4.ローカルストレージは、LocalStorageとSessionStorageを介してデータストレージを簡素化します。 5. Geolocation APIは、ロケーションベースのサービスの開発を促進します。

H5：HTML5の重要な改善Apr 28, 2025 am 12:26 AM

HTML5は5つの重要な改善をもたらします。1。セマンティックタグにより、コードの明確性とSEO効果が向上します。 2.マルチメディアサポートは、ビデオとオーディオの埋め込みを簡素化します。 3。フォームエンハンスメントは、検証を簡素化します。 4.オフラインおよびローカルストレージにより、ユーザーエクスペリエンスが向上します。 5。キャンバスとグラフィック機能は、Webページの視覚化を強化します。

HTML5：標準とWeb開発への影響Apr 27, 2025 am 12:12 AM

HTML5のコア機能には、セマンティックタグ、マルチメディアサポート、オフラインストレージ、ローカルストレージ、フォームエンハンスメントが含まれます。 1。コードの読みやすさとSEO効果を改善するためのセマンティックタグなど。 2.ラベルでマルチメディアの埋め込みを簡素化します。 3。アプリケーションキャッシュやLocalStorageなどのオフラインストレージとローカルストレージは、ネットワークのない操作とデータストレージをサポートします。 4.フォームエンハンスメントでは、処理と検証を簡素化するための新しい入力タイプと検証プロパティを導入します。

H5コードの例：実用的なアプリケーションとチュートリアルApr 25, 2025 am 12:10 AM

H5は、さまざまな新機能と機能を提供し、フロントエンド開発の機能を大幅に向上させます。 1.マルチメディアサポート：メディアを埋め込んで要素を埋め込み、プラグインは必要ありません。 2。キャンバス：要素を使用して、2Dグラフィックとアニメーションを動的にレンダリングします。 3。ローカルストレージ：ユーザーエクスペリエンスを改善するために、ローカルストレージとセッションストレージを介して永続的なデータストレージを実装します。

H5とHTML5の接続：類似性と相違点Apr 24, 2025 am 12:01 AM

H5とHTML5は異なる概念です。HTML5は、新しい要素とAPIを含むHTMLのバージョンです。 H5は、HTML5に基づくモバイルアプリケーション開発フレームワークです。 HTML5はブラウザを介してコードを解析およびレンダリングしますが、H5アプリケーションはコンテナを実行し、JavaScriptを介してネイティブコードと対話する必要があります。