|
1 2 3 4 5 |
.border06{ width:100%; height:3px; background-image: repeating-linear-gradient(-45deg,rgb(26,198,204),rgb(26,198,204) 3px, rgb(255,255,255) 6px); } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.border07{ width: 100%; height: 3px; background: radial-gradient(circle, white, gray, black); /* Standard syntax */ position:relative; } .border07:before{ content:'BREAK'; position:absolute; top:-.5em; bottom: 0; left:0; right: 0; margin: auto; width:5em; height:1em; } |
|
1 2 3 4 5 6 7 8 |
.border12{ width: 100%; height: 11px; background-color: #fff; background-image: linear-gradient(115deg, transparent 75%, #1abc9c 75%), linear-gradient(245deg, transparent 75%, #2ecc71 75%), linear-gradient(115deg, transparent 75%, #3498db 75%), linear-gradient(245deg, transparent 75%, #9b59b6 75%); background-position: 0 0, 0 0, 10px -10px, 10px -10px; background-size: 10px 20px; } |
|
1 2 3 4 5 6 7 8 |
.border13{ width: 100%; height: 10px; background: #fff; background-image: radial-gradient(#3498db 20%, transparent 0), radial-gradient(#3498db 20%, transparent 0); background-position: 0 0, 10px 10px; background-size: 10px 10px; } |
|
1 2 3 4 5 6 7 8 |
.border14{ width: 100%; height: 30px; background: #fff; background-image: radial-gradient(#3498db 20%, transparent 0), radial-gradient(#3498db 20%, transparent 0); background-position: 0 0, 30px 30px; background-size: 30px 30px; } |
レティーナディスプレイとボーダー
よく見かける、レティーナディスプレイ用のスタイル
|
1 2 3 4 5 |
@media(-webkit-min-device-pixel-ratio:2) { div{ border-width:0.5px; } } |
しかし、こんな話もありそう
Retina Display向け.5pxのborderまとめ