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边框实现的特殊效果的更多相关文章

  1. css案例学习之div与span的区别

    代码: <html> <head> <title>div 标记范例</title> <style type="text/css" ...

  2. css案例学习之table tr th td ul li实现日历

    效果 代码 <html> <head> <title>Calendar</title> <style> <!-- .month { b ...

  3. css案例学习之盒子模型

    定义:每个盒子都有:边界.边框.填充.内容四个属性: 每个属性都包括四个部分:上.右.下.左:这四部分可同时设置,也可分别设置:里的抗震辅料厚度,而边框有大小和颜色之分,我们又可以理解为生活中所见盒子 ...

  4. css案例学习之通过relative与absolute实现带说明信息的菜单

    效果如下 代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...

  5. css案例学习之按钮超链接

    效果 css实现 <html> <head> <title>按钮超链接</title> <style> a{ /* 统一设置所有样式 */ ...

  6. css案例学习之继承关系

    代码 <html> <head> <title>继承关系</title> <style> body{ color:blue; /* 颜色 * ...

  7. CSS 案例学习

    1.样式 display:inline-block;可改变a标签,合其可定义宽高 2.a:hover表示鼠标经过 3.background:url(110.png) bottom 表示:给链接一个图片 ...

  8. css案例学习之用thead、tbody、tfoot实现漂亮的table布局

    首先说说thead.tbody.tfoot <thead> <tbody> <tfoot> 无论前后顺序如何改变, <thead> 内的元素总是在表的最 ...

  9. css案例学习之ul li dl dt dd实现二级菜单

    效果 代码实现 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...

随机推荐

  1. Android的init过程详解（一）（转）

    本文使用的软件版本 Android:4.2.2 Linux内核:3.1.10 本文及后续几篇文章将对Android的初始化(init)过程进行详细地.剥丝抽茧式地分析,并且在其中穿插了大量的知识,希望 ...

  2. log4j日志分模块打印，同时不打印到控制台上

    由于定时刷新程序的启用,导致catalina.out配置文件中打入大量日志,致使程序调试困难.          无法正常查看日志.所以客户要求将性能流量配置日志迁移出catalina.out目录.修 ...

  3. <转载>linux gcc编译器中使用gdb单步调试程序，程序不是顺序执行的。

    原文地址http://blog.csdn.net/abc78400123/article/details/6779108 在用gdb调试,使用s 或n单步执行程序时,发现程序不是按顺序运行的,有时莫名 ...

  4. 构建高性能web站点笔记一

    构建高性能web站点笔记 第三章 服务器并发处理能力 3.1吞吐率 描述服务器在实际运行期间单位时间内处理的请求数.也就是一定并发用户的情况下,服务器处理请求能力的量化体现. 吞吐率的前提包括: 并发 ...

  5. VIm变成sublime (转)

    sublime在ubuntu下始终支持不是很好, 特别是对中文输入的支持,还有一些插件在ubuntu下也不能用. 在ubuntu下还是用vim吧.  我们一起把vim变成sublime. 只需要三步 ...

  6. Unity 屏幕适配小脚本

    屏幕适配是可以通过代码实现的,相信给你时间就一定能写出来. 我们公司貌似没有分辨率适配框架通常对应小屏幕的苹果4要额外设置下等等就完了! 屏幕适配框架实现思路:  通过代码获取当前的分辨率 –> ...

  7. cocos2d-x3.2中怎样优化Cocos2d-X游戏的内存

    在游戏项目优化中都会碰到一个问题,怎样既能降低内存又能尽量降低包的大小?在实际项目中有些经验分享一下,其实2D游戏中最占内存的就是图片资源,一张图片使用不同的纹理格式带来的性能差异巨大.下表是我在IO ...

  8. 1. GDAL与OpenCV2.X数据转换（适合多光谱和高光谱等多通道的遥感影像）

    一.前言 GDAL具有强大的图像读写功能,但是对常用图像处理算法的集成较少,OpenCV恰恰具有较强的图像处理能力,因此有效的结合两者对图像(遥感影像)的处理带来了极大的方便.那么如何实现GDAL与o ...

  9. 利用PHP/MYSQL实现的简易微型博客(转)

    数据库:ly_php_base 表:ly_micro_blog(仅仅有一个表)字段:id,title,date,content,hits 文件: 文件 描述 default.php 默认主页.显示博文 ...

  10. asp.net在后台弹出confirm确认对话框并获取用户选择的值做出相应的操作

    在asp项目中,这种情况是经常出现的,前段时间通过查找资料以及自己尝试,找到一种解决方案,但是不知是否有更好的方案,以后发现再进行记录. 一.思路 在本次项目中,在一个函数中需要让用户判断,并根据用户 ...