☰

半径付きのアウトライン境界線を作成することは可能ですか? 質問する

tag-icon • tag-icon html css outline
半径付きのアウトライン境界線を作成することは可能ですか? 質問する

CSS3 でアウトラインの境界線を追加できることは知っています。

outline: 10px solid red;

ここで、アウトラインの境界に半径を追加するにはどうすればよいかと考えました。

これを試してみましたが、うまくいきませんでした:

.radius {
    padding: 20px 60px;
    text-transform: capitalize;

    -moz-outline: 10;
    outline: 10px solid red;

    -webkit-border-radius: 40px;
    -moz-border-radius: 40px;
    border-radius: 40px;    
}

ベストアンサー1

使ってみるCSS-Tricks の無限境界テクニックそして適用しますborder-radius。

この方法では、box-shadowアウトラインではなく境界線が必要になります。

無限に丸い境界線を持つ犬！

img {
    border-radius: 4px;
    /* #1 */
    border: 5px solid hsl(0, 0%, 40%);
    
    /* #2 */
    padding: 5px;
    background: hsl(0, 0%, 20%);
    
    /* #3 
    outline: 5px solid hsl(0, 0%, 60%); */
    
    /* #4 AND INFINITY!!! (CSS3 only) */
    box-shadow:
        0 0 0 10px red,
        0 0 0 15px orange,
        0 0 0 20px yellow,
        0 0 0 25px green,
        0 0 0 30px blue;
    
        
    /* If you could do pseudo elements 
       you could get a few more... */
    
    /* Also, HSL is awesome but don't use it if
       you need super old browser support */
}

body { padding: 50px; text-align: center; }
<img src="https://www.randomlists.com/img/animals/chipmunk.jpg">

おすすめ記事