CSS凹型导航按钮
一般需求,圆角看起来更加舒服,但是下面直角略显生硬
于是设计师有了下面的需求,下面加上小凹型:
凹型?凹型?凹型?有点变态,这怎么实现...........
图片肯定是最先考虑到的,CSS实现有貌似有一定难度.......
别怕,咋们遇难而上,go go...
先上html结构,这个很简单,没什么可以说明的:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<title>css凹型导航</title> </head>
<body>
<nav id="nav">
<ul>
<li>
<div class="left"></div>
<div class="con">导航1</div>
<div class="right"></div>
</li>
<li>
<div class="left"></div>
<div class="con">导航2</div>
<div class="right"></div>
</li>
<li>
<div class="left"></div>
<div class="con">导航3</div>
<div class="right"></div>
</li>
<li>
<div class="left"></div>
<div class="con">导航4</div>
<div class="right"></div>
</li>
</ul>
</nav>
</body>
</html>
再看CSS
#nav {
background: #fff;
border-bottom: 1px solid #7bd1ff;
width: 960px;
margin: 100px auto;
height: 60px;;
} #nav ul li {
float: left;
list-style: none;
height: 60px;
margin: 0 10px;
} li * {
float: left;
transition: all .2s;
} .con {
width: 60px;
height: 60px;
line-height: 60px;
text-align: center;
background: #7bd1ff;
border-radius: 10px 10px 0 0;
}
/*
设置凹型的尺寸,
通过margin定位
*/
.left, .right {
width: 7px; height: 7px; margin: 53px 0 0 0;
}
/*
下面的是关键,主要是用到了径向渐变 radial-gradient,
通过比例划分实现直接透明过度到背景色,没有渐变
测试结果显示 transparent 50% 并不能一半透明一半有颜色,70%+比较何时
*/
.left { background: -webkit-radial-gradient(top left, circle, transparent 70%, #7bd1ff 30%); }
.right { background: -webkit-radial-gradient(top right, circle, transparent 70%, #7bd1ff 30%); } li:hover .con { background: #2d85ff }
li:hover .left { background: -webkit-radial-gradient(top left, circle, transparent 70%, #2d85ff 30%); }
li:hover .right { background: -webkit-radial-gradient(top right, circle, transparent 70%, #2d85ff 30%); }
so,这样,是不是也没有什么难度,轻松搞定。
CSS凹型导航按钮的更多相关文章
- ul、li实现横向导航按钮
好久没写博客了,主要是懒得呼气都不想呼,上周分给我一个新的任务,就是自己新建一个系统,快速极限开发,虽然之前自己也做过小的系统,但毕竟是自己做,随着自己的心意做,没有做其他的限制等,现在呢是给公司做, ...
- sencha touch TabPanel 加入导航按钮(向左向右按钮) 以及Carousel插件(2014-11-7)
Carousel插件代码: /* * TabPanel的Carousel功能插件 * 取至 * https://github.com/VinylFox/Ext.ux.touch.SwipeTabs * ...
- CSS 自适应导航菜单
文章目录 以前我写了一篇关于如何为自适应网页制作教程手机导航菜单,现在我又摸索出一种无需JS脚本的自适应导航菜单,它采用纯粹的语义化HTML5标签来完成.该菜单可以左对齐,居中或右对齐,也不像上一种方 ...
- 谈谈一些有趣的CSS题目(八)-- 纯CSS的导航栏Tab切换方案
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- css横向导航条
css横向导航条有两种方法 1. ul li a li{float:left} #navlist li, #navlist a{height:44px;display:block;} a{width: ...
- CSS之导航菜单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- css笔记——css 实现自定义按钮
css实现自定义按钮的样式实际上很早就有了,只是会用的人不是很多,里面涉及到了最基础的css写法,在火狐中按钮还是会显示出来,这时需要将i标签的背景设置为白色,同时z-index设置比input高一些 ...
- CSS实现导航条Tab的三种方法
前面的话 导航条Tab在页面中非常常见,本文说详细介绍CSS实现导航条Tab的三种方法 布局 根据上图所示,先规定几个定义,上图的模块整体叫做导航,由导航标题和导航内容组成.要实现上图所示的布 ...
- iOS 添加导航按钮
iOS设置导航按钮navigationBar中包含了这几个重要组成部分:leftBarButtonItem, rightBarButtonItem, backBarButtonItem, title. ...
随机推荐
- Implement Insert and Delete of Tri-nay Tree
问题 Implement insert and delete in a tri-nary tree. A tri-nary tree is much like a binary tree but wi ...
- jquery mobile touch 实例
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...
- Apache虚拟主机的配置
虚拟主机的配置 基于IP地址的虚拟主机配置Listen 80DocumentRoot /www/example1ServerName www.example1.comDocumentRoot /www ...
- flask开发restful api系列(3)--利用alembic进行数据库更改
上面两章,主要讲基本的配置,今天我们来做一个比较有趣的东西,为每个客户加一个头像图片.如果我们图片保存在自己的服务器,对于服务器要求有点高,每次下载的时候,都会阻塞网络接口,要是1000个人同时访问这 ...
- ROW_NUMBER()/RANK()/DENSE_RANK()/ntile() over()
ROW_NUMBER()/RANK()/DENSE_RANK()/ntile() over() 今天女票问我SqlServer的四种排序,当场写了几句Sql让她了解,现把相关Sql放上来. 首先, ...
- HTTP缓存机制梳理
一般只对GET类型请求做缓存,对POST不做缓存 缓存协商 指浏览器和Web服务器之间对于是否使用浏览器端缓存的协商.对于较小的文件内容,由于缓存协商仍需要发送请求,所以吞吐率提高不大:但没有正文传输 ...
- linux 版本家族
1. 简单的说,在桌面系统上,可分为Debian和RedHat两大分支,然后Debian这一分支到现在比较火的是Ubuntu, RedHat比较火的是Fedora.贴一下它们的版本历史: fedor ...
- Linux系统下C++开发工具-远程终端软件使用
通过前面安装Linux系统介绍,紧接着进入搭建Linux开发环境的第二步,选择C++开发工具,以及必要的客户端软件.从而完整的搭建一个Linux下C++开发的环境,便于初学者在该环境下能够很好的学习. ...
- Java Access Levels(访问控制)
Access Levels Modifier Class Package Subclass World public Y Y Y Y protected Y Y Y N no modifier Y Y ...
- programData
以.结束语句输入;