HTML – 我可以创建没有对角线的边框底部吗？

发布时间：2020-12-14 19:36:20 所属栏目：资源来源：网络整理

导读：参见英文答案 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 1

参见英文答案 > 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;
}

当我使用上面的代码创建它时,它看起来像这样

但我不希望底边作为对角线,我想要它;

http://jsfiddle.net/3jHG8/

有没有一种简单的方法可以像crossbrowser那样做？

解决方法

只需使用 css box-shadow如下：

JSFIDDLE DEMO 1

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;
}

JSFIDDLE DEMO 2

使用CSS3 PIE,在IE7和IE8的旧版本中模拟一些文本阴影.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!