ホームページ  >  記事  >  ウェブフロントエンド  >  css3のborderインスタンスについて詳しく解説

css3のborderインスタンスについて詳しく解説

零下一度
零下一度オリジナル
2017-06-16 13:46:031661ブラウズ

CSS を使用して HTML 画像の画像の境界線を削除する方法

こんにちは、Web ページの画像がたくさんあり、それらをすべて削除したい場合は、CSS でコードを 1 行記述するだけです。

<style>
img{border:0;}
</style>

特定の画像画像の境界線を個別に削除したい場合は、個別に定義することもできます。たとえば、

<div class="pic"><img src="图片地址" <a href="www.baidu.com/s?wd=alt&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1Y1uyN9ujNBn1NWm19Wnyc30ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EnHTvPWRdP104PWm3nHTYPW0Y" target="_blank" class="baidu-highlight">alt</a>=""></div>
<a href="www.baidu.com/s?wd=css&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1Y1uyN9ujNBn1NWm19Wnyc30ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EnHTvPWRdP104PWm3nHTYPW0Y" target="_blank" class="baidu-highlight">css</a>写:
.pic img{border:0;}

CSS で境界線に立体感を持たせる方法

1. シャドウを使用して実現できます:
box-shadow: 1px 1px 2px #226
ただし、ブラウザーによっては注意してください。効果を得るには css3 をサポートする必要があります

2。また、エッジの色を設定することによっても実現できます: border-bottom: Solid 1.5px #333;
説明: 下向きを示すには下部を、サイズを示すには 1.5 ピクセルを変更できます。 #333 は色です。ここでは黒に設定しました。必要に応じて設定できます。右、上、左、下を設定して方向を示します。

div レイヤーに画像の境界線を追加する方法

スライディング ドア テクノロジーを使用します。つまり、複数の div がネストされ、div の各レイヤーに異なる背景画像が与えられます。もちろん、現在の CSS3 では角丸を直接作成できます。

CSSスタイルで画像の境界線を削除する方法

css3のborderインスタンスについて詳しく解説

境界線のないimg CSSスタイル

img{padding:0; border:0;margin:0;display:block;}

インターセプトは、たとえば、画像の境界線が1pxです

.div{background:url(图片地址) 1px 1px ;width:图片width-2;height:图片height-2;}

以上がcss3のborderインスタンスについて詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。