参见英文答案 >
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; }
当我使用上面的代码创建它时,它看起来像这样
但我不希望底边作为对角线,我想要它;
解决方法
只需使用
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的旧版本中模拟一些文本阴影.
原文地址:https://www.jb51.cc/html/224090.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。