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

说起来惭愧，这个实例以前看起来的时候，看得莫名其妙，一时云里雾里。于是静下心来仔细研究下，才终于发现这个窍门。这里我们看到的选项卡tabs标题的高度并不是由height来撑起来了，各位firebug就可以知道了，设置的height是为0，然后line-height为30px，其实这个还不是关键，关键在于设计了border-bottom为30px。至于上面的那个斜角效果则是border-right为transparent。鼠标滑过的颜色是通过改变border-bottom-colo来改变的，至于重叠的部分则是用了margin-right为负值。没有:before&:after一样拿下斜角效果。不得不说这又是border的一个杰作，加上上一个实例，不得不感叹我们对于这个border生成三角形的效果运用还是太基础啊，人家这才是高水平的应用。

css主要代码：

#tabs {

overflow: hidden;

width: 100%;

margin: 0;

padding: 0;

list-style: none;

}

#tabs li {

float: left;

margin: 0 -15px 0 0;

}

#tabs a {

float: left;

position: relative;

padding: 0 40px;

height: 0;

line-height: 30px;

text-transform: uppercase;

text-decoration: none;

color: #fff;

border-right: 30px solid transparent;

border-bottom: 30px solid #3D3D3D;

border-bottom-color: #777\9;

opacity: .3;

filter: alpha(opacity=30);

}

#tabs a:hover,

#tabs a:focus {

border-bottom-color: #2ac7e1;

opacity: 1;

filter: alpha(opacity=100);

}

#tabs a:focus {

outline: 0;

}

#tabs #current {

z-index: 3;

border-bottom-color: #3d3d3d;

opacity: 1;

filter: alpha(opacity=100);

}

css3选项卡样式,css3选项卡标题样式设计1相关推荐

html选项卡原理,实用！纯CSS3实现的内容选项卡(Content Tabs)4个实例
之前我做内容选项卡(Content Tabs)的时候,会用到一些小图片来区隔,那样虽然能达到理想的效果,但是维护起来却不太容易,因为需要更改图片.今天我将介绍用纯CSS3实现的内容选项卡(Conten ...
css3新增选择器、伪元素、隐藏元素的方法、visibility: hidden与display：none；的区别、遮罩层效果、三级菜单制作、选项卡制作——css3知识点总结
目录 css3新增选择器兄弟选择器属性选择器伪类选择器其他伪类选择器类元素选择器直接选择器否定选择器伪元素 :after清除浮动 :before和:after 用来写小三角形首字母 ...
css3-1 css3游戏介绍、css3样式和优先级
css3-1 css3游戏介绍.css3样式和优先级一.总结一句话总结:我们写外部css表的时候可以用class,那样使用的人用id修改的话优先级就比我们高,达到目的. 1.html嵌套css样式 ...
css3-5 css3鼠标、列表和尺寸样式怎么用（文字有关的样式会被继承）
css3-5 css3鼠标.列表和尺寸样式怎么用(文字有关的样式会被继承) 一.总结一句话总结:css标签中文字有关的样式会被继承.由常用样式记起. 1.鼠标常用样式有哪些? cursor:poi ...
css3中边框的4种样式
border是CSS的一个属性,用它可以给能确定范围的HTML标签画边框,它可以定义边框线的类型.宽度和颜色,最终可以制作一些特殊效果 css3的边框有4种样式: 1.border-color(边框的 ...
html网页中加五角星,使用css3在网页中实现五角星样式（原理解析）
本篇文章给大家带来的内容是关于使用css3在网页中实现五角星样式,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 我们平时在web网页中看到的各种图形包括正方形,长方形,三角形,圆形等 ...
html 线条样式,HTML5+CSS3从入门到精通线条样式如何设置
本篇教程探讨了HTML5+CSS3从入门到精通线条样式如何设置,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 . < lineWidth: 设置线条的宽度,值是一 ...
第2章第9节：标题设计技巧：制作抖音风格的标题样式 [PowerPoint精美幻灯片实战教程]
您将在本节制作抖音风格的标题样式,首先选择此处的标题文字. 在字号输入框里输入66,以增加文字的尺寸. 点击加粗图标,使所选文字加粗显示. 接着将文字的颜色修改为红色. 使用键盘上的快捷键,复制当前的 ...
CSS3: Media Query实现响应式Web设计
十一长假已然过去了一大半.今天倒真是晴朗的不行,向窗外望去几乎可以看到阳光穿过凉爽的空气一缕缕洒落下来的样子.自从不再是学生,对每年的几次长假就无比珍惜,想方设法让每一天都尽量过的饱满一些:夜里闭上 ...
latex设置一级标题样式不居中_Word应用“样式”的设置
同学们大家好,有时候我们编辑Word文档会遇见多次使用固定某种格式进行排版,比如标题应该用什么字体,多少字号,什么颜色:段落正文方面应该用什么字体以及字号等等.像这种情况,我们可以在Word中创建一个 ...

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

css3选项卡样式,css3选项卡标题样式设计1相关推荐

最新文章

热门文章