参见英文答案 >
Removing the Bevel Effect on the Corner of Borders2个
我想创建一个不同颜色的盒子,左,右和顶部颜色为红色,底部颜色为灰色但我想要平底盒边框
我想创建一个不同颜色的盒子,左,右和顶部颜色为红色,底部颜色为灰色但我想要平底盒边框
HTML
<div class="ts"></div>
CSS
.ts {
height:100px;
width:100px;
border-width:10px 10px 20px 10px;
border-style:solid;
border-color:#f00 #f00 #ddd #f00;
}
当我使用上面的代码创建它时,它看起来像这样
但我不希望底边作为对角线,我想要它;
有没有一种简单的方法可以像crossbrowser那样做？
解决方法
只需使用
css box-shadow如下：
HTML
<div class="ts"></div>
CSS
.ts {
height:100px;
width:100px;
border-width:10px 10px 0px 10px;
border-style:solid;
border-color:#f00 #f00 transparent #f00;
Box-shadow: 0 20px 0 #ddd;
}
或仅限盒子阴影：
.ts {
height: 100px;
width: 100px;
Box-shadow: inset 0 10px 0 0 #f00,inset 10px 0 0 0 #f00,inset -10px 0 0 0 #f00,0 20px 0 #ddd;
}
使用CSS3 PIE,在IE7和IE8的旧版本中模拟一些文本阴影.