「CSS3入門」column-rule-color プロパティのサンプル

2021年2月3日

説明
column-rule-color は CSS のプロパティで、段組みレイアウトで段間に引かれる線の色を設定します。
構文
/* <color> 値 */
column-rule-color: red;
column-rule-color: rgb(192, 56, 78);
column-rule-color: transparent;
column-rule-color: hsla(0, 100%, 50%, 0.6);

/* グローバル値 */
column-rule-color: inherit;
column-rule-color: initial;
column-rule-color: unset;
使用例

<!DOCTYPE html>

<html>

<head>

<title>this is a test sample</title>

<style>

.newspaper

{

column-count:3;

column-gap:40px;

column-rule-style:outset;

column-rule-color:#ff0000;

/* Firefox */

-moz-column-count:3;

-moz-column-gap:40px;

-moz-column-rule-style:outset;

-moz-column-rule-color:#ff0000;

/* Safari and Chrome */

-webkit-column-count:3;

-webkit-column-gap:40px;

-webkit-column-rule-style:outset;

-webkit-column-rule-color:#ff0000;

}

</style>

</head>

<body>

<p><b>notice:</b> column-count property support</p>

111

222

333

444

555

666

</div>

</body>

</html>

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>this is a test sample</title> <style> .newspaper { column-count:3; column-gap:40px; column-rule-style:outset; column-rule-color:#ff0000; /* Firefox */ -moz-column-count:3; -moz-column-gap:40px; -moz-column-rule-style:outset; -moz-column-rule-color:#ff0000; /* Safari and Chrome */ -webkit-column-count:3; -webkit-column-gap:40px; -webkit-column-rule-style:outset; -webkit-column-rule-color:#ff0000; } </style> </head> <body> <p><b>notice:</b> column-count property support</p> <div class="newspaper"> 111 222 333 444 555 666 </div> </body> </html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>this is a test sample</title> 
<style> 
.newspaper
{
      column-count:3;
      column-gap:40px;
      column-rule-style:outset;
      column-rule-color:#ff0000;

      /* Firefox */
      -moz-column-count:3;
      -moz-column-gap:40px;
      -moz-column-rule-style:outset;
      -moz-column-rule-color:#ff0000;

      /* Safari and Chrome */
      -webkit-column-count:3;
      -webkit-column-gap:40px;
      -webkit-column-rule-style:outset;
      -webkit-column-rule-color:#ff0000;
}
</style>
</head>
<body>

<p><b>notice:</b>  column-count property support</p>

<div class="newspaper">
111
222
333
444
555
666
</div>

</body>
</html>

CSS

Posted by arkgame

関連投稿: