css3切角文本框_CSS3+jQuery制作切角的Tabs

今天在Red阅读了一篇《CSS3 tabs with beveled corners》博文，介绍了使用CSS3制作切角的Tabs，觉得特有意思。其中含量最高的并不是其如何实现的Tabs，而是其中如何使用CSS3来制作切角效果，如：

随着Web技术的日新月异，CSS3的技术也越来越多的出现于Web的页面中了，大家目前看到的最多就是圆角Border-radius技术。今天主要和大家一起跟随Red来学习如何使用CSS3的Gradients技术来制作切角效果。下面我们先来看其效果的实现过程，今天我们主要关注的一点——CSS3的Gradients制作切角。

HTML Markup

• Tab1
• Tab2
• Tab3
• Tab4

content for tab1

content for tab2

content for tab3

content for tab4

和往常一样，第一步的目的就是创建一个清洁而又有语义的HTML结构，这里我们使用ul来制作Tabs的每一项，而使用div来制作相对应的内容块。

CSS Code

有子一个好的完整的结构，需要给他应用一个样式，具体请看代码：

.uiTabs {

overflow: auto;

width: 100%;

margin: 0;

padding: 0;

}

.uiTabs li {

margin: 0;

padding: 0;

float: left;

list-style: none outside none;

}

.uiTabs 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;

}

.uiTabs 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);

}

.uiTabs a:focus{

outline: 0;

}

.uiTabs a.current {

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;

}

#uiTabContent{

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;

color: #444;

}

上面的样式中，我们使用了好多个CSS3的属性，比如border-radius制作圆角，box-shadow制作阴影、text-shadow制作文字阴影、gradient制作背景等等，如果你对CSS3有浓厚的兴趣，你可以点击这里阅读更多有关于CSS3的知识。

jQuery Code

现在样式之类都完成了，我们需要完成的是功能，也就是Tabs的功能，点击了就会隐藏相对应的内容，比如说你点了"tab1"对应显示“content for tab1”，当然也有“hover”下的效果，下在我们一起来看这两种效果的jQuery如何写。

1、Click效果：

$(document).ready(function(){

//载入页面时，只显示第一个uiTabContent，其他隐藏

$('#uiTabContent div:not(:first)').hide();

//给tabs绑定click事件

$('.uiTabs a').click(function(e){

//将a.current中的类名移除

$('.current').removeClass('current');

//点击的a元素加上类名current

$(this).addClass('current');

//uiTabContent内容隐藏起来

$('#uiTabContent div').hide('fast');

var $showContent = $(this).attr('title');

//显示对标签对应的内容

$('#' + $showContent).show('fast');

e.preventDefault();

});

});

2、hover效果

$(document).ready(function(){

$('#uiTabContent div:not(:first)').hide();

$('.uiTabs a').hover(function(){

if ($(this).hasClass('current')) return;

$('.current').removeClass('current');

$(this).addClass('current');

$('#uiTabContent div').hide('fast');

var $showContent = $(this).attr('title');

$('#' + $showContent).show('fast');

});

});

上面jQuery的效果可能代码写得不理想，对于jQuery或js的高手而言，但目前偶只能写到这样的水平，高手见笑了，有更好的方法，小生更是求之不得呀。

如果运行上面的代码，效果就能在浏览器看到了，上面的代码在各浏览器下都能正常运行，唯一不同的是其外观有所不同，主要是因为浏览器对CSS的支持不一样。

现在效果出来了，大家肯定会问，不是说要看如何制作切角效果吗？怎么没有看见呢，是的，其实我们的切角效果就是使用CSS3的gradient制作的。下面我们一起来看看是如何制作？

实现切角效果，主要运用了CSS3的gradient的线性渐变的旋转角度，大家可以看前面我们在其中运用到的代码：

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);

Test Beveled right top

test Beveled

test Round

CSS Code

/*Beveled corners & negative border-radius with CSS3 gradients*/

.gradientDemo div {

width: 200px;

height: 150px;

line-height: 150px;

text-align: center;

margin: 20px auto;

}

.beveledRT {

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);

}

.beveled {

background: #c00; /* fallback */

background:

-moz-linear-gradient(45deg, transparent 10px, #c00 10px),

-moz-linear-gradient(135deg, transparent 10px, #c00 10px),

-moz-linear-gradient(225deg, transparent 10px, #c00 10px),

-moz-linear-gradient(315deg, transparent 10px, #c00 10px);

background:

-o-linear-gradient(45deg, transparent 10px, #c00 10px),

-o-linear-gradient(135deg, transparent 10px, #c00 10px),

-o-linear-gradient(225deg, transparent 10px, #c00 10px),

-o-linear-gradient(315deg, transparent 10px, #c00 10px);

background:

-webkit-linear-gradient(45deg, transparent 10px, #c00 10px),

-webkit-linear-gradient(135deg, transparent 10px, #c00 10px),

-webkit-linear-gradient(225deg, transparent 10px, #c00 10px),

-webkit-linear-gradient(315deg, transparent 10px, #c00 10px);

}

.round {

background:

-moz-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),

-moz-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),

-moz-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),

-moz-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);

background:

-o-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),

-o-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),

-o-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),

-o-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);

background:

-webkit-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),

-webkit-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),

-webkit-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),

-webkit-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);

}

.beveled,

.round {

background-position: bottom left, bottom right, top right, top left;

-moz-background-size: 50% 50%;

-webkit-background-size: 50% 50%;

background-size: 50% 50%;

background-repeat: no-repeat;

}

效果大家可以点击DEMO查看：

最后在次非常感谢Red和Lea Verou给我们带来这么好的东东。同时希望您能喜欢这篇文章，如果您有任何疑问，意见或建议可以直接和我联系或通过下面的评论给我留言。我会第一时间与您一起探讨相关方面的知识，最后在次感谢您对W3CPLUS的关注。

如需转载烦请注明出处：W3CPLUS