从零开始学 Web 之 CSS3（四）边框图片，过渡

时间 2019-11-17

标签开始 web css3 css 边框图片过渡栏目 HTML 繁體版

原文原文链接

你们好，这里是「从零开始学 Web 系列教程」，并在下列地址同步更新......css

github：https://github.com/Daotin/Web

微信公众号：Web前端之巅

博客园：http://www.cnblogs.com/lvonve/

CSDN：https://blog.csdn.net/lvonve/

在这里我会从 Web 前端零基础开始，一步步学习 Web 相关的知识点，期间也会分享一些好玩的项目。如今就让咱们一块儿进入 Web 前端学习的冒险之旅吧！html

1、边框图片

边框图片：就是给边框加图片背景。前端

咱们以前加的边框都是纯颜色的边框，那么咱们怎么给边框加图片呢？git

原理：把一张图片分红九宫格的形式，而后一一对应到须要添加边框的元素上。github

而且，添加边框图片是以背景的方式添加的，因此会有可能文字覆盖在边框的状况，后面也会介绍处理方法。web

语法：浏览器

/* border-image-source:能够指定边框图片的路径,默认只是填充到容器的四个角点 */
border-image-source: url("../images/border1.png");

/* border-image-slice:设置四个方向上的裁切距离, fill:作内容的内部填充 */
border-image-slice: 27 fill;
/* 若是四个边框的宽度不一样，能够设置4个值*/
border-image-slice: 27 10; /*左右27 上下10*/
border-image-slice: 27 20 15 5 fill; /*左27 下20 右15 上5*/

/*border-image-width:边框图片的宽度。若是没有设置这个属性，那么宽度默认就是元素的原始的边框宽度。
细节：
1.边框图片的本质是背景，并不会影响元素内容的放置  
2.内容只会被容器的border和padding影响
建议：通常将值设置为原始的边框的宽度*/
border-image-width: 27px;

/*border-image-outset:扩展边框：将边框扩大，可是会影响元素的大小，box-sizing也不可挽回，建议不使用。*/
border-image-outset: 0px;

/*border-image-repeat:
repeat:直接重复平铺，可能有不完整的图像
round:将内容缩放进行完整的重复平铺
stretch:将内容拉伸（此为默认值）*/
border-image-repeat: round;

以上的内容能够连写（注意有的属性须要用 / 分隔）：微信

/*border-image: source slice / width / outset repeat;*/
border-image: url("../images/border1.png") 27 fill / 27px / 0px round;

案例：QQ气泡

咱们在发QQ消息的时候，能够选择不少不一样的气泡样式，并且当咱们发消息的时候，无论文字的多少，气泡边框的样式不变，而只是中间内容的填充。若是只是简单的气泡拉伸的话，边角就会变得丑陋，因此就须要用到边框图片的技术。函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: auto;
            margin:10px auto;
            border: 20px solid red;
            border-image: url("./images/timg.jpg");
            border-image-slice: 20 fill;
            border-image-width: 20px;
            border-image-outset: 0px;
            border-image-repeat: stretch;
        }
    </style>
</head>
<body>
    <div>你好，在么？</div>
    <div>在的</div>
</body>
</html>

2、过渡

经过过渡 transition,咱们能够在不使用 Flash 动画或 JavaScript 的状况下，当元素从一种样式变换为另外一种样式时为元素添加效果。学习

要实现这一点，必须规定两项内容：

1.规定但愿把效果添加到哪一个 CSS 属性上；
2.规定效果的时长。

一、基本语法

/*1.transition-property:添加过渡效果的样式属性名称*/
transition-property: left;

/*2.transition-duration:过渡效果的耗时 以秒作为单位*/
transition-duration: 2s;

