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

黄舟

リリース： 2017-03-10 16:54:22

オリジナル

1976 人が閲覧しました

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