如何创建一个带有彩色“标题区域”的框，该框在底部有阴影，就像本网站右侧边栏上的示例一样：本网站上带有标题的框
本网站使用图像来创建此效果。我想使用纯 CSS3 和 HTML5 来实现这一点。
我试过在谷歌上找这个，但我在任何地方都找不到。我假设我称它为错误的东西，这就是为什么我找不到它。另外，我尝试过使用包含两个单元格的表格，但效果不佳，我无法正确创建或放置阴影。
我希望我的盒子与示例完全相同，只是我会更改颜色。
我真的很感激我能得到的任何帮助。
问问题
6245 次
3 回答
0
如果您想使用 CSS3 制作此效果，请使用box-shadow.
例如，检查小提琴：
更多文档检查此链接，它帮助了我！
http://css-tricks.com/snippets/css/css-box-shadow/
玩得开心！
于 2013-10-31T01:38:06.800 回答
0
试试这个代码
<!DOCTYPE html>
<html>
<head>
<style>
#nav{
width:950px;
height:50px;
float:left;
position:relative;
background:#F4F4F4;
background:linear-gradient(top,#FFF,#F4F4F4);
background:-moz-linear-gradient(top,#FFF,#F4F4F4);
background:-o-linear-gradient(#FFF,#F4F4F4);
background:-webkit-gradient(linear,left top,left bottom,from(#FFF),to(#F4F4F4));
box-shadow: 0px 1px 7px rgba(0, 0, 0, 0.21);
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#444444')";
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#CCCCCC');
}
#nav ul{
list-style-type:none;
margin:0;
width:910px;
padding:0px;
padding-left:30px;
float:left;
}
#nav ul li{
display:inline;
}
#nav ul li a{
text-decoration:none;
color:#06C;
padding:8px;
padding-left:25px;
padding-right:25px;
font-family: 'Lucida Sans Unicode','Lucida Grande',Helvetica,Arial,sans-serif;
font-size:16px;
text-align:center;
font-weight:bold;
float:left;
margin:5px;
}
#nav ul li a:hover{
color:#FFF;
background:#666;
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a >Home</a></li>
<li><a >Profile</a></li>
<li><a >About</a></li>
<li><a>Contact US</a></li>
</ul>
</div>
让我知道它是否适合你。
于 2013-10-31T01:30:50.483 回答