ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSで点線の境界線を設定するにはどうすればよいですか? CSSで点線枠を設定する例

CSSで点線の境界線を設定するにはどうすればよいですか? CSSで点線枠を設定する例

不言
不言オリジナル
2018-10-27 10:31:5923702ブラウズ

Web ページのレイアウトでは、Web ページ全体の美しさを考慮して点線の境界線を設定する必要がある場合があります。では、点線の境界線を設定するにはどうすればよいでしょうか。この記事ではcssを使って点線枠を設定する方法を紹介します。

まず第一に、CSS の境界線は境界線属性であることを知っておく必要があります。これにより、境界線の幅、境界線の色、境界線のスタイル (実線または点線) の設定など、オブジェクトの境界線の効果を実現できます。 )など。

CSSの枠線属性「点線」を使って枠線の点線を設定する方法を詳しく見てみましょう。「点線」は四角い点を点線に設定します。 (関連する推奨事項:

css 学習マニュアル

) 次に、2 つの点線枠の実装コードを見てみましょう。

1. 破線を使用して点線の境界線を設定します。

コードは次のとおりです。

<!DOCTYPE html>
<html>
<head>
    <title></title>
<style type="text/css">
    div{
        width: 100px;
        height: 100px;
        border: dashed;
    }
</style>
</head>
<body>
<div>虚线边框</div>
</body>
</html>

点線の境界線の効果は次のとおりです。

CSSで点線の境界線を設定するにはどうすればよいですか? CSSで点線枠を設定する例点線の境界線に色を追加して点線の境界線を細くしたい場合は、次のようにすることができます:

div{
        width: 100px;
        height: 100px;
    border: 2px dashed lightblue;
    }

点線の境界線の効果は次のようになります。

CSSで点線の境界線を設定するにはどうすればよいですか? CSSで点線枠を設定する例

2. dotted を使用して点線の境界線を設定します。

#コードは次のとおりです。 #

<!DOCTYPE html>
<html>
<head>
    <title></title>
<style type="text/css">
    div{
        width: 100px;
        height: 100px;
    border: dotted;
    }    
</style>
</head>
<body>
<div>虚线边框</div>
</body>
</html>
点線の境界線の効果は次のとおりです。


同様に、上記の点線の境界線のスタイルを変更したい場合は、コードを変更できます。次のように:

div{
        width: 100px;
        height: 100px;
    border: 2px dotted lightblue;
    }

点線の境界線の効果は次のとおりです: CSSで点線の境界線を設定するにはどうすればよいですか? CSSで点線枠を設定する例

この記事はここで終了します。さらに興味深い内容については、次の点に注目してください。関連するコラムのチュートリアルは、php 中国語 Web サイトにあります。 ! !

以上がCSSで点線の境界線を設定するにはどうすればよいですか? CSSで点線枠を設定する例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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