web-dev-qa-db-ja.com

ボックスの内側とその境界の両方に丸い角を作る方法は？

タイトルはわかりにくいと思うので、説明します。私はこの効果を達成しようとしています：

enter image description here

（角が丸くなっているボックスとその境界線、さらに境界線が丸いボックス）。

私はbackground-clipプロパティ：

enter image description here

（境界線の角は丸いですが、内側のボックスではnot）

問題は、内側のボックスの角を丸くするにはどうすればよいですか？

ありがとうございました！

[〜＃〜] edit [〜＃〜]

私が使用しているHTML：

<header class="body template-bg template-border radius-all">
        <nav>
            <ul>
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 2</a></li>
                <li><a href="#">Link 3</a></li>
                <li><a href="#">Link 4</a></li>
            </ul>
        </nav>
    </header>

そしてCSS：

.radius-all {
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}

.template-bg {
  background: #FFF;
  -moz-background-clip: padding;
  -webkit-background-clip: padding;
  background-clip: padding-box;
}

.template-border {
  border: 5px solid rgba(255, 255, 255, 0.2);
}
csscss3rounded-corners
41
linkyndy

内部境界の計算

最初に、-vendor-background-clip: padding-boxを削除するか、border-boxをデフォルトに設定して、内側の境界半径を達成する必要があります。

内側の境界半径は、外側の境界半径（border-radius）と境界幅（border-width）の差として計算されます。

inner border radius = outer border radius - border width

border-widthがborder-radiusよりも大きい場合は常に、内側の境界の半径は負であり、いくつかの厄介な逆の角が得られます。現在、inner-border-radiusを調整するプロパティがあるとは思わないため、手動で計算する必要があります。

あなたの場合：

inner border radius = 6px - 5px = 1px

新しいCSSは次のようになります。

