HTML CSS框容器

我有一个盒子，如下图所示

我想以模块化的方式编写代码，这样我就可以使用html css结构来构建任意大小的框（宽度和高度）。我将使用引导代码的网站

---

哪一种是开始的最佳方式。

假设顶部的渐变名为gradient.png

.box {
    border: 1px solid gray;
    border-radius: 3px;
    background: white url("gradient.png") ;
    background-repeat: repeat-y;
    padding-top: 20px;
}

我认为这基本上是不言自明的；repeat-y仅使其在顶部重复，而不是在图像的其余部分重复。填充使文本不从顶部开始。看看它是如何为你工作的

---

顺便问一下，这是Apple Discussion页面上的吗？

如果您愿意尝试jQuery ui，您可以简单地使用dialog来实现您想要的，这里是带有更多信息的链接

---

我尽量使它与您的示例保持类似，就像我使用直接CSS一样。如果采用这种方法，您将无法在IE8及更低版本中找到即时支持

框本身的标记非常简单：

<div id="modal">
  <header><h1>Something Here</h1></header>
  <section>
    <p>Pellentesque habitant morbi tristique...</p>
  </section>
</div>

这里有东西
佩伦茨克居民莫比·特里斯蒂克

此标记的CSS可以在下面的预览图像下面找到

演示：

文章、旁白、数字、页脚、页眉、H组、，
菜单，导航，部分{显示：块；}
#模态{
宽度：600px；
边框：1px实心#CCC；
盒影：0 1px 5px#CCC；
边界半径：5px；
字体系列：verdana；
保证金：25像素自动；
溢出：隐藏；
}
#模态头{
背景#f1f1；
背景图像：-webkit线性渐变（顶部，#f1f1，#CCC）；
背景图像：-ms线性梯度（顶部，#f1f1，#CCC）；
背景图像：-莫兹线性梯度（顶部，#f1f1，#CCC）；
背景图像：-o-线性梯度（顶部，#f1f1，#CCC）；
盒影：0 1px 2px#888；
填充：10px；
}
#模态h1{
填充：0；
保证金：0；
字体大小：16px；
字体大小：正常；
文本阴影：0 1px 2px白色；
颜色：#888；
文本对齐：居中；
}
#模态剖面{
填充：10px 30px；
字体大小：12px；
线高：175%；
颜色：#333；
}

没有。在其中一个站点中发现它是一个UI元素集。此外，这将有助于跨浏览器CSS-这不是一个对话框。它更像是一个容器。@Harsha M V理论上你可以将它用作一个容器，只需将draggable设置为false，并设置装载位置

<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
  #modal {
    width: 600px;
    border: 1px solid #CCC;
    box-shadow: 0 1px 5px #CCC;
    border-radius: 5px;
    font-family: verdana;
    margin: 25px auto;
    overflow: hidden;
  }
  #modal header {
    background: #f1f1f1;
    background-image: -webkit-linear-gradient( top, #f1f1f1, #CCC );
    background-image: -ms-linear-gradient( top, #f1f1f1, #CCC );
    background-image: -moz-linear-gradient( top, #f1f1f1, #CCC );
    background-image: -o-linear-gradient( top, #f1f1f1, #CCC );
    box-shadow: 0 1px 2px #888;
    padding: 10px;
  }
  #modal h1 {
    padding: 0;
    margin: 0;
    font-size: 16px;
    font-weight: normal;
    text-shadow: 0 1px 2px white;
    color: #888;
    text-align: center;
  }
  #modal section {
    padding: 10px 30px; 
    font-size: 12px;
    line-height: 175%;
    color: #333;
  }
</style>