css案例学习之span边框实现的特殊效果
bottom left
bottom right
top left
top right
配合颜色来使用,实现一些神奇的效果
#menu a span{height:0;width:0;/*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:0;left:0;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 0 0 1px; }#menu a span{height:0;width:0;border-bottom:solid 6px #c00;border-left:solid 6px #fff;position:absolute;top:0;left:0;overflow:hidden;}#menu a:hover{background-color: #F90;color:#333}#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基础学习-背景、边框的学习
CSS基础学习-背景.边框的学习 背景属性 属性 描述 background 简写属性,作用是将背景属性设置在一个声明中. background-attachment 背景图像是否固定或者随着页面的其 ...
- html并集选择器怎么写,css案例学习之并集选择器
代码 并集选择器 h1, h2, h3, h4, h5, p{ /*并集选择器*/ color:purple; /* 文字颜色 */ font-size:15px; /* 字体大小 */ } h2.s ...
- css案例学习之div与span的区别
代码: <html> <head> <title>div 标记范例</title> <style type="text/css" ...
- css案例学习之继承关系
代码 <html> <head><title>继承关系</title><style> body{color:blue; /* 颜色 */te ...
- css案例学习之按钮超链接
效果 css实现 <html> <head> <title>按钮超链接</title> <style>a{ /* 统一设置所有样式 */fo ...
- css案例学习之全局声明*{} 与body{}的区别
代码 <html> <head> <title>全局声明</title> <style type="text/css"> ...
- css案例学习之relative与absolute
代码 <!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.or ...
- css案例学习之id要唯一
ID有两个的后果 <html> <head> <title>ID选择器</title> <style type="text/css&qu ...
- css案例学习之并集选择器
代码 <html> <head> <title>并集选择器</title> <style type="text/css"> ...
最新文章
- 借助队列解决Josephus问题
- Java中的初始化顺序
- 0.11内核rd_load@ramdisk.c中memcpy函数好像有bug
- 机器学习实战(十)利用K-means算法对未标注数据分组
- 当你在应用机器学习时你应该想什么
- (王道408考研操作系统)第五章输入/输出(I/O)管理-第一节5:假脱机(SPOOLing)技术
- 算法导论 思考题6-3(Young氏矩阵)
- 画出清明上河图的代码_制作阴影立体动态图文图的代码【清明上河图】
- 两角和正切的展开式+正切公式+一元微积分
- 1223 Dice Roll Simulation
- 作品交流:调制解调-勘误情况
- 告诉一个远程团队协作的故事
- 74cms|骑士cms|开源招聘系统,目录结构
- 03.服务限流实现方案
- 【计算机网络】DNS域名解析
- mac 用户 文件夹 权限_Mac修改账户名称和个人目录后,进不去系统怎么办?
- 图片爬虫——unsplash爬虫
- python爬取国家统计局2019年行政区划分数据
- 智能电视 屏幕测试软件,详解如何使用液晶电视测试软件
- 下载Bing首页图片最简教程
热门文章
- ceph学习之pool
- 【leetcode】Path Sum II
- Hibernate的事件机制
- mysql有没有num_mysql_num_rows()函数
- Lombok中@Data注解 @ToString注解 @NoArgsConstructo注解 @AllArgsConstructor注解
- HashSet和LinkedHashSet使用
- 信息系统 项目十大管理和五大过程
- DSX2-5000 CH测试结果使用福禄克LinkWare Live软件的好处
- Java技术:serialVersionUID作用介绍
- 后端技术:SpringBoot配置热加载工具(devtools)笔记