.radius-all { border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; }
.template-bg { background: #FFF; }
.template-border { border: 5px solid rgba(255, 255, 255, 0.2); }

border-radius（6px）の値をborder-widthの値（5px）から差し引くだけで、目的の内枠半径を実現できます。

私のために働くコード

Firefox 3.x、Google Chrome、およびSafari 5.0でテスト済み

 .radius-all { border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; }
.template-bg { background: #FFF; }
.template-border { border: 5px solid rgba(0, 0, 0, 0.2); } /* Note that white on white does not distinguish a border */

JavaScriptでカラーオーバーレイを追加する

<script type="text/javascript">
    var bodyBgColor = document.getElementsByTagName('body')[0].style.backgroundColor;;

    // insert opacity decreasing code here for hexadecimal

    var header = document.getElementsByTagName('header')[0];
    header.style.backgroundColor = bodyBgColor;
</script>

JavaScriptで16進数演算を行う方法は完全にはわかりませんが、Googleでアルゴリズムを見つけることができると確信しています。

一般的な境界線の適用

backgroundプロパティを使用して、境界線に別のボックス<div>を使用していますか？その場合、border-radiusとそのベンダー固有のプロパティを境界ボックスと内部ボックスの両方に適用する必要があります。

<div id="border-box" style="border-radius: 5px;">
    <div id="inner-box" style="border-radius: 5px;">
    </div>
</div>

はるかに効率的な方法は、単に内部ボックスに独自の境界線を管理させることです。

<div id="inner-box" style="border: 4px solid blue; border-radius: 5px">
    <!-- Content -->
</div>

CSSに関しては、.rounded-borderクラスを宣言し、丸い境界線を持つすべてのボックスに適用できます。

.rounded-borders {
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
}

そして、丸い境界線を持つボックスにクラスを適用します。

<div id="border-box" class="rounded-borders">
    <div id="inner-box" class="rounded-borders">
    </div>
</div>

単一のボックス要素の場合、表示するには境界線のサイズを宣言する必要があります。

<style type="text/css">
    #inner-box { border: 4px solid blue; }
</style>

<div id="inner-box" class="rounded-borders">
</div>
37
Gio Borje

別の解決策は、border-radiusと組み合わせて内側と外側の境界線を一致させることです。 <spread-radius> の値box-shadowプロパティ。これにより、通常の境界線を簡単に通過できるソリッドシャドウが生成されます。

たとえば、4pxの境界線と4pxの白い境界線半径を実現するには、これを試してください。

/* rounded corners */
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;

/* drop shadow */
-webkit-box-shadow: 0px 0px 0px 4px #fff;
-moz-box-shadow: 0px 0px 0px 4px #fff;
box-shadow: 0px 0px 0px 4px #fff;

コンテナ全体に「実際の」ドロ​​ップシャドウを追加する場合は、次のようにシャドウステートメントを単純に連鎖させることができます。

/* drop shadow */
-webkit-box-shadow: 0px 0px 0px 4px rgba(255,255,255,1.0),
        1px 1px 8px 0 rgba(0,0,0,0.4);
-moz-box-shadow: 0px 0px 0px 4px rgba(255,255,255,1.0),
        1px 1px 8px 0 rgba(0,0,0,0.4);
box-shadow: 0px 0px 0px 4px rgba(255,255,255,1.0),
        1px 1px 8px 0 rgba(0,0,0,0.4);

注：ここで、ステートメントの順序はレンダリングされる順序であることに注意してください。

唯一注意が必要なのは、最初の「偽の境界線」が、その下にある任意の影の最初のXピクセル（Xは境界線の幅）に重なることです（RGBa不透明度を使用している場合は結合します） 100％未満。）

そのため、allの状況では機能しませんが、大部分は取得できます。通常の境界線が理想的ではない場合、私はこれをかなり頻繁に使用します。

18
nickb

CSSのinner-border-radiusなどは存在しないため、ブラウザはデフォルトでborder-radius - border-widthに設定します。それが気に入らない場合、典型的な解決策は、内側の境界半径を模倣する境界線を持つ2つのdivを作成することですが、この解決策はHTMLにより多くのデザインをもたらします。また、サイト全体で使用される一般的な境界線テンプレートである場合も苦痛です。

:afterとcontent: ""を使用して内部divを作成することにより、CSSですべてを保持する方法を考え出すことができました。したがって、あなたの場合は次のようになります。

.template-border {
    position: relative;
    border-radius: 5px;
    background-color: #000;
    border: 10px solid #000;
    z-index: -2;
}

.template-border:after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    background-color: #FFF;
    z-index: -1;
}
15
Leo Wu

レオ・ウーの考えに基づいて、ここに私の解決策があります：

.my-div
{
  background-color: white;
  border: solid 20px black;
  border-radius: 10px;
  box-shadow: 0 0 10px black;
  height: 100px;
  left: 30px;
  position: relative;
  top: 20px;
  width: 200px;
}
.my-div:before
{
  background-color: white;
  border-radius: 5px;
  content: "";
  display: block;
  height: calc(100% + 20px);
  left: -10px;
  position: absolute;
  top: -10px;
  width: calc(100% + 20px);
  z-index: 1;
}
.some-content
{
  height: calc(100% + 20px);
  left: -10px;
  position: relative;
  top: -10px;
  width: calc(100% + 20px);
  z-index: 3;
}
.some-header
{
  background-color: green;
  border-radius: 5px 5px 0 0;
  height: 30px;
}
<html>
        <body>
                <div class="my-div">
                        <div class="some-content">
                                <div class="some-header">my title</div>
                                <div>some other content</div>
                        </div>
                </div>
        </body>
</html>
3
Zsolti

次のように、2つのdiv要素を1つ、もう1つの内側に配置し、クロスブラウザーの角の丸いcssを使用する必要があります。

.small-rounded {
    border: 1px solid ##000;
    -moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px;
    -moz-border-radius-topright: 5px; -webkit-border-top-right-radius: 5px;
    -moz-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px;
    border-radius: 5px;
}
2
Shaun McCran

問題はCSSのコーディングではなく、円の数学です。基本的にあなたのborder-inner-radius（このプロパティが存在しないことは知っています）はborder-radius-border-width。

内側の半径をどのようにするかを簡単に計算し、境界線の幅を追加して目的の効果を実現します。

border-inner-radius + border-width = border-radius

2
Daniel

曲線が表示されるまで、border-radiusをborder-widthよりも大きい値にする必要があります。 + 1-pxのborder-radiusをborder-widthより大きく設定するための集合式ではありません。しかし、間違いなく正の値になるでしょう。ほとんどのブラウザーで十分に機能する、可能な限り小さい境界半径値が表示されるまで、これを必要とするさまざまなブラウザーで実験する必要があります。 （一部のブラウザーはこれをサポートしていない場合があります。）たとえば、Google Chromeでは、ボーダー幅を10pxに設定しましたが、内側のボーダーカーブの外観を見る前にボーダー半径を13pxに設定する必要がありました。さらによく働きました。

0
Volomike

誰かがこの答えをググリングしてここに送られた場合に備えて、これを行う簡単で簡単な方法があります...

HTMLの例...

<div class="wrapper">
    <div class="content">
        your content goes here
    </div>
</div>

CSSの例...

.wrapper {
    border-radius: 25px;
    border: solid 25px blue;
    background-color: blue;
}
.content {
    border-radius: 10px;
    background-color: white;
}

...プレスト。 enter image description here

0
Nick Steele