css案例学习之span边框实现的特殊效果
bottom left
bottom right
top left
top right
配合颜色来使用，实现一些神奇的效果
#menu a span{
height:;
width:;
/*border-top:solid 6px #fff;
border-left:solid 6px #f90;*/
/*border-top:solid 6px #fff;
border-right:solid 6px #f90;*/
/*border-bottom:solid 6px #fff;
border-left:solid 6px #f90;*/
border-bottom:solid 6px #fff;
border-right:solid 6px #f90;
position:absolute;
top:;
left:;
overflow:hidden;
}
<div id="menu">
<a href="#">
<span class="left"></span>
Home </a>
<a href="#">
<span class="left"></span>
Contact Us </a>
<a href="#">
<span class="left"></span>
Web Dev </a>
<a href="#">
<span class="left"></span>
Web Design </a>
<a href="#">
<span class="left"></span>
Map </a>
</div>
说明：当span的height、width设置为0的时候，配合border的样式，就能实现神奇的边框效果
完整代码如下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head> <style>
#menu {
font-family:Arial;
font-size:14px;
} #menu a, #menu a:visited {
display:block;
float:left;
position:relative;
background-color:#c00;
color:#fff;
text-decoration:none;
padding:6px;
margin:1px 1px;
} #menu a span{
height:;
width:;
border-bottom:solid 6px #c00;
border-left:solid 6px #fff;
position:absolute;
top:;
left:;
overflow:hidden;
} #menu a:hover{
background-color: #F90;
color:#
} #menu a:hover span{
border-bottom:solid 6px #f90;
} </style> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>自适应的水平的菜单</title></head> <body>
<div id="menu">
<a href="#">
<span class="left"></span>
Home </a>
<a href="#">
<span class="left"></span>
Contact Us </a>
<a href="#">
<span class="left"></span>
Web Dev </a>
<a href="#">
<span class="left"></span>
Web Design </a>
<a href="#">
<span class="left"></span>
Map </a>
</div>
</body>
</html>
实现了一种被裁减的感觉
css案例学习之span边框实现的特殊效果的更多相关文章
- css案例学习之div与span的区别
代码: <html> <head> <title>div 标记范例</title> <style type="text/css" ...
- css案例学习之table tr th td ul li实现日历
效果 代码 <html> <head> <title>Calendar</title> <style> <!-- .month { b ...
- css案例学习之盒子模型
定义:每个盒子都有:边界.边框.填充.内容四个属性: 每个属性都包括四个部分:上.右.下.左:这四部分可同时设置,也可分别设置:里的抗震辅料厚度,而边框有大小和颜色之分,我们又可以理解为生活中所见盒子 ...
- css案例学习之通过relative与absolute实现带说明信息的菜单
效果如下 代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...
- css案例学习之按钮超链接
效果 css实现 <html> <head> <title>按钮超链接</title> <style> a{ /* 统一设置所有样式 */ ...
- css案例学习之继承关系
代码 <html> <head> <title>继承关系</title> <style> body{ color:blue; /* 颜色 * ...
- CSS 案例学习
1.样式 display:inline-block;可改变a标签,合其可定义宽高 2.a:hover表示鼠标经过 3.background:url(110.png) bottom 表示:给链接一个图片 ...
- css案例学习之用thead、tbody、tfoot实现漂亮的table布局
首先说说thead.tbody.tfoot <thead> <tbody> <tfoot> 无论前后顺序如何改变, <thead> 内的元素总是在表的最 ...
- css案例学习之ul li dl dt dd实现二级菜单
效果 代码实现 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...
随机推荐
- [科普]MinGW vs MinGW-W64及其它
转载:http://tieba.baidu.com/p/3186234212?pid=54372018139&cid=#54372018139 这里也转一下吧. 部分参照备忘录原文: bitb ...
- kibana 访问IP分布图
- Binary Search Tree BST Template
Use one queue + size variable public class Solution { public ArrayList<ArrayList<Integer>&g ...
- windows多线程同步总结
1.多线程同步与多线程互斥的关系 其实这也是我一直困扰的问题,在这里我只是说说我的理解.我的理解是多线程互斥是针对于多线程资源而言的. 而多线程同步是针对于多线程时序问题.由于线程的并发性导致其运行时 ...
- iOS 推送证书制作 （JAVA/PHP）
// aps_development.cer 转化成pem openssl x509 -in aps_development.cer -inform der -out PushChatCert.pem ...
- 基于MapReduce的SimRank++算法研究与实现
一.算法应用背景 计算广告学(Computational Advertising)是一门广告营销科学,以追求广告投放的收益最大化为目标,重点解决用户与广告匹配的相关性和广告的竞价模型问题,涉及到自然语 ...
- Android应用程序注冊广播接收器（registerReceiver）的过程分析
前面我们介绍了Android系统的广播机制,从本质来说,它是一种消息订阅/公布机制,因此,使用这样的消息驱动模型的第一步便是订阅消息:而对Android应用程序来说,订阅消息事实上就是注冊广播接收器, ...
- 《JavaScript 闯关记》之作用域和闭包
作用域和闭包是 JavaScript 最重要的概念之一,想要进一步学习 JavaScript,就必须理解 JavaScript 作用域和闭包的工作原理. 作用域 任何程序设计语言都有作用域的概念,简单 ...
- jquery css3 手机菜单动画综合版
html <header> <a id="go-back" href="javascript:window.location.back(-1)" ...
- MongoDB学习笔记04
创建索引使用ensureIndex方法,对于同一个集合,同样的索引只需要创建一次,反复创建是徒劳的. 对某个键的索引会加速对该键的查询,然而,对于其它查询可能没有帮助,即便是查询中包含了被索引的键.实 ...