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

这是使用 :before 与 IE8+ 兼容的解决方案pseudo：

小提琴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”之外，如果您希望它在里面，那么它将是：http: //jsfiddle.net/C7jnJ/1/

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

不，不可能删除它们相遇的三角形。边界是这样实现的，没有办法解决。

于 2012-06-26T11:44:34.400 回答