純粋な CSS 実装 pict_html/css_WEB-ITnose-htmlチュートリアル-php.cn

純粋な CSS 実装 pict_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:42:55

オリジナル

1125 人が閲覧しました

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 画像はアプリケーションで広く使用されています。