CSS3 动画相关属性实例大全（六)（outline 、outline-color 、outline-offset、outline-width、padding、padding-bottom、padding-left 、padding-right 、padding-top、perspective属性）

本文目录：

一、outline 属性（设置outline元素周围的轮廓）

二、outline-color 属性（设置元素周围的轮廓颜色）

三、outline-offset属性(设置在 border 边缘外的偏移)

四、outline-width属性（指定轮廓的宽度）

五、padding属性（设置元素的内容和边框之间的区域）

六、padding-bottom属性（设置元素的内边距中下方的高度）

七、padding-left 属性（元素在内边距区域中左边的宽度）

八、padding-right 属性（元素在内边距区域中右边的宽度）

九、padding-top属性（元素在内边距区域中上方的宽度）

十、perspective属性（指定了观察者与 z=0 平面的距离）

一、outline 属性（设置outline元素周围的轮廓）

设置outline元素周围的轮廓
outline是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

outline简写属性在一个声明中设置所有的轮廓属性。

可以设置的属性分别是：outline-color, outline-style, outline-width

<div id="animation60">逆境清醒div>

改变 outline 属性：

从 outline: 1px solid black;到 outline: 15px dashed lightblue;

   
二、outline-color 属性（设置元素周围的轮廓颜色）

<div id="animation61">逆境清醒div>

改变 outline-color 属性：从 black 到 lightblue

三、outline-offset属性(设置在 border 边缘外的偏移)

outline-offset属性设置轮廓框架在 border 边缘外的偏移

Outlines在两个方面不同于边框：

• Outlines 不占用空间
• Outlines 可能非矩形

<div id="animation62">逆境清醒div>

改变 outline-offset 属性：从 0 到 100px

四、outline-width属性（指定轮廓的宽度）

outline-width指定轮廓的宽度。
outline是围绕元素。它是围绕元素的边距。但是，它是来自不同的边框属性。

outline不是元素尺寸的一部分，因此元素的宽度和高度属性不包含轮廓的宽度。

<div id="animation63">逆境清醒div>

改变 outline-width 属性：从 5px 到 30px

五、padding属性（设置元素的内容和边框之间的区域）

内边距（padding）是指一个元素的内容和边框之间的区域。
和外边距（margin）不同，
内边距（padding）是不允许有负值的。
内边距（padding）可以用四个值声明一个元素的四个方向的内边距（paddings）

padding:1px 2px 3px 4px;
上边距是 1px
右边距是 2px
下边距是 3px
左边距是 4px

padding:10px 50px 60px;
上边距是 10px
右边距和左边距是 50px
下边距是 60px

padding:10px 50px;
上边距和下边距是 10px
右边距和左边距是 50px

padding:10px;
所有四个边距都是 10px

<div id="animation64">逆境清醒2023年春节祝福第二弹——逆境清醒送你一只守护兔，让它温暖每一个你div>

改变 padding 属性：从 0 到 30px

六、padding-bottom属性（设置元素的内边距中下方的高度）

padding-bottom 是指一个元素在内边距区域（padding area）中下方的高度。

<div id="animation66">逆境清醒2023年春节祝福第二弹——逆境清醒送你一只守护兔，让它温暖每一个你div>

改变 padding-bottom 属性：从 0 到 100px

七、padding-left 属性（元素在内边距区域中左边的宽度）

padding-left 是指一个元素在内边距区域（padding area）中左边的宽度

<div id="animation66">逆境清醒2023年春节祝福第二弹——逆境清醒送你一只守护兔，让它温暖每一个你div>

改变 padding-left 属性：到 50px

八、padding-right 属性（元素在内边距区域中右边的宽度）

padding-right 是指一个元素在内边距区域（padding area）中右边的宽度

<div id="animation67">逆境清醒2023年春节祝福第二弹——逆境清醒送你一只守护兔，让它温暖每一个你div>

改变 padding-right 属性：到 50px

九、padding-top属性（元素在内边距区域中上方的宽度）

padding-top属性 是指一个元素在内边距区域（padding area）中上方的宽度

<div id="animation68">逆境清醒2023年春节祝福第二弹——逆境清醒送你一只守护兔，让它温暖每一个你div> 

改变 padding-top 属性：到 60px

十、perspective属性（指定了观察者与 z=0 平面的距离）

CSS 属性 perspective 指定了观察者与 z=0 平面的距离，使具有三维位置变换的元素产生透视效果。z>0 的三维元素比正常大，而 z<0 时则比正常小，大小程度由该属性的值决定。

三维元素在观察者后面的部分不会绘制出来，即 z 轴坐标值大于 perspective 属性值的部分。

默认情况下，消失点位于元素的中心，但是可以通过设置 perspective-origin 属性来改变其位置。

当该属性值不为 0 和 none 时，会创建新的 层叠上下文。

在这种情况下，容器内元素的层叠关系像是使用了 position: fixed 一样。

标准语法：perspective =   none  |  
none    没有应用 perspective 样式时的默认值。

  指定观察者距离 z=0 平面的距离，为元素及其内容应用透视变换。

当值为 0 或负值时，无透视变换。

    <div class="container">
        <div class="cube pers500">
            <div class="face front">1div>
            <div class="face back">2div>
            <div class="face right">3div>
            <div class="face left">4div>
            <div class="face top">5div>
            <div class="face bottom">6div>
        div>
    div>

perspective 指定了观察者与 z=0 平面的距离，使具有三维位置变换的元素产生透视效果。

z>0 的三维元素比正常大，

而 z<0 时则比正常小，

大小程度由该属性的值决定。

 CSS3 动画相关属性实例大全系列目录：

• 1、CSS3 动画相关属性实例大全（一)（@keyframes ，background属性，border 属性）
• 2、CSS3 动画相关属性实例大全（二)（bottom 、box-shadow、clip、color 、column-count、column-gap、column-rule、column-rule-color、column-rule-width、column-width 属性）
• 3、CSS3 动画相关属性实例大全（三)（columns、filter、flex、flex-basis 、flex-grow、flex-shrink属性）
• 4、CSS3 动画相关属性实例大全（四)（font、height、left、letter-spacing、line-height 属性）
• 5、CSS3 动画相关属性实例大全（五)（margin 、max-height、max-width、min-height、min-width、opacity 、order 属性）
• 6、CSS3 动画相关属性实例大全（六)（outline 、outline-color 、outline-offset、outline-width、padding、padding-bottom、padding-left 、padding-right 、padding-top、perspective属性）
• 7、

CSS3 动画相关属性实例大全（七)（perspective-origin、right、text-decoration-color 、text-indent、text-shadow、top 、transform、transform-origin、vertical-align、visibility 、width、word-spacing、z-index属性）

           推荐阅读：CSS @规则(At-rules)详解系列索引目录

逆境清醒