CSS3 Columns 分欄－網頁前端新手上路辛酸史

<!DOCTYPE html>
<html>
<head>
   <title>CSS3 Columns 分欄</title>
   <meta charset="utf-8">
   <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">

#shadows #container{
   width: 600px;
   background:yellow;
   margin: 40px auto;
   padding: 20px;
   box-sizing: border-box;

box-shadow: 15px 20px 20px -10px black;
/*box-shadow物件影子: 橫向(可以為負值) 直向(可以為負值) 擴散尺寸(縮小或擴大) 顏色內陰影; */
}

#shadows h1{
   color: white;
   text-shadow: 0px 2px 5px blue,0 2px 10px red, 0 3px 15px black;
   /*text-shadow文字影子:(可以設定多層影子，用逗號分隔)*/
}

#columns{
-webkit-column-count:3;
-moz-column-count:3;
column-count: 3;
/*column-count: 3; 將文章分欄成3欄*/
/*有些瀏覽器不支援，需要加上-moz-column-count:3;和-webkit-column-count:3;*/

-webkit-column-gap:20px;
-moz-column-gap:20px;
column-gap:20px;
/*-gap 設定間格距離*/

-webkit-column-rule-style:solid;
-moz-column-rule-style:solid;
column-rule-style:solid;
/*rule-style:solid; 設定分欄線為實線(dashed 虛線)*/

-webkit-column-rule-width:1px;
-moz-column-rule-width:1px;
column-rule-width:1px;
/*-width:1px; 設定分隔線的寬度*/

-webkit-column-rule-color:blue;
-moz-column-rule-color:blue;
column-rule-color:blue;
/*-color:white; 設定分隔線的顏色*/

}
</style>

</head>

<body id="shadows">
   <div id="container">
       <h1>CSS3 Shadows</h1>
       <p id="columns">Present commodo cursus magna, vel scelerisque nisk cinsectetur et. Sed posuere consetetur est at lobortis. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec sed odio dui.Present commodo cursus magna, vel scelerisque nisk cinsectetur et. Sed posuere consetetur est at lobortis. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec sed odio dui.Present commodo cursus magna, vel scelerisque nisk cinsectetur et. Sed posuere consetetur est at lobortis. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec sed odio dui.Present commodo cursus magna, vel scelerisque nisk cinsectetur et. Sed posuere consetetur est at lobortis. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec sed odio dui.</p>
   </div>
</body>
</html>