borderの装飾について
今回は単純にどんな結果が得れるのかを試してみました
borderをどの様に装飾できるかを知ってるだけでwebページの完成度が増すと思います
以下の矩形の角を丸くする
background-color: aqua;
border:1em solid blue;
height:2em;
width: 2em;
/* コーナーを丸くする */
border-radius: 50%;
/* 左上だけ丸くする */
border-top-left-radius: 4em;
/* 右上だけ丸くする */
border-top-right-radius: 100%;
/* 右下だけ角を通常にする */
border-radius: 50%;
border-bottom-right-radius: 0;
こちらは、borderのtype:ridge、カラー:中間色グレー半透明に変更
background-color: aqua;
border:1em ridge rgba(128, 128, 128, 0.5);
height:2em;
width: 2em;
borderには画像を設定できる
border-image
今回使用するborder-image用の画像
基本的に画像を9分割して4角、4編、中央部分で配置します
画像サイズ 120px × 120px 一つの正方形は1辺40px です
HTMLでは単純にdiv要素に”border-imageの検証”というテキストを表示させ周りを装飾します
以下の複数の例に共通する部分はこちらです
div {
width:12em;
line-height:4em;
text-align: center;
border: 2em solid;
padding: 1em;
}
border-image-source: url("./image/Tile.png");
border-image-slice: 100%;
border-image-repeat:repeat;
border-image-width: 2em;
slice を100% に設定
その場合では元画像が4角に配置される
border-image-source: url("./image/Tile.png");
border-image-slice: 40;
border-image-repeat:repeat;
border-image-width: 2em;
slice:40 は単位無し
border-image-source: url("./image/Tile.png");
border-image-slice: 10;
border-image-repeat:repeat;
border-image-width: 2em;
sliceを10 に設定(単位無し)
border-image-source: url("./image/Tile.png");
border-image-slice: 40;
border-image-repeat:stretch;
border-image-width: 2em;
slice 40 で repeat: strerch を設定
コメント