ホームページ > ウェブフロントエンド > CSSチュートリアル > CSSで画像のアウトラインを設定する方法

CSSで画像のアウトラインを設定する方法

王林
リリース: 2020-11-30 17:04:56
オリジナル
3041 人が閲覧しました

CSS で画像の輪郭を設定する方法: [outline:green dotted Thick;] のように、outline 属性を使用して設定できます。アウトラインは、要素を強調表示するために、境界線の外側にある要素の周囲に引かれる線です。

CSSで画像のアウトラインを設定する方法

このチュートリアルの動作環境: Windows 7 システム、css3 バージョン、この記事はすべてのブランドのコンピューターに適用されます。

関連属性:

アウトライン (アウトライン) は、要素の周囲に描かれた線で、境界線の外側に位置し、要素を強調表示できます。

(学習ビデオ共有: css ビデオ チュートリアル )

アウトライン短縮属性は、1 つのステートメントですべてのアウトライン属性を設定します。

設定できる属性は順に、outline-color、outline-style、outline-widthです。

いずれかの値を設定しなくても問題ありません、outline:solid #ff0000; なども使用できます。

属性値:

  • outline-color 枠線の色を指定します。可能な値については、outline-color を参照してください。

  • outline-style 境界線のスタイルを指定します。可能な値については、outline-style を参照してください。

  • outline-width 境界線の幅を指定します。可能な値については、outline-width を参照してください。

  • inherit アウトライン属性の設定を親要素から継承することを指定します。

コード実装:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
img{
	border:1px solid red;
	outline:green dotted thick;
}
</style>
</head>

<body>
<img  src="../demo/1.jpg"    style="max-width:90%"/ alt="CSSで画像のアウトラインを設定する方法" >
</body>
</html>
ログイン後にコピー

効果:

CSSで画像のアウトラインを設定する方法

関連する推奨事項: CSS チュートリアル

以上がCSSで画像のアウトラインを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート