css3选项卡样式,css3选项卡标题样式设计2

本实例的tabs斜角效果跟border没有一毛钱关系了，呵呵也跟:before和:after没有关系，却是运用了渐变背景制作的。给了一个角度的渐变，由transparent到红色的220度渐变。然后设置了一个box-shadow的左右偏移为负，使右侧看起来颜色比较深。

css主要代码：

#tabs

{

overflow: auto;

width: 100%;

list-style: none;

margin: 0;

padding: 0;

}

#tabs li

{

margin: 0;

padding: 0;

float: left;

}

#tabs a

{

-moz-box-shadow: -4px 0 0 rgba(0, 0, 0, .2);

-webkit-box-shadow: -4px 0 0 rgba(0, 0, 0, .2);

box-shadow: -4px 0 0 rgba(0, 0, 0, .2);

background: #ad1c1c;

background: -moz-linear-gradient(220deg, transparent 10px, #ad1c1c 10px);

background: -webkit-linear-gradient(220deg, transparent 10px, #ad1c1c 10px);

background: -ms-linear-gradient(220deg, transparent 10px, #ad1c1c 10px);

background: -o-linear-gradient(220deg, transparent 10px, #ad1c1c 10px);

background: linear-gradient(220deg, transparent 10px, #ad1c1c 10px);

text-shadow: 0 1px 0 rgba(0,0,0,.5);

color: #fff;

float: left;

font: bold 12px/35px 'Lucida sans', Arial, Helvetica;

height: 35px;

padding: 0 30px;

text-decoration: none;

}

#tabs a:hover

{

background: #c93434;

background: -moz-linear-gradient(220deg, transparent 10px, #c93434 10px);

background: -webkit-linear-gradient(220deg, transparent 10px, #c93434 10px);

background: -ms-linear-gradient(220deg, transparent 10px, #c93434 10px);

background: -o-linear-gradient(220deg, transparent 10px, #c93434 10px);

background: linear-gradient(220deg, transparent 10px, #c93434 10px);

}

#tabs a:focus

{

outline: 0;

}

#tabs #current a

{

background: #fff;

background: -moz-linear-gradient(220deg, transparent 10px, #fff 10px);

background: -webkit-linear-gradient(220deg, transparent 10px, #fff 10px);

background: -ms-linear-gradient(220deg, transparent 10px, #fff 10px);

background: -o-linear-gradient(220deg, transparent 10px, #fff 10px);

background: linear-gradient(220deg, transparent 10px, #fff 10px);

text-shadow: none;

color: #333;

}

#content

{

background-color: #fff;

background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd));

background-image: -webkit-linear-gradient(top, #fff, #ddd);

background-image: -moz-linear-gradient(top, #fff, #ddd);

background-image: -ms-linear-gradient(top, #fff, #ddd);

background-image: -o-linear-gradient(top, #fff, #ddd);

background-image: linear-gradient(top, #fff, #ddd);

-moz-border-radius: 0 2px 2px 2px;

-webkit-border-radius: 0 2px 2px 2px;

border-radius: 0 2px 2px 2px;

-moz-box-shadow: 0 2px 2px #000, 0 -1px 0 #fff inset;

-webkit-box-shadow: 0 2px 2px #000, 0 -1px 0 #fff inset;

box-shadow: 0 2px 2px #000, 0 -1px 0 #fff inset;

padding: 30px;

}

/* Remove the rule below if you want the content to be "organic" */

#content div

{

height: 220px;

}