cman.jp > WEBページ作成TOP > CSSリファレンス > 「罫線の底辺の色設定」
WEBページ作成
広告
border-bottom-color 「罫線の底辺の色設定」
border-bottom-color プロパティは罫線の底辺の色の設定を行うことができます。
| CSS Ver. | 適用要素 | 継承 |
|---|---|---|
| 2.1 | 全て | しない |
広告
border-bottom-color の値
【構文】
border-bottom-color : [color] ;
| color [背景色の指定] ( サンプル ) | |
|---|---|
| border-bottom-color: #rrggbb; | 16進数RGB指定 [例] #00ffff、#660033 (色作成) |
| border-bottom-color: カラー名; | カラー名指定 [例] red、bule (一覧) |
| border-bottom-color: rgb(r, g, b); | 10進数RGB指定 [例] rgb(0,255,255) (色作成) |
| border-bottom-color: rgba(r, g, b, a); | 透明度付きRGB指定 [例] rgba(0,255,255,0.5) (色作成) ※ CSS3の機能 |
| border-bottom-color: hsl(h, l%, s%); | HSL指定 [例] hsl(10,50%,90%) (色作成) |
| border-bottom-color: hsla(h, l%, s%, a); | 透明度付きHSL指定 [例] hsla(0,30%,25%,0.5) (色作成) ※ CSS3の機能 |
| border-bottom-color: transparent; | 透明（無色） |
border-bottom-color のサンプル
1.罫線のスタイルの指定
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>罫線の色の指定サンプル</title>
<style type="text/css">
<!--
div
{
height: 50px;
margin: 5px;
float : left;
}
div.s1
{
border-bottom-color: #ff0000; /* 赤指定１ */
border-bottom-style: solid;
}
div.s2
{
border-bottom-color: red; /* 赤指定２ */
border-bottom-style: solid;
}
div.s3
{
border-bottom-color: rgb(255,0,0); /* 赤指定３ */
border-bottom-style: solid;
}
div.s4
{
border-bottom-color: hsl(0,100%,50%); /* 赤指定４ */
border-bottom-style: solid;
}
div.s5
{
border-bottom-color: rgba(255,0,0,0.5); /* 赤半透明指定１ */
border-bottom-style: solid;
}
div.s6
{
border-bottom-color: hsla(0,100%,50%,0.5); /* 赤半透明指定２ */
border-bottom-style: solid;
}
-->
</style>
</head>
<body>
<p style="font-size:12pt; " >罫線の色の指定サンプル</p>
<div class="s1">赤指定１</div>
<div class="s2">赤指定２</div>
<div class="s3">赤指定３</div>
<div class="s4">赤指定４</div>
<div class="s5">赤半透明１</div>
<div class="s6">赤半透明２</div>
</body>
</html>
ページTOP
広告