/*3.transition-timing-function:设置时间函数--控制运动的速度*/
transition-timing-function: linear;
/*
参数说明：
steps(n)：n表明次数，就是动画分几回走完。（好比秒针的走动）
linear：规定以相同速度开始至结束的过渡效果。
ease：规定慢速开始，而后变快，而后慢速结束的过渡效果。
ease-in：规定以慢速开始的过渡效果。
ease-out：规定以慢速结束的过渡效果。
ease-in-out：规定以慢速开始和结束的过渡效果。
*/

/*4.transition-delay:过渡效果的延迟，间隔多少时间后才开始动画。*/
transition-delay: 2s;

注意：添加过渡效果:过渡效果执行完毕以后，默认会还原到原始状态。

二、连写样式

transition: property duration timing-function delay;

参数说明：

property：属性名称

duration：过渡时间

timing-function：时间函数

delay：延迟时间

为多个样式同时添加过渡效果：（之间用逗号隔开）

transition: left 2s linear 0s,
            background-color 5s linear 0s;

为全部样式添加过渡效果：all：全部样式

transition:all 2s steps(4);

缺点：

全部样式的过渡效果同样。

效率低下，它会去查询全部添加的样式。

建议不要这么写。

三、使用建议

由于 transition 最先是有由 webkit 内核浏览器提出来的，mozilla 和 opera 都是最近版本才支持这个属性，而咱们的大众型浏览器 IE 全家都是不支持，另外因为各大现代浏览器 Firefox,Safari,Chrome,Opera 都还不支持 W3C的标准写法，因此在应用 transition 时咱们有必要加上各自的前缀，最好在最后写上咱们 W3C 的标准写法，这样支持标准写法的浏览器会覆盖前面的写法，只要浏览器支持咱们的 transition 属性，那么这种效果就会自动加上去，如：

-moz-transition: all 1s ease;
-webkit-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease; /*放在最后*/

四、案例：手风琴效果

效果：鼠标放在每一个标签上，会慢慢下拉出详细内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .menu {
            width: 200px;
            height: auto;
            margin: 100px auto;
        }
        .item {
            width: 100%;
            height: auto;
        }
        .item > h3 {
            height: 40px;
            line-height: 40px;
            background-color: rgb(146, 210, 226);
            padding: 5px 0 5px 10px;
            border-bottom: 2px solid #ccc;
        }
        .item > .itemBox {
            width: 100%;
            height: 0;
            background-color: rgb(248, 187, 233);
            overflow: hidden;
        }
        .itemBox > ul {
            list-style: none;
            padding: 10px 10px;
        }
        .item:hover > .itemBox {
            height: 110px;
            transition: height 0.5s;
        }
    </style>
</head>
<body>
    <div class="menu">
        <div class="item">
            <h3>市内新闻</h3>
            <div class="itemBox">
                <ul>
                    <li>深圳超市肉菜档遭抢</li>
                    <li>深圳超市肉菜档遭抢</li>
                    <li>深圳超市肉菜档遭抢</li>
                    <li>深圳超市肉菜档遭抢</li>
                </ul>
            </div>
        </div>
        <div class="item">
            <h3>省内新闻</h3>
            <div class="itemBox">
                <ul>
                    <li>深圳超市肉菜档遭抢</li>
                    <li>深圳超市肉菜档遭抢</li>
                    <li>深圳超市肉菜档遭抢</li>
                    <li>深圳超市肉菜档遭抢</li>
                </ul>
            </div>
        </div>
        <div class="item">
            <h3>国内新闻</h3>
            <div class="itemBox">
                <ul>
                    <li>深圳超市肉菜档遭抢</li>
                    <li>深圳超市肉菜档遭抢</li>
                    <li>深圳超市肉菜档遭抢</li>
                    <li>深圳超市肉菜档遭抢</li>
                </ul>
            </div>
        </div>
        <div class="item">
            <h3>国际新闻</h3>
            <div class="itemBox">
                <ul>
                    <li>深圳超市肉菜档遭抢</li>
                    <li>深圳超市肉菜档遭抢</li>
                    <li>深圳超市肉菜档遭抢</li>
                    <li>深圳超市肉菜档遭抢</li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>