Home > Web Front-end > HTML Tutorial > CSS凹型导航按钮_html/css_WEB-ITnose

CSS凹型导航按钮_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:17:43
Original
1470 people have browsed it

一般需求,圆角看起来更加舒服,但是下面直角略显生硬

于是设计师有了下面的需求,下面加上小凹型:

凹型?凹型?凹型?有点变态,这怎么实现...........

图片肯定是最先考虑到的,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>
Copy after login

  再看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%); }
Copy after login

  

  so,这样,是不是也没有什么难度,轻松搞定。

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template