Question

告诉我如何实现这种布局。

我真的没有太多代码可以输入，这个截图是从一个表设计的网站上获取的，使用所有边框的图像，是他们使用CSS3的替代方案吗？一个提示开始将不胜感激。

这是我到目前为止所尝试的内容：

＆＃13;

#content {
  background-color: #141414;
  margin: 24px auto;
  text-align: center;
  width: 75%;
  padding: 20px;
  border-top: 2px #ff0000 solid;
  border-radius: 10px;
  -moz-border-radius: 10px;
  box-shadow: 10px;
}

＆＃13;

<section id="content">
  <article>
    <hgroup>
      <h1>lorem </h1>
      <br />
    </hgroup>
    lorem ipsum
  </article>
</section>

＆＃13;

谢谢！

Answer 1

从我的图像中可以看出，这应该非常接近。但是因为我不知道你打算用它做什么，所以它可能不合时宜。

Fiddle

＆＃13;

body {
    background: #000;
}

.box {
    width: 80%;
    margin: 50px auto;
    background: #222;
    border: 1px solid #444444;
    border-radius: 10px;
    background: #141414;
}

.header {
    height: 40px;
    border-bottom: 1px solid #444444;
    
    background: rgb(68,68,68);
    background: -moz-linear-gradient(top, rgba(68,68,68,1) 0%, rgba(47,47,47,1) 49%, rgba(19,19,19,1) 50%, rgba(1,1,1,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(68,68,68,1)), color-stop(49%,rgba(47,47,47,1)), color-stop(50%,rgba(19,19,19,1)), color-stop(100%,rgba(1,1,1,1)));
    background: -webkit-linear-gradient(top, rgba(68,68,68,1) 0%,rgba(47,47,47,1) 49%,rgba(19,19,19,1) 50%,rgba(1,1,1,1) 100%);
    background: -o-linear-gradient(top, rgba(68,68,68,1) 0%,rgba(47,47,47,1) 49%,rgba(19,19,19,1) 50%,rgba(1,1,1,1) 100%);
    background: -ms-linear-gradient(top, rgba(68,68,68,1) 0%,rgba(47,47,47,1) 49%,rgba(19,19,19,1) 50%,rgba(1,1,1,1) 100%);
    background: linear-gradient(to bottom, rgba(68,68,68,1) 0%,rgba(47,47,47,1) 49%,rgba(19,19,19,1) 50%,rgba(1,1,1,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#444444', endColorstr='#010101',GradientType=0 );
}

.content {
    height: 300px;
    position: relative;
}

.inner_box {
    position: absolute;
    top: 25%;
    bottom: 25%;
    left: 25%;
    right: 25%;
    margin: 0 auto;
    border: 1px solid #969696;
    box-shadow:  inset 0 0 8px rgba(255,255,255,0.4);
    border-radius: 10px;
    background: #0f0f0f;
}

＆＃13;

<div class="box">
    <div class="header"></div>
    <div class="content">
        <div class="inner_box"></div>
    </div>
</div>

＆＃13;

如何在保持最大兼容性的同时使用CSS3实现此内容框

1 个答案: