CSSの "Outward"ボーダー半径は？

現在、私のウェブサイトの上部にあるリンクは、次のようになります。CSSの "Outward"ボーダー半径は？

enter image description here

をしかし、私は「ラウンド」ボタンの下縁が、それは彼らがから出てきているように見えるようにしようとしていますページとリボンの上部にあります。

私はあなたがそれをハックすることができ、各エントリの間に丸い角を持つ "区切り" divを追加することを知っていますが、これは、同じdivからすべてではない使用境界線で見ることは困難です。また、私のボタンがお互いに非常に近いので、見るのが簡単ではありません。

「ボタン」のCSS：「リボン」の

.button { 
    border-top: 3px solid #A1C1BE; 
    border-left: 3px solid #A1C1BE; 
    border-right: 3px solid #A1C1BE; 
    border-bottom: 0px; 
    padding: 5px 8px 5px 8px; 
    margin: 0 0 -9px 0; 
    border-radius: 5px 5px 0 0; 
    font-size: 12px; 
    font-family: 'PT Sans', sans-serif; 
    background-color: #f8f8ff; 
    color: #484848; 
}

CSS：あなたが見ることができるように

#top-wrapper { 
    border-bottom: 5px solid #A1C1BE; 
    width: 100%; 
    background-color: #59554E; 
    padding: 10px 0 0 0; 
    color: #C0C0A8; 
}

、太いボーダーがの長さを伸ばしリボンに属し薄い青色の枠線はボタンの一部ですが、ウェブページは薄くなります。前と：後擬似クラス

出典

2011-11-15 n0pe

ソリューションを使用する可能性があるperspective属性によって、よりクール行うことができ、各ボタンや3D効果のためbox-shadowを適用して作成することができます。あなたはあなたのメニューのJSfiddleを使って遊ぶことができますか？乾杯。 – doctororange

助けてくれてありがとう@doctororange、ここJSFiddle http://jsfiddle.net/395Ue/ – n0pe

私はあなたがこれを読むべきだと思います：http://stackoverflow.com/questions/4839613/how-to-make-round-corners -to-both-inside-of-a-box-and-the-border – JohnB

あなたの望ましい効果は、3D変換を適用し、

出典

2013-06-23 18:34:08 eldos

CSSの "Outward"ボーダー半径は？

答えて

関連する問題