我想创建一个颜色不同的盒子,左,右和顶部颜色为红色,底部颜色为灰色但是我想要平底盒边框
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?
答案 0 :(得分:13)
只需使用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;
}
仅限
或 box-shadow :
.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旧版本中的一些文本阴影。
答案 1 :(得分:-1)
你问的是不可能的。相反,你可以使用这样的东西:
<div class="ts">sample text sample text sample text sample text sample text</div>
.ts {
height:100px;
width:100px;
padding:10px;
border-bottom:10px solid #dfd;
background-color:#f00;
}
希望这有帮助。