web-dev-qa-db-ja.com

半径で輪郭の境界を作成することは可能ですか？

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;    
}
htmlcssoutline
20
Caspert

Firefoxにはプロパティ-moz-outline-radius 、ただし、WebKitに同様の機能を実装する要求は WONTFIXとしてクローズ でした。将来の計画は 輪郭を境界線に合わせる です。

私はこれはあまり役に立たないことを理解していますが、あなたの質問への答えは：現在、いいえ（クロスブラウザーの方法ではありません）。それまでの間、thekalabanによって提案されたような代替アプローチを使用する必要があります。

25
robertc

CSS-Tricksの無限境界技術 を使用してborder-radiusを適用してみてください。

この方法では、境界線とbox-shadowが必要ですが、アウトラインは必要ありません。

フィドルリンクはこちら

Dog with infinite rounded borders!

24
user1685185