9

誰かがcssの問題で私を助けてくれることを願っています...

リストビューを使用していくつかの結果を表示しています。グループ化の概念が必要です。これを実現するには、グループ間で交互に 2 つの背景色を使用しています。これらの要素に境界線を追加しようとしていますが、境界線の上と境界線の左が異なる色になる可能性があるため、それらが交わる三角形を削除する方法はありますか?

 <!DOCTYPE html>
 <html>
 <head>
 <style type="text/css">
 p
 {
 border-top:10px solid red;
 border-left:10px solid white;
 border-bottom-style:dotted;
 border-left-style:solid;
 }
 </style>
 </head>

 <body>
 <p>2 different border styles.</p>
 </body>
 </html>
4

4 に答える 4

11

次のように書くことができます：

p{
    width:200px;
    height:200px;
    background:red;
    border-left:5px solid pink;
    -moz-box-shadow:inset 0 5px green;
    box-shadow:inset 0 5px green;
}

これをチェックしてくださいhttp://jsfiddle.net/nRWux/1/

box-shaow は IE8 以下では動作しません。

于 2012-06-26T11:46:23.993 に答える
3

pseudo: before を使用して IE8+ と互換性のあるソリューションを次に示します。

フィドルhttp://jsfiddle.net/PhilippeVay/hXrW5/

 <!DOCTYPE html>
 <html>
 <head>
 <style type="text/css">
 p {
     position: relative;
     border-top:10px solid red;
     border-bottom-style:dotted;
     border-left-style:none;
 }
 p:before {
     content: '';
     display: block;
     width: 10px;
     position: absolute;
     top: -10px; /* top: 0; if you want red over blue (top over left) */
     bottom: 0;
     background: blue;
 }
 </style>
 </head>

 <body>
 <p>2 different border styles.</p>
 </body>
 </html>
于 2012-06-26T11:59:41.413 に答える
2

ボーダートップに box-shadow を使用できます。

あなたの例では: http://jsfiddle.net/C7jnJ/

margin-top:10px;
box-shadow:0 -10px 0 10px red;

ボーダートップの代わりに。影が 'p' の外側に表示されているため、margin-top が追加されています。

box-shadow:inset 0px 10px 0px red;
于 2012-06-26T11:57:27.060 に答える
0

いいえ、それらが交わる三角形を削除することはできません。国境はそのように実装されており、回避策はありません。

于 2012-06-26T11:44:34.400 に答える