ホームページ > 記事 > ウェブフロントエンド > 純粋な CSS 実装 pict_html/css_WEB-ITnose
純粋な CSS 実装 pict_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:42:551079ブラウズ
Web 開発では、いくつかの単純な画像は CSS コードを通じて実現することもできます。もちろん、忍耐力があれば、より複雑な画像も実現できます。
では、なぜ一部の画像は使用されていないのに CSS で実装する必要があるのでしょうか?まず、パフォーマンス上の理由から、画像は数行の CSS コードよりもはるかに多くの負荷をサーバーとクライアントに与えます。第 2 に、その必要はないため、いくつかの単純な効果は CSS を使用して直接完成させることができます。写真を紹介するのが面倒ですか？
たとえば、有名なブートストラップの選択リストの下三角は CSS を通じて実装されています。効果は次のとおりです:
実装コードは次のとおりです:
<ul> <li class="dropdown">dropdown</li></ul>.dropdown:after { position:absolute; width:0; height:0; margin-top:8px; margin-left:5px; display:inline-block; border-left:6px solid transparent; border-right:6px solid transparent; border-top:6px solid #000000; content:'';} 三角形実装の原理は、実際には border-left、border-right、および border を使用していることがわかります。 -上。左右の境界線を透明にして、三角形の境界領域を表示します。
コードの場所: http://runjs.cn/code/o3miehqr
多くの Web サイトでは、画像が読み込まれていない場合に、それを置き換える代替画像が用意されています。 :
実際、この画像は CSS コードによって実現されています。コードは次のとおりです:
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #rectangle { position: relative; background:#FFFFFF; border:10px solid #999999; width:200px; height:120px; } #circle { position: absolute; background-color: #999999; width:40px; height: 40px; border-radius: 50%; margin-left:140px; margin-top:20px; } #triangle1 { position:absolute; width:0; height:0; border-left:40px solid transparent; border-right:70px solid transparent; border-bottom:80px solid #999; margin-top:30px; margin-left:10px; } #triangle2 { position:absolute; width:0; height:0; border-left: 30px solid transparent; border-right: 60px solid transparent; border-bottom:60px solid #999; margin-top:50px; margin-left: 80px; } </style> </head> <body> <div id="rectangle"> <span id="circle"></span> <span id="triangle1"></span> <span id="triangle2"></span> </div> </body></html> コードの場所: http://runjs.cn/code/zj0bbjpw 原則は、三角形と円を構築することです。 border と border-radius を使用します。したがって、CSS 画像はアプリケーションで広く使用されています。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。