背景3色的px没有阴影颜色但是网

Question

如何使用此属性创建简单标头：

    .header {
       width: 100%;
       height: 60px;
       background-color: #FFFFFF;
       /* top 12px background-color:  #ce041d*/
       /*  center color is white */
       /* bottom 12px background-color: #e5e5e5 */ 
    }

这张图片？

Answer 1

使用border-top和border-bottom。

.header{
width:100px;
height:40px;
border-top:12px solid #ce041d;
border-bottom:12px solid #e5e5e5;
}

<div class="header"></div>

或者您可以使用两个绝对位置的子元素：

.header{
  width:100px;
  height:40px;
  position:relative;
}
.header .top{
  position:absolute;
  top:0;
  left:0;
  height: 12px;
  width: 100px;
  background-color:#ce041d;
}
.header .bottom{
  position:absolute;
  bottom:0;
  left:0;
  height: 12px;
  width: 100px;
  background-color:#e5e5e5;
}

<div class="header">
   <span class="top"></span>
   <span class="bottom"></span>
</div>

Answer 2

  

解决方案1：使用边框。

＆＃13;

＆＃13;

DELIMITER //
CREATE PROCEDURE yourproc()
BEGIN
    IF condition THEN
        SELECT a,b,c FROM table1;
    ELSE
        SELECT d,e,f FROM table2;
    END IF;
END//
DELIMITER ;  

＆＃13;

CALL yourproc();

＆＃13;

＆＃13;

＆＃13;

  

解决方案2：使用背景渐变

＆＃13;

＆＃13;

.header{
width:100px;
height:40px;
border-top:20px solid #ce041d;
border-bottom:20px solid #e5e5e5;
}

＆＃13;

<div class="header"></div>

＆＃13;

＆＃13;

＆＃13;

  

解决方案3：使用psuedo：after＆amp; ：前

＆＃13;

＆＃13;

.header{
width:100px;
height:40px;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ce041d+11,ffffff+11,ffffff+88,ffffff+90,ffffff+90,ffffff+91,e5e5e5+91 */
background: #ce041d; /* Old browsers */
background: -moz-linear-gradient(top,  #ce041d 11%, #ffffff 11%, #ffffff 88%, #ffffff 90%, #ffffff 90%, #ffffff 91%, #e5e5e5 91%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #ce041d 11%,#ffffff 11%,#ffffff 88%,#ffffff 90%,#ffffff 90%,#ffffff 91%,#e5e5e5 91%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #ce041d 11%,#ffffff 11%,#ffffff 88%,#ffffff 90%,#ffffff 90%,#ffffff 91%,#e5e5e5 91%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ce041d', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */

}

＆＃13;

<div class="header"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您可以通过添加顶部和底部边框来完成此操作。

这样的事情：

 .header {
       width: 100%;
       height: 60px;
       background-color: #FFFFFF;
       border-top: 12px solid #ce041d;
       border-bottom: 12px solid #e5e5e5;
    }

<div class="header">
</div>

CSS Border:

  

border CSS属性是用于设置的简写属性   单个边框属性值在样式中的单个位置   片。 border可用于设置以下一项或多项的值：   border-width，border-style，border-color。