CSSでborderにグラデーションをかけるには！ borderプロパティではグラデーションを施すことはできないので、:before擬似要素 / :after擬似要素でブロック要素を生成し、その背景にCSS3の線形グラデーション（linear-gradient）を使って、グラデーションをかけボーダーのように見せてます。
CSS でグラデーションのかかったボーダーを描画
マルチドメイン、マルチデータベース、共有 SSL など多彩な機能と 256ＧＢの大容量なサーバー環境が
月額1,000円（税抜）〜！ ホームページつくるならレンタルサーバー 『ヘテムル』
サンプルソース
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>borderにグラデーションをかける</title>
<style>
#Wrap{ width:560px; }
label{ cursor: pointer; }
/*各クラス共通コード */
/* 四辺にボーダー。ボーダーを太く。右,下を太く。左,下にボーダー */
.gradBdr, .bdrBold, .bdrBoldRU, .gradBdrLU{
position: relative; /* 相対配置（相対位置）*/
cursor: pointer; font:bold 16px Arial;
width:85%; background:#ffe;
margin: 30px auto;
padding: 15px;
}
/*各クラス 擬似要素 */
.gradBdr:before, .bdrBold:before,
.bdrBoldRU:before, .gradBdrLU:before{ /* CSS疑似要素 :before / :after */
content: ""; display:block; /* displayプロパティ */
position: absolute;/* 絶対配置 */
z-index: -20; /* 重なりの順序 元の要素の背面に */
background:linear-gradient(160deg,red,lime, blue);
}
.gradBdr:before{ /* 四辺にボーダー */
top: -3px; /* 親要素からの距離 top,left,bottom,right プロパティ*/
right: -3px;
bottom: -3px;
left: -3px;
}
/* 配置を変えて様々な見え方を */
.bdrBold:before{ /* ボーダーを太く */
top: -13px;
right: -13px;
bottom: -13px;
left: -13px;
}
.bdrBoldRU:before{ /* 右,下を太く */
top: -3px;
right: -13px;
bottom: -15px;
left: -3px;
}
.gradBdrLU:before{ /* 左,下にボーダー */
top: 0px;
right: 0px;
bottom: -13px;
left: -8px;
}
</style>
</head>
<body>
<div id="Wrap">
<div id="hoge" class="gradBdr">
四方の枠線に見える箇所は 擬似要素で作成した要素の背景に、
斜めに RedからLime、Blueに変わる線形グラデーションをかけ、
本体の背面に四辺が見えるように位置を調節して配置します.....
</div>
<form style="margin:auto ; width: 90%">
<fieldset>
<legend>配置の値を変更</legend>
<label><input type="radio" name="raj" onclick="fnc33()" />
ボーダーを太くする。</label>
<label><input type="radio" name="raj" onclick="fnc44()" />
右,下ボーダーを太く</label>
<label><input type="radio" name="raj" onclick="fnc55()" />
左,下にボーダー</label><br />
<label><input type="radio" name="raj" onclick="fnc66()" checked="checked" />
初期値</label>
<p style="color : #dc143c;"> 配置の値: <code id="gradVal">
top: -3px;right: -3px; bottom: -3px;left: -3px;</code></p>
</fieldset>
</form>
<script type="text/javascript">
var gradBox = document.getElementById("hoge");
var gradIti = document.getElementById("gradVal");
function fnc00(){//マウスカーソルが乗った時
gradBox.style.zIndex = "10";
}
function fnc11(){//マウスカーソルが外れた時
gradBox.style.zIndex = "";
gradBox.style.borderRadius= "0";
}
function fnc22(){ //角丸
gradBox.style.zIndex = "";
gradBox.style.borderRadius= "20%"; // 角丸 border-radiusプロパティ
}
function fnc33(){ // 太く
gradBox.className = "bdrBold"; // クラス名 設定,変更
gradIti.innerHTML ="top:-13px; right:-13px; bottom:-13px; left:-13px;";
}
function fnc44(){ //右,下を太く
gradBox.className = "bdrBoldRU";
gradIti.innerHTML ="top:-3px; right:-13px; bottom:-15px;left:-3px;";
}
function fnc55(){ //左,下にボーダー
gradBox.className = "gradBdrLU";
gradIti.innerHTML = "top:0px; right:0px; bottom:-13px; left:-8px;";
}
function fnc66(){ //初期値
gradBox.className = "gradBdr";
gradIti.innerHTML = "top:-3px; right:-3px; bottom:-3px; left:-3px;";
}
//イベントに関数を指定
gradBox.onmouseover = fnc00;
gradBox.onmouseout = fnc11;
gradBox.onclick = fnc22;
</script>
</div>
</body>
</html>
グラデーションボーダー 上下、左右 、左下 個別に設定
上下のボーダーにグラデーションがかかったようにする。
左右のボーダーにグラデーションがかかったようにする。
左と下のボーダーにグラデーション、見出し用。
/*----- HTML -----*/
<p class="bdrGrad-yoko">
上下のボーダーにグラデーションがかかったようにする。</p>
<div class="bdrGrad-tate">
左右のボーダーにグラデーションがかかったようにする。</div>
<h3 class="bdrGrad-midasi">
左と下のボーダーにグラデーション、見出し用。</h3>
/*----- CSS -----*/
.bdrGrad-yoko{ /* 上下のボーダー */
position: relative;
margin:auto; margin-top:2em;
padding:20px 0;
width: 90%; height:100%;
text-align: center;
font:bold 16px Arial;
border-left: 2px solid fuchsia;
border-right:2px solid blue;
}
.bdrGrad-yoko:before, .bdrGrad-yoko:after{
position:absolute;
content:""; display:block;
height:7px; width: 100%;
background:
linear-gradient(to right,fuchsia,green,orange,green,blue);
}
.bdrGrad-yoko:before{ /* 上 枠線 */
top:0;left:0;
}
.bdrGrad-yoko:after{ /* 下 枠線 */
bottom:0;left:0;
}
.bdrGrad-tate{ /* 左右のボーダー */
position: relative;
margin:auto;margin-top:2em;
padding:15px 0;
width: 90%; height: 100%;
text-align: center;
font:bold 16px Arial;
border-top:2px solid navy;
border-bottom:2px solid green;
}
.bdrGrad-tate:before, .bdrGrad-tate:after{
position: absolute;
content: ""; display: block;
width: 10px; height: 100%;
background:
linear-gradient(to bottom,navy,orange,green);
}
.bdrGrad-tate:before{ /* 左 枠線 */
top: 0; left:0;
}
.bdrGrad-tate:after{ /* 右 枠線 */
top:0 ; right: 0;
}
.bdrGrad-midasi{ /* 見出し用 */
position: relative;
font:bold 16px Arial;
margin:auto; margin-top:2em;
padding: 5px 25px;
width: 85%; height: 100%;
}
.bdrGrad-midasi:before, .bdrGrad-midasi:after{
position: absolute;
content:""; display: block;
}
.bdrGrad-midasi:before{ /* 左 枠線 */
top: 0; left: 0px;
height: 100%; width:15px;
background:
linear-gradient(to bottom,blue,yellow,blue);
}
.bdrGrad-midasi:after{ /* 下 枠線 */
bottom: 0;left: 0;
height: 2px; width: 100%;
background:
linear-gradient(to right, blue 50%, #fff 100%);
}
- WordPressが簡単・すぐに使える『レンタルサーバーheteml(ヘテムル)』
- ★月々100円（税抜）からオンラインショップを運営！
独自SSL・高機能カート・クレジット決済が簡単導入
- コロリポプラン 詳細はこちら
- DOM（Document Object Model）の基本
- JavaScriptでクラス名を付けます。変えます。
- linear-gradient()関数 css3
- CSS疑似要素 :before / :after
- CSS positionプロパティ
- marginプロパティ
- borderプロパティ
- border-styleプロパティ
- border-radiusプロパティ
- display プロパティ
- z-indexプロパティ テーブル（表）のセルを重ね、ずらして表示します。
- リボンのような見出しをCSSで表示
- 三角形を CSS で作る
- CSSで作る吹き出しボックス,サンプル
- スタイルシートだけでポップアップメニュー、補足説明文を表示します。
