ホームページ > ウェブフロントエンド > CSSチュートリアル > アウトラインオフセット属性の使い方

アウトラインオフセット属性の使い方

青灯夜游
リリース: 2019-01-31 10:09:22
オリジナル
2957 人が閲覧しました

CSS3 の outline-offset プロパティは、アウトラインをオフセットして境界線の端に描画するために使用されます。アウトラインと境界線の端の間の距離は、長さの値によって設定できます。

アウトラインオフセット属性の使い方

#CSS3 アウトライン オフセット プロパティ

関数:アウトラインをオフセットする移動枠線の端を越えて輪郭を描きます。

注: アウトラインと境界線には 2 つの違いがあります。アウトラインはスペースをとらないことと、アウトラインは長方形でなくてもよいことです。

構文:

outline-offset: length|inherit;
ログイン後にコピー

length: 輪郭と境界線の端の間の距離。

inherit: アウトラインオフセット属性の値を親要素から継承することを指定します。

#CSS3 アウトライン オフセット属性の使用例

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
margin:20px;
width:150px; 
padding:10px;
height:70px;
border:2px solid black;
outline:2px solid red;
outline-offset:15px;
} 
</style>
</head>
<body>

<p><b>注释:</b>Internet Explorer 和 Opera 不支持 support outline-offset 属性。</p>

<div>这个 div 在边框边缘之外 15 像素处有一个轮廓。</div>

</body>
</html>
ログイン後にコピー
レンダリング:

# #以上がこの記事の全内容ですが、皆さんの学習に役立つことを願っています。さらにエキサイティングなコンテンツについては、PHP 中国語 Web サイトの関連チュートリアルのコラムに注目してください。 ! ! アウトラインオフセット属性の使い方

以上がアウトラインオフセット属性の使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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