Question

如何创建一个带有彩色“标题区域”的框，底部有阴影，就像本网站右侧边栏上的示例一样：Box with heading on this website

本网站使用图像来创建此效果。我想使用纯CSS3和HTML5来实现这一目标。

我曾尝试在Google上寻找此功能，但我无法在任何地方找到它。我假设我称之为错误，这就是为什么我找不到它。此外，我已经尝试使用带有两个单元格的表格，但它无法正常工作，我无法正确创建或放置阴影。

我希望我的盒子与示例完全相同，只是我会改变颜色。

我真的很感激我能得到的任何帮助。

Answer 1

试试这段代码

    <!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>

让我知道它是否适合你。

Answer 2

如果您想使用CSS3来实现此效果，请使用box-shadow。

例如，检查小提琴：

http://jsfiddle.net/PwerX/

更多文档检查此链接，它帮助了我！

http://css-tricks.com/snippets/css/css-box-shadow/

玩得开心！

Answer 3

我的方法是使用三角形蒙版的边框，下面使用背景渐变。

在codepen

上查看我的代码

The updated version。对于伪元素（:before和:after），您必须为边框创建一些空间（左右为1px）。

请记住，棘手的部分是使用此侧边栏调整宽度。首先要改变的是侧边栏类，然后你应该匹配伪元素:after的边框。

如何使用带有CSS样式的标题创建一个框？

3 个答案: