Question

我如何使用纯CSS（没有图像，没有表，没有javascript）创建下面的内容？ alt text http://img530.imageshack.us/img530/3209/divs.png

Answer 1

HTML：

<div class="box">
    <h2>Div Title</h2>
    <p>Div content.</p>
</div>

和CSS：

.box {border:2px solid #0094ff;}
.box h2 {background:#0094ff;color:white;padding:10px;}
.box p {color:#333;padding:10px;}

将CSS3用于边框半径

.box {
    -moz-border-radius-topright:5px;
    -moz-border-radius-topleft:5px;
    -webkit-border-top-right-radius:5px;
    -webkit-border-top-left-radius:5px;
    border-top-left-radius:5px;
    border-top-right-radius:5px;
}

以上代码适用于firefox，safari，chrome，opera（10.5 +）等

现在有奖金demo

Answer 2

HTML：

<div class="myDiv">
  <h2>Div Title</h2>
  <p>Div content.</p>
</div>

CSS：

.myDiv {
  border:2px solid #0094ff;
  -webkit-border-top-left-radius:6px;
  -webkit-border-top-right-radius:6px;
  -moz-border-radius-topleft:6px;
  -moz-border-radius-topright:6px;
  border-top-left-radius:6px;
  border-top-right-radius:6px;
  width:300px;
  font-size:12pt; /* or whatever */
}
.myDiv h2 {
  padding:4px;
  color:#fff;
  margin:0;
  background-color:#0094ff;
  font-size:12pt; /* or whatever */
}
.myDiv p {
  padding:4px; 
}

Demo

Answer 3

除非你真的不关心互联网浏览器的支持，否则你想要的是不可能的。

http://www.the-art-of-web.com/css/border-radius/

Answer 4

正如Fabian所说，你无法在Internet Explorer中完全按照自己的意愿行事。如果您仍然决定在没有任何图像/ javascript的情况下创建它，我强烈建议您使用一些条件语句 - 令人惊讶的数量的人仍然使用Internet Explorer，我有点担心这种解决方案将如何在IE中呈现！

祝你好运 - 这是一个非常好的问题！

Answer 5

使用wiifm的JS Fiddle演示，我在构建日历时想出了一个问题，并希望让日历上的事件更加丰富多彩和动态 - 我希望将DIV作为包含元素，以及H2的时间事件，以及持有事件文本的内部P标签 - 我有一组预先确定的颜色供用户选择，并希望H2的背景颜色与包含元素的边框相同在哪个辅助类上分配给元素。通常，你必须为H2定义一个背景颜色，但是使用这个技巧，它使用包含元素的背景颜色作为虚假背景，因此它节省了必须为此创建一个类，并允许生成的代码要干净得多。这是我所做的一个分叉的JS Fiddle链接。它也适用于IE8！

http://jsfiddle.net/Hsm35/

只是想分享，因为这有助于我找到解决方案。

使用标题标题创建div

5 个答案: