Html 使用带有CSS的图像构建产品框

我在Photoshop中设计了一个非常基本的外观框，我想用它来显示产品的内部信息。它基本上由标题、主体和按钮（每个都是单独的图像）组成，看起来像下图

如何使用CSS/HTML将这些内容组合在一起？我只需要在顶部框中显示标题文本，在主体区域中显示项目符号，但不确定如何从图像文件中实际构建它

我知道HTML看起来是这样的，我只是对如何实际构建框感到困惑，比如堆叠图像并将按钮覆盖在主体上的那个位置

<div id="product_box">
    <div id="header">Title Here</div>

    <div id="body">
        <ul>
            <li>Point here</li>
            <li>Point here</li>
            <li>Point here</li>
        </ul>
    </div>

    <div id="button></div>
</div>

标题在这里

指向这里
指向这里
指向这里

我们来看看：


您不必更改
html
标记，只需使用
css
：

以下是相关CSS：

#product_box{
    border:2px solid #bbc;
    border-radius:15px;
    display:block;
    width:50%;
    height:100%;
    position:relative;
    box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
    padding:0px; !important
    background: #b5bdc8; /* Old browsers */
    /* Gradient */
    background: -moz-linear-gradient(top,  #b5bdc8 0%, #828c95 36%, #28343b 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b5bdc8), color-stop(36%,#828c95), color-stop(100%,#28343b)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #b5bdc8 0%,#828c95 36%,#28343b 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #b5bdc8 0%,#828c95 36%,#28343b 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #b5bdc8 0%,#828c95 36%,#28343b 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #b5bdc8 0%,#828c95 36%,#28343b 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5bdc8', endColorstr='#28343b',GradientType=0 ); /* IE6-9 */

   }
#header{
    background:#aaf;
    width:100%;
    height:50px;
    border:0px;
    border-bottom:1px solid #99b;
    padding-top:15px;
    padding-bottom:15px;
    border-radius:5px;
    background: #b5bdc8; /* Old browsers */
    /* gradient */
    background: -moz-linear-gradient(top,  #b5bdc8 0%, #828c95 36%, #28343b 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b5bdc8), color-stop(36%,#828c95), color-stop(100%,#28343b)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #b5bdc8 0%,#828c95 36%,#28343b 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #b5bdc8 0%,#828c95 36%,#28343b 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #b5bdc8 0%,#828c95 36%,#28343b 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #b5bdc8 0%,#828c95 36%,#28343b 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5bdc8', endColorstr='#28343b',GradientType=0 ); /* IE6-9 */

  }
#body{
 padding-bottom:15px;   
}
#button{
    background:#756;
    border:1px solid #645;
    display:block;
    width:150px;
    height:50px;
    border-radius:5px;
    position:absolute;
    bottom:-25px;
    right:33%;
    color:#fff;
    box-shadow:5px 5px 5px rgba(0,0,0,0.4);
    text-align:center;
    font-weight:bolder;
    font-size:15px;
    background: #b5bdc8; /* Old browsers */
    /* Gradient */
    background: -moz-linear-gradient(top,  #b5bdc8 0%, #828c95 36%, #28343b 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b5bdc8), color-stop(36%,#828c95), color-stop(100%,#28343b)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #b5bdc8 0%,#828c95 36%,#28343b 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #b5bdc8 0%,#828c95 36%,#28343b 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #b5bdc8 0%,#828c95 36%,#28343b 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #b5bdc8 0%,#828c95 36%,#28343b 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5bdc8', endColorstr='#28343b',GradientType=0 ); /* IE6-9 */
}
div{
     text-align:center;
     color:#fff;
     font-weight:bold;
}

这是它的输出：



编辑

根据您的评论，此处更新了代码：


其输出：



希望有帮助。
只需使用HTML/CSS即可

使用CSS渐变

以下是查看CSS代码将有所帮助的方法。这就是我如何实现你想要的：

将div元素设置为框的所需高度。根据需要应用边界和边界半径属性，边界可能为2像素，半径为10-15像素

获取标题图像，并将其裁剪为1像素宽（以节省内存）。然后设置一个div元素，并使用这个1像素宽的图像作为背景，重复x，但不重复y。将标题的高度设置为渐变图像的高度

然后，在容器div内制作另一个div。拍摄第二个渐变图像，再次将其缩小到1像素宽。使用repeat-x将其设置为该div的背景。必须将收割台div的高度设置为收割台高度与容器高度之差

然后，您的按钮可以作为链接放置，可能位于另一个div元素中

所有这些都可以按如下方式进行编码：

CSS:

以及HTML：

<div class="container">
<div class="header">text here</div>
<div class="content"><\div>
<div class="button></div>
</div>


此处文本
谢谢分享你的HTML，我们也需要你的CSS…不要使用图像，你应该只使用HTML/CSS来构建它。我喜欢圆角和渐变外观，尽管我可以通过使用图像来实现，为什么我选择了它。我只需要知道如何将它们组合在一起，比如我为您准备了一些HTML/CSS示例，拿着它运行-看起来很棒，我不知道它可以在CSS中复制得这么好。唯一的问题是头部底部有圆角，而顶部似乎不合适。CSS中的这些角设置在哪里？底部的角可以删除吗？当然可以！只需查看css中的
边界半径
属性。您可以使用
边框左上角半径
等为各个角设置它。其中，
top left
表示应用了
css
的容器的最左上角。@BrettPowell更新了我的答案。这看起来不错，但底部按钮的位置似乎取决于列表点中的内容，如果文本较短/较长，则会失去位置。没有办法将其保持在原位吗？按钮确实会根据内容移动，您可以尝试添加/删除内容。
<div class="container">
<div class="header">text here</div>
<div class="content"><\div>
<div class="button></div>
</div>