CSS note

破線をCSSグラデーションで表現

.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);
}

.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;
}

.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;
}

.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;
}

.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;
}

レティーナディスプレイとボーダー

よく見かける、レティーナディスプレイ用のスタイル

@media(-webkit-min-device-pixel-ratio:2) {
 div{
 border-width:0.5px;
 }
}

しかし、こんな話もありそう

Retina Display向け.5pxのborderまとめ

関連

jagged border

border

Inner border settings

新着記事