ホームページ > 記事 > ウェブフロントエンド > CSSのborder-colorプロパティを使用するにはどうすればよいですか?
CSSのborder-colorプロパティを使用するにはどうすればよいですか?
- 青灯夜游オリジナル
- 2019-02-21 13:24:375576ブラウズ
border-color 属性は、要素の 4 つの境界線すべての色を設定したり、4 つの辺に異なる色を設定したりするために使用できる短縮属性です。
#CSS 境界線の色プロパティ
関数: 境界線の色プロパティ要素の境界線の色を設定するために使用されます。 1 ～ 4 の値を設定できます。
border-color:red green blue pink;# 上の境界線は赤です。
#●右の境界線は緑です。下の境界線は青です。色
#●左の境界線はピンクですborder-color:red green blue ;#●上の境界線は赤です
#●左右の境界線は緑です
●下の境界線は青です
border-color:red green;
# 上下の境界線は赤です
#● 左右の境界線は緑ですborder-color:red;#● 4 つの境界線はすべて赤です
注意:
要素は色を変更する前に境界線を取得する必要があるため、border-style 属性は border-color 属性の前に宣言する必要があります。また、border-style 属性の値を none または hidden にすることはできません。それ以外の場合、ボーダーは表示されず、border-color 属性は有効になりません。#CSS 境界線の色プロパティの使用例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style type="text/css">
p.one
{
border-style: solid;
border-color: #0000ff
}
p.two
{
border-style: solid;
border-color: #ff0000 #0000ff
}
p.three
{
border-style: solid;
border-color: #ff0000 #00ff00 #0000ff
}
p.four
{
border-style: solid;
border-color: #ff0000 #00ff00 #0000ff rgb(250,0,255)
}
</style>
</head>
<body>
<p class="one">一个蓝色边框！</p>
<p class="two">一个彩色边框！</p>
<p class="three">一个彩色边框！</p>
<p class="four">一个彩色边框！</p>
<p><b>注：</b>"border-width" 属性如果单独使用的话是不会起作用的。请首先使用 "border-style" 属性来设置边框。</p>
</body>
</html>レンダリング:
以上がこの記事の全内容です、皆様の学習のお役に立てれば幸いです。
以上がCSSのborder-colorプロパティを使用するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。