Question

示例：http://jsfiddle.net/CM33V/1/ 是否可以在没有其他html元素的情况下从红色边框上的左右边框中删除灰线？

代码很简单：

div {
    width:300px;
    height:100px;
    border:1px solid #CCC;
    border-top:15px solid #C90110;
}

此代码用于电子邮件html布局，因此我不确定是否可以使用阴影进行解决。

Answer 1

我担心如果你想要修复HTML电子邮件，你几乎不得不添加额外的元素，因为这是边框在CSS中工作的方式。但对于浏览器..

Demo Fiddle

....有一种方法可以修复它而不用从技术上向HTML中添加任何东西（但只是因为:pseudo元素没有添加到DOM中），它有点厚颜无耻虽然：

div {    
    width:300px;
    height:100px;
    border-top:15px solid #C90110;
    position:relative;

}
div:after{
    position:absolute;    
    border:1px solid #CCC;
    border-top:none;
    height:100%;
    width:100%;
    content:'';
    display:block;
    box-sizing:border-box;
}

Answer 2

简短的回答是否定的，至少不是你想要的目的（在网页上容易！）

如果你这样做是作为一个电子邮件模板，并且为了交叉（浏览器，电子邮件客户端 - 在这里插入适当的单词）你应该使用两个单独的div（事实上，在大多数情况下，TABLES（shock horror）对于电子邮件更好！）

电子邮件是一个非常棘手的方法，因此坚持最简单的方法 - 两个div，一个红色，一个白色，左，右和上边框 - 它将适用于大多数电子邮件客户端。

下面的答案涵盖了如何在网上进行，所以+1为那个（当他做了一个小提琴时会给+2但不能这样做:-P）

CSS，左右边框覆盖顶部边框的一部分

2 个答案:

Demo Fiddle