CSS はスプライトテクノロジーを使用して角を丸くします。-CSSチュートリアル-php.cn

CSS はスプライトテクノロジーを使用して角を丸くします。

不言

リリース： 2018-06-28 11:17:39

オリジナル

2075 人が閲覧しました

この記事では主に、角を丸くする効果を実現するための CSS スプライトテクノロジの使用方法を紹介します。必要な友人はそれを参照できるようにします。

CSS スプライトテクノロジを使用して角を丸くする方法。簡単に言うと、絵の上に円を作り、それぞれのpを背景として4つ定義します。具体的な実装方法を見てみましょう。

まず、Sprite とは Web 画像アプリケーションの処理方法について簡単に説明します。これにより、ページに含まれる散在するすべての画像を 1 つの大きな画像に含めることができるため、ページにアクセスしたときに、以前のように読み込まれた画像が 1 つずつ表示されることはなくなります。現在一般的なネットワーク速度では、200KB を超えない 1 つの画像の読み込み時間は基本的に同じであるため、この問題を心配する必要はありません。

ステップ 1: スプライトを作成します

PS などのツールを使用して、図に示すように画像を合成します (1 ピクセルの赤い線で区別されます)

CSS はスプライトテクノロジーを使用して角を丸くします。

ステップ 2: HTML コードを作成します

まず、コンテナ p に .roundedBox クラスを与えます:

<p class="roundedBox"></p>

ログイン後にコピー

次に、さらに 4 つの p を追加する必要があります。これは、将来丸い角を作成するときに使用されます。次に、クラス .corner をそれぞれにロードする必要があり、グリッドの位置を指定するためにクラスを識別する必要があります。

<p class="roundedBox">
    <strong>My content in roundedBox Type 1</strong>
    <p class="corner topLeft"></p>
    <p class="corner topRight"></p>
    <p class="corner bottomLeft"></p>
    <p class="corner bottomRight"></p>
</p>

ログイン後にコピー

ステップ 3: CSS スタイルを作成する

絶対的に配置された要素は、通常、相対的に配置された親要素に従って配置されます。親要素を定義できない場合は、body タグまでの、最後に相対的に配置された親要素に移動します。

最初にすべての丸い角を定義しましょう

すべての丸い角は絶対位置で定義する必要があり、高さと幅をマークする必要があります。丸い角の幅と高さは両方とも 17px です。

CSS はスプライトテクノロジーを使用して角を丸くします。

.corner{position:absolute;width:17px;height:17px;}

ログイン後にコピー

次に、p コンテナスタイルを定義しましょう:

.roundedBox {position:relative;}

ログイン後にコピー

class .roundedBox で定義された要素では、絶対に配置された要素は、代わりにこの要素を基準にして配置されます。タグ本体の。また、いくつかのパディング値を設定する必要があります。設定されていない場合、丸い角がテキストを覆い、これは明らかに私たちが望む効果ではありません。重要: 上部と下部のパディング値はフィレットの高さと同じである必要があります。左右のパディング値はフィレットの幅と等価である必要があります。ご存知のとおり、フィレットの幅と高さは等しいので、四隅のパディング値も等しいです:

.roundedBox {position:relative; padding:17px; margin:10px 0;}

ログイン後にコピー

フィレットなしで個別に定義しましょう

円ごとに行います絶対位置決めを行います角の設定を行い、背景画像を配置します (スプライトに従って):

.roundedBox {position:relative; padding:17px; margin:10px 0;}
.corner {position:absolute; width:17px; height:17px;}
.topLeft {top:0; left:0; background-position:-1px -1px;} 
.topRight {top:0; right:0; background-position:-19px -1px;} 
.bottomLeft {bottom:0; left:0; background-position:-1px -19px;}
.bottomRight {bottom:0; right:0; background-position:-19px -19px;}

ログイン後にコピー

最後に、スプライトの丸い角に溶け込むように背景色を #type1 に合わせます:

#type1 {background-color:#CCDEDE;}
#type1 .corner {background-image:url(../image/corners.gif);}

ログイン後にコピー

全コード:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.roundedBox {position:relative; padding:17px; margin:10px 0;}
.corner {position:absolute; width:17px; height:17px;}
.topLeft {top:0; left:0; background-position:-1px -1px;}
.topRight {top:0; right:0; background-position:-19px -1px;}
.bottomLeft {bottom:0; left:0; background-position:-1px -19px;}
.bottomRight {bottom:0; right:0; background-position:-19px -19px;}
#type1 {background-color:#CCDEDE;}
#type1 .corner {background-image:url(../image/corners.gif);}
</style>
</head>
<body>
<p class="roundedBox" id="type1">
    <strong>My content in roundedBox Type 1</strong>
    <p class="corner topLeft"></p>
    <p class="corner topRight"></p>
    <p class="corner bottomLeft"></p>
    <p class="corner bottomRight"></p>
</p>
</body>
</html>

ログイン後にコピー

上記がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。