コニファ・ロゴ

csstest:CSSのみで、テーブルのボーダーをグラデーションに

CSSのみで、テーブルのボーダーをレインボーカラーのグラデーションにします。

サンプルは、背景をレインボーカラーに指定したdiv要素の中にtable要素を配置しています。div要素のサイズをtable要素とあわせ、tdの背景をdiv要素の親側の暗い背景色(#222)にし、ボーダーのみを透明にすることで、div要素の背景のレインボーカラーをボーダーに適用させています。

htmlソース

<table>
	<tr>
		<td><a href="#">リンク01</a></td>
		<td><a href="#">リンク02</a></td>
		<td><a href="#">リンク03</a></td>
		<td><a href="#">リンク04</a></td>
		<td><a href="#">リンク05</a></td>
	</tr>
	<tr>            
		<td><a href="#">リンク06</a></td>
		<td><a href="#">リンク07</a></td>
		<td><a href="#">リンク08</a></td>
		<td><a href="#">リンク09</a></td>
		<td><a href="#">リンク10</a></td>
	</tr>
</table>

CSSソース

div#sample div {
	margin:15px auto;
	display: table;
	background: -webkit-linear-gradient(left, #Faa, #CF6 25%, #3CC 70%, #aaf 90%);
	background: linear-gradient(to right, #Faa, #CF6 25%, #3CC 70%, #aaf 90%);
	}
div#sample div a {
	display: block;
	width: 100px;
	height: 40px;
	background-color: #222;
	font-size:14px;
	line-height: 40px;
	text-align: center;
	color:#999;
	text-decoration:none;
	}
div#sample div a:hover {
	color:#fff;
	}
div#sample div table {
	border-collapse: collapse;
	}
div#sample div td {
	padding: 0;
	border: 1px solid transparent;
	}

 

 

 

戻るボタン