Html 如何使用css样式创建带有标题的框？_Html_Css

Html 如何使用css样式创建带有标题的框？

html css

Html 如何使用css样式创建带有标题的框？,html,css,Html,Css,如何创建一个底部有阴影的彩色“标题区域”框，就像本网站右侧栏上的示例：此网站使用图像创建此效果。我想使用纯CSS3和HTML5来实现这一点我试着在谷歌上寻找这个，但我在任何地方都找不到。我认为我称它为错误的东西，这就是为什么我找不到它。另外，我也尝试过使用一个有两个单元格的表格，但效果不好，我无法正确创建或放置阴影我想我的盒子是完全一样的例子，除了我会改变颜色如果能得到任何帮助，我将不胜感激。试试这段代码 <!DOCTYPE html> <html> &l

如何创建一个底部有阴影的彩色“标题区域”框，就像本网站右侧栏上的示例：

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

我试着在谷歌上寻找这个，但我在任何地方都找不到。我认为我称它为错误的东西，这就是为什么我找不到它。另外，我也尝试过使用一个有两个单元格的表格，但效果不好，我无法正确创建或放置阴影

我想我的盒子是完全一样的例子，除了我会改变颜色

如果能得到任何帮助，我将不胜感激。

试试这段代码

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


#导航{
宽度：950px；
高度：50px；
浮动：左；
位置：相对位置；
背景#f4；
背景：线性梯度（顶部，#FFF，#f4）；
背景：-莫兹线性梯度（顶部，#FFF，#F4）；
背景：-o-线性梯度（#FFF，#F4）；
背景：-webkit渐变（线性、左上、左下、从（#FFF）到（#f4））；
盒影：0px 1px 7px rgba（0,0,0,0.21）；
-ms过滤器：“progid:DXImageTransform.Microsoft.Shadow（强度=4，方向=135，颜色='#444444'）”；
过滤器：progid:DXImageTransform.Microsoft.Shadow（强度=4，方向=135，颜色='#cccc'）；
}
#导航ul{
列表样式类型：无；
保证金：0；
宽度：910px；
填充：0px；
左侧填充：30px；
浮动：左；
}
#李国荣{
显示：内联；
}
#海军ulli a{
文字装饰：无；
颜色：#06C；
填充：8px；
左侧填充：25px；
右边填充：25px；
字体系列：“Lucida Sans Unicode”、“Lucida Grande”、Helvetica、Arial、Sans serif；
字体大小：16px；
文本对齐：居中；
字体大小：粗体；
浮动：左；
保证金：5px；
}
#导航ulli a：悬停{
颜色：#FFF；
背景:#666；
}

家
侧面图
关于
联系我们

让我知道它是否适用于您。

如果您想使用CSS3实现此效果，请使用

框阴影
例如，检查小提琴：

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

玩得开心
 我的方法是使用三角形遮罩的边框，下面使用背景渐变
在上查看我的代码
。对于伪元素（：before
和：after
），必须为边框留出一些空间（左右各1px）
请记住，棘手的部分是使用此侧边栏调整宽度。首先要更改的是侧边栏类，然后您应该匹配伪元素的边框：在
Hi Merstzik之后，您的解决方案正是我想要的。然而，我也想知道如何在它下面创建一个圆角框来放置我的边栏内容？这个解决方案实际上与我所寻找的完全不同。它没有回答这个问题。不管怎样，我感谢你的帮助。