12

したがって、これらの4つのボックスが左に浮いていて、それぞれがページの幅の50％になっています。の輪郭1px solid grayを描きたいし、角を6pxで丸めたい。使用できることはわかっていますborder:1px solid gray;がborder-radius:6px;、問題は、境界線によって要素に幅が追加されることです。また、ボックスの幅は50％で、左に浮いているため、境界線を追加することはできません。では、アウトラインの角を丸くすることは可能ですか？

Edit：CSSのみのソリューションが最適です。これは、IE6を除くすべてのブラウザーをサポートする必要があるためです。

4

6 に答える 6

7

ボックスサイズ設定を使用すると、境界線でこれを行うことができます。これは、要素の全幅に境界線の幅を含み、かなりサポートされています。

于 2012-08-02T09:03:26.647 に答える
0

私のアイデアはテストされていませんが、境界のある実際のdivのコンテナーとして50％divを使用するのはどうですか？
次に、bordered-divは、およびを持って、、、およびをheight設定widthしautoます。leftrighttopbottom0px

于 2012-08-02T09:04:09.710 に答える
0

この回答による回避策があります。ただし、設定outline:0して使用する必要がborder-radiusありますbox-shadow。

于 2012-08-02T09:05:14.250 に答える
-2

次のcssプロパティを使用して、角の丸い境界線を作成します

-moz-border-radius:0 0 10px 10px;
-webkit-border-radius: 0 0 10px 10px;
border-radius:0 0 10px 10px;
border:1px solid gray;

これを使用する場合。使用したコードを投稿してください。そうすれば、エラーや変更の必要性を見つけることができるのは私たちだけです...

ありがとう

于 2012-08-02T09:03:16.177 に答える
-2

境界線を制御する最良の方法は、box-shadowを使用することです。それは丸みを帯びた角を保ち、外側または内側（はめ込み付き）にすることができます。

例：

box-shadow: 0px 0px 0px 2px black;
/*outside border black 2px width*/

box-shadow: 0px 0px 0px 2px black inset;
/*inside border black 2px width*/
于 2020-12-10T15:46:50.243 に答える
-4

これを行う別の方法は、OUTLINEプロパティと80ピクセルのBORDER-RADIUSを使用することです。フォローのように：

outline: 5px #FFF;
border-radius: 80px;

これは、大きすぎない小さな画像で機能します。より大きな画像でラウンドエッジシステムを使用する場合は、他の誰かが述べたように実行し、次のコードを使用する必要があります。

-moz-border-radius:0 0 10px 10px;
-webkit-border-radius: 0 0 10px 10px;
border-radius:0 0 10px 10px;
border:1px solid gray;
于 2013-10-12T10:36:12.640 に答える