28

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

3 に答える 3

43

CSS-TricksのInfiniteBordersテクニックを使用して、を適用してみてください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">

于 2013-02-15T13:57:06.967 に答える
30

Firefox にはプロパティがありますが-moz-outline-radius、WebKit に同様の機能を実装するリクエストはWONTFIX としてクローズされました。将来の計画は、アウトラインを境界線に沿ったものにすることです。

これはあまり役に立たないことはわかっていますが、あなたの質問に対する答えは、現在、いいえです（クロスブラウザの方法ではありません）。当面は、thekalaban が提案するような別のアプローチを使用する必要があります。

于 2013-02-15T14:18:54.520 に答える