CSSで画像のアウトラインを設定する方法-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

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

Nov 19, 2020 am 11:42 AM

css 写真

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="/static/imghw/default1.png"  data-src="../demo/1.jpg"  class="lazy"      style="max-width:90%"/ alt="CSSで画像のアウトラインを設定する方法" >
</body>
</html>