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 欠点は依然として存在します。実線のみをシミュレートしますが、点線はシミュレートしません🎜🎜🎜🎜 角丸を使用する場合は、より適切な計算が必要です🎜🎜🎜🎜 複数のオーバーレイの特性を使用して、1pxの境界線を作成するのが最も簡単です🎜🎜🎜。
以上がH5モバイル端末超実践CSS3模擬境界線最新研究サンプルコードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
