3

要素の角を本質的に切り落としたい。この要素は無地の背景を持ちますが、親要素は背景として画像を持ちます。この要素の高さは不明です。CSS の border-radius プロパティは丸められるので役に立ちません。役立つjQueryプラグインを見つけましたが、背景画像を考慮していません。

4

3 に答える 3

6

あなたが望むのはこれです：http://lea.verou.me/2011/03/beveled-corners-negative-border-radius-with-css3-gradients/

すべてCSSで。

div {
    background: #c00; /* fallback */
    background:
        -moz-linear-gradient(45deg,  transparent 10px, #c00 10px),
        -moz-linear-gradient(135deg, transparent 10px, #c00 10px),
        -moz-linear-gradient(225deg, transparent 10px, #c00 10px),
        -moz-linear-gradient(315deg, transparent 10px, #c00 10px);
    background:
        -o-linear-gradient(45deg,  transparent 10px, #c00 10px),
        -o-linear-gradient(135deg, transparent 10px, #c00 10px),
        -o-linear-gradient(225deg, transparent 10px, #c00 10px),
        -o-linear-gradient(315deg, transparent 10px, #c00 10px);
    background:
        -webkit-linear-gradient(45deg,  transparent 10px, #c00 10px),
        -webkit-linear-gradient(135deg, transparent 10px, #c00 10px),
        -webkit-linear-gradient(225deg, transparent 10px, #c00 10px),
        -webkit-linear-gradient(315deg, transparent 10px, #c00 10px);
}

div.round {
    background:
        -moz-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
        -moz-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
        -moz-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),
        -moz-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);
    background:
         -o-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
         -o-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
         -o-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),
         -o-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);
    background:
         -webkit-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
         -webkit-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
         -webkit-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),
         -webkit-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);
}

div, div.round {
    background-position: bottom left, bottom right, top right, top left;
    -moz-background-size: 50% 50%;
    -webkit-background-size: 50% 50%;
    background-size: 50% 50%;
    background-repeat: no-repeat;
}

/* Ignore the CSS from this point, it's just to make the demo more presentable */
body {
    background: #444 url('http://leaverou.me/ft2010/img/darker_wood.jpg') bottom;
    font-family: sans-serif;
}

div {
    width: 500px;
    margin:15px auto;
    padding:13px 15px;
    color: white;
    line-height:1.5;
}

p:first-of-type { margin-top: 0 }
p:last-of-type { margin-bottom: 0}
于 2012-04-27T14:25:08.393 に答える
1

質問の正確にはわかりませんが、おそらくあなたはborder-style?

border-style: outset面取りされたエッジを生成します。

詳細: http://www.w3schools.com/css/css_border.asp

于 2012-04-27T07:20:36.617 に答える