利用滑动门原理制作圆角和渐变色按钮【css】

最新推荐文章于 2021-11-09 00:01:02 发布

Wendy-lxq

最新推荐文章于 2021-11-09 00:01:02 发布

阅读量1.6k

点赞数 2

分类专栏： CSS & CSS3

本文链接：https://blog.csdn.net/u010297791/article/details/53213935

版权

CSS & CSS3 专栏收录该内容

20 篇文章 3 订阅

订阅专栏

在说明方法之前，先看一下效果图：

在border-radius出现之前，实现圆角效果使用的是滑动门。滑动门是利用背景图像的可层叠性，并允许他们在彼此之上进行滑动，以创造一些特殊的效果。

要想让滑动门适用于多种场合，左右两个角必须透明，以此露出背景颜色，若是左右压中间，左右角的透明部分露出的是中间的颜色，所以只能改成中间压左右，中间部分可以重叠，已达到宽度自适应的效果。

切图技巧，可以将按钮的背景图分为三个部分，一个部分是左边带有圆角的部分，一个部分是中间的，最后一个部分是右边带有圆角的部分，然后将三个部分的图拼接成雪碧图，这样可以直接通过定位实现图片的选择。注意：因为要将三个图拼成一张图，所以除了高度一致外，最好宽度也是一样的，效果图如下：

接下来讲解代码的实现部分：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>利用滑动门制作渐变按钮</title>
    <style>
        body,ul,p,h1,h2,h3,h4,dl,dd,form,input,textarea,select {
            padding:0;
            margin:0;
            font-family:arial;
        }
        li {
            list-style:none;
        }
        img {
            border:none;
        }
        a {
            text-decoration:none;
        }
        a:hover {
            text-decoration:underline;
        }
        .box{
            margin:100px auto;
            width: 100%;
            background-color: #970e02;
        }
        #nav{
            width:960px;
            height: 36px;
            margin:0 auto;
            padding-top:8px;
        }
        #nav li{
            float: left;
            height: 28px;
            margin-left:2px;
        }
        #nav a{
            float: left;
            height: 28px;
            text-decoration: none;
            line-height: 28px;
            font-size: 15px;
            font-family:Arial;
            color:#fff;
            text-align: center;
        }
        #nav strong{
            float: left;
            height: 28px;
            font-weight: normal;
        }
        #nav span{
            float: left;
            height: 28px;
            padding:0 16px;
        }
        #nav a:hover,#nav .active a{
            background:url("../images/nav_active_bg.png") repeat-x 0 -56px;
        }
        #nav strong:hover,#nav .active strong{
            background: url("../images/nav_active_bg.png") no-repeat;
        }
        #nav span:hover,#nav .active span{
            background: url("../images/nav_active_bg.png") no-repeat right -28px;
        }
    </style>
</head>
<body>
<div class="box">
    <ul id="nav">
        <li class="active"><a href="#"><strong><span>HOME</span></strong></a></li>
        <li><a href="#"><strong><span>LATEST ARRIVALS</span></strong></a></li>
        <li><a href="#"><strong><span>MEN'S</span></strong></a></li>
        <li><a href="#"><strong><span>WOMEN'S</span></strong></a></li>
        <li><a href="#"><strong><span>KIDS</span></strong></a></li>
        <li><a href="#"><strong><span>BRANDS</span></strong></a></li>
        <li><a href="#"><strong><span>SALE</span></strong></a></li>
        <li><a href="#"><strong><span>GIFT CARDS</span></strong></a></li>
        <li><a href="#"><strong><span>FREEBIES</span></strong></a></li>
    </ul>
</div>
</body>
</html>

为了方便，所以直接将css样式放在了html文件中，平时在写代码的过程中最好能有外联样式表，这样修改和看代码比较容易。

本案例中用滑动门实现圆角和渐变色的按钮的原理是：将标签a包围标签strong和span，因为层级的关系，a的层级是在最下面，那么当strong和span的层级可以覆盖a标签，所以就是将a标签的背景图片置为按钮中间可以重叠的部分，然后沿着x轴进行重复，strong标签的背景图片置为左边圆角的部分，span标签的背景图片置为右边圆角的部分，这样就可以左右圆角覆盖中间的部分，实现按钮的基本样式。这个过程中还有最重要的一点是，需要将a strong span的float都写成left，这样才不会出现中间有缝隙。

如果span中的内容越长，那么内容就会撑开按钮的宽度，自让而然的就让按钮自适应了。除此之外，我设置了鼠标经过事件和激活事件，即当鼠标经过按钮的时候，按钮就会出现如图所示的效果。

另外需要说的一点是，如何定位雪碧图的位置。background的定位其实是position，这个定位的方法有两种，一种是具体的数值，一种是直接用位置的英文拼写，在之前的文章中也写到了这个属性的使用方法，详情请看HTML5基础之代码入门。position的定位是通过x和y轴的位置进行定位的。如下所示，

x: left center right

y: top center bottom

或者

x: ##px

y: ##px

Wendy-lxq

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
利用滑动门原理制作圆角和渐变色按钮【css】

在说明方法之前，先看一下效果图：在border-radius出现之前，实现圆角效果使用的是滑动门。滑动门是利用背景图像的可层叠性，并允许他们在彼此之上进行滑动，以创造一些特殊的效果。要想让滑动门适用于多种场合，左右两个角必须透明，以此露出背景颜色，若是左右压中间，左右角的透明部分露出的是中间的颜色，所以只能改成中间压左右，中间部分可以重叠，已达到宽度自适应
复制链接

扫一扫