CSS3新特性

blankです

已于 2022-07-20 19:16:32 修改

阅读量862

点赞数

文章标签：前端

于 2022-04-14 17:07:23 首次发布

本文链接：https://blog.csdn.net/weixin_47782618/article/details/124172379

版权

1. border-radius属性：圆角

利用border-radius属性可以给任何元素添加圆角。

border-radius属性的取值：数字（不可以为负值）或百分比，取值越大，角的弧度越大。

取值为百分比时圆角不平滑，因为取值为百分比时，宽的弧长为（容器的宽*百分比），高的弧长为（容器的高*百分比），如果容器的宽高不一致，那么生成的圆角就不平滑。

百分比的作用：画圆形，先将容器的宽高设为同样的值，再将border-radius属性设置为50%。

border-radius:10px 15px 20px 25px;

四个值：左上角、右上角、右下角、左下角

border-radius:10px 15px 20px;

三个值：左上角、右上角和左下角、右下角

border-radius:10px 15px;

两个值：左上角和右下角、右上角和左下角

border-radius:10px;

一个值：四个角

2. box-shadow属性：盒阴影

box-shadow属性向元素添加一个或多个属性。

box-shadow:h-shadow v-shadow blur spread color inset;

值	说明
h-shadow	必需，水平阴影的位置，允许负值
v-shadow	必需，垂直阴影的位置，允许负值
blur	模糊距离，不允许负值
spread	阴影的尺寸，允许负值
color	阴影的颜色
inset	将外部阴影（outset）改为内部阴影

① 如何设置三个方向的阴影：

水平或垂直阴影其中之一设为0，调大模糊距离。

<head>
    <style>
        .box{
            height:200px;
            width:200px;
            margin:100px;
            box-shadow:0 10px 20px red;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>

② 如何设置四个方向的阴影：

水平和垂直阴影全设为0，调大模糊距离。

<head>
    <style>
        .box{
            height:200px;
            width:200px;
            margin:100px;
            box-shadow:0 0 20px red inset;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>

3. text-shadow属性：字阴影

text-shadow属性向文本设置阴影。

text-shadow:h-shadow v-shadow blur color;

值	说明
h-shadow	必需，水平阴影的位置，允许负值
v-shadow	必需，垂直阴影的位置，允许负值
blur	模糊距离
color	阴影的颜色

4. linear-gradient属性值：线性渐变

linear-gradient属性值是background-image属性的一个取值。

使用时需先设置linear-gradient属性，再设置background- image的url属性。

background-image:linear-gradient(angle,color-begin,color,...,color-end);

方向angle可以省略，默认值为to bottom（从上往下）

angle的取值可以是：

① 关键词：to top，to right，to left bottom

② 弧度：单位为deg

颜色至少要有两种，第一个为渐变的初始颜色，第二个为渐变的结束颜色。

5. radial-gradient属性值：径向渐变

radial-gradient属性值是background-image属性的一个取值。

background-image:radial-gradient(center,shape-size,color-begin %,color %,...,color-end %);

center即渐变的中心点，默认值为宽高的一半center，取值可以为top,bottom,left,right，需要注意浏览器的兼容性问题。

shape-size即渐变的形状，默认值为椭圆形ellipse，取值可以为圆形circle。

颜色至少要有两种，第一个为渐变的初始颜色，第二个为渐变的结束颜色。可以在每种颜色后加一个百分比，表示每种颜色在渐变中占的比例，默认为均匀分布。

6. transform属性：转换

transform属性向元素应用2D或3D转换，该属性允许对元素进行位移（translate）、缩放（scale）、旋转（rotate）和倾斜（skew）。

transform属性对行内元素无效。

6.1 位移：translate

transform:translate(x,y);

x,y的取值可以是像素px，也可以是百分比%。

当只取一个值时，表示元素在水平方向上移动的距离。

当取两个值时，表示元素在水平方向和垂直方向上移动的距离。

取正值时，元素往右下角移动；取负值时，元素往左上角移动。

transform:translateX(x);/*水平方向上的位移*/
transform:translateY(y);/*垂直方向上的位移*/
transform:translate3D(x,y,z);/*3D位移*/

6.1.1 利用float和transform:translateX()使元素水平居中

.header{
    width: 100%;
    height: 120px;
    overflow: hidden;
    position: relative;
}
.header img{
    height: 120px;
    position: absolute;
    left: 50%;/*相对于父元素*/
    transform: translateX(-50%);/*自身位移*/
}

6.2 缩放：scale

transform:scale(x,y);

x,y的取值为数字，当取值为0-1时，表示对元素进行缩小；当取值大于1时，表示对元素进行放大。

当只取一个值时，表示对元素等比例缩放。

当取两个值时，表示分别对元素在水平方向和垂直方向进行缩放。

transform:scaleX(x);/*水平方向进行缩放*/
transform:scaleY(y);/*垂直方向进行缩放*/
transform:scale3D(x,y,z);/*3D缩放*/

6.3 旋转：rotate

transform:rotate(angle);

angle的取值为弧度deg，如果该值为正数，表示对元素顺时针旋转；该值为负数时，表示对元素逆时针旋转。

默认元素的旋转中心为元素的正中心，即宽高的一半。

修改元素的旋转中心使用transform-origin属性，取值可以为top，bottom，left、right。

transform-origin:left bottom;

transform:rotateX(angle);/*沿x轴旋转*/
transform:rotateY(angle);/*沿y轴旋转*/
transform:rotateZ(angle);/*沿z轴旋转*/
transform:rotate3D(x,y,z,angle);/*3D旋转*/

6.4 倾斜：skew

transform:skew(x,y);

x,y的取值为弧度deg。

当只取一个值时，表示水平方向倾斜的弧度。

当取两个值时，表示水平方向和垂直方向倾斜的弧度。

注意x+y的和不要为90deg，否则元素会消失。

transform:skewX(angle);/*水平方向上的倾斜弧度*/
transform:skewY(angle);/*垂直方向上的倾斜弧度*/
/*注意，没有3D倾斜*/

7. transition属性：过渡

transition属性使元素从一种样式逐渐转变为另一种样式。

过渡必须有触发事件，如鼠标点击、鼠标悬停等。

7.1 transition-property属性

必需值，规定过渡的属性。

值	说明
none	默认值
all	选择所有属性
取值可以为颜色的属性
取值可以为数值的属性
转换（transform）
阴影（shadow）
渐变（gradient）

7.2 transition-duration属性

必需值，规定过渡的时间，默认值为0s|ms，取值为s|ms。

该值为单值时，所有过渡属性都对应相同时间；该值为多值时，过渡属性按顺序对应时间。多值间用逗号隔开。

7.3 transition-timing-function属性

可选值，规定过渡的速度变化类型。可取多值，多值间用逗号隔开。

值	说明
ease	默认值，先加速后减速
ease-in	加速
ease-out	减速
ease-in-out	先加速后减速，与ease有区别，该取值可能是加速的时间大于减速的时间，或者减速的时间大于加速的时间
linear	匀速

7.4 transition-delay属性

可选值，规定过渡的延迟时间，默认值为0s|ms，取值为s|ms。

当取正值时，表示多久后开始过渡。

当取负值时，无延迟效果，但过渡元素的起始值从0变为设定值（设定值=延迟时间+持续时间），若设定值小于0，无过渡效果；若设定值大于0，则从设定值处开始完成剩余的动画效果。

可取多值，多值间用逗号隔开。

7.5 transition简写属性

四个属性无先后顺序，但如果在简写属性中同时设置了过渡时间和延迟时间，那么第一个值为过渡时间，第二个值为延迟时间。

<head>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
            /*transition-property: all;
            transition-duration: 2s;
            transition-timing-function: ease-in-out;
            transition-delay: 1s;*/

            transition: all 2s ease-in-out 1s;

        }
        .box:hover{
            width: 1200px;
            background-color: green;
            border-radius: 100px;
        }
    </style>
</head>
<body>
    <div class="box"><div>
</body>

transition属性一般写在元素内，如鼠标悬停事件，写在元素内时鼠标离开元素时也会有转换过程，但如果写在:hover伪类中时，鼠标离开元素时没有transition过程。

8. animation属性

animation属性使元素从一种样式逐渐转变为另一种样式。

与transition属性不同的是，animation可以控制转换的过程。

8.1 定义动画：keyframes规则

使用keyframes规则可以创建动画。0%表示动画的开始，可以用关键词from代替，100%表示动画的结束，可以用关键词to代替。name表示该动画的名字。

@keyframes name {
    0%|from{
        css样式
    }
    任意百分比{
        css样式
    }
    100%|to{
        css样式
    }
}

8.2 调用动画：animation属性

8.2.1 animation-name属性

必需值，动画的名称。

8.2.2 animation-duration属性

必需值，动画的持续时间，默认值为0s|ms，取值为s|ms。

8.2.3 animation-timing-function属性

可选值，动画的速度变化类型，默认值为ease，可选值为ease-in，ease-out，ease-in-out，linear。

8.2.4 animation-delay属性

可选值，动画的延迟时间，默认值为0s|ms，取值为s|ms，可为负值。

8.2.5 animation-iteration-count属性

可选值，动画的播放次数，默认值为1，取值为数值或关键词infinite（无限循环播放）。

8.2.6 animation-direction属性

可选值，动画的播放方向，默认值为normal，可选值为alternate，表示第偶数次播放动画时倒序播放（从100%到0%）。

8.2.7 animation-fill-mode属性

可选值，动画停在最后一帧，取值forwards。

8.2.8 animation-play-state属性

可选值，动画的播放状态，默认值为running，可选值为paused，该属性一般配合:hover伪类使用。

8.2.9 animation简写性

常用animation属性简写8.2.1-8.2.7的所有属性，animation-play-state属性通常不简写。

<head>
    <style>
        .box{
            width: 60px;
            height: 60px;
            background-color: red;
            border-radius: 50%;
            animation: change 5s linear 3 alternate forwards;
            /*animation-name: change;
            animation-duration: 5s;
            animation-timing-function: linear;
            animation-delay: 0s;
            animation-iteration-count: 3;
            animation-direction: alternate;
            animation-fill-mode: forwards;*/
        }
        .box:hover{
            animation-play-state: paused;
        }
        @keyframes change {
            0%{
                transform: translate(0,0);
            }
            20%{
                transform: translate(200px,200px);
            }
            40%{
                transform: translate(400px,0);
            }
            60%{
                transform: translate(600px,200px);
            }
            80%{
                transform: translate(800px,0);
            }
            100%{
                transform: translate(0,0);
                background-color: green;
            }
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>

9. 多列

将文本内容设计成像报纸一样的多列内容。

9.1 column-count属性

column-count属性指定了需要分割的列数。

9.2 column-gap属性

column-gap属性指定了列与列间的间隙。

9.3 column-rule-style属性

column-rule-style属性指定了列与列间的边框样式。

9.4 column-rule-width属性

column-rule-width属性指定了列与列间的边框宽度。

9.5 column-rule-color属性

column-rule-color属性指定了列与列间的边框颜色。

9.3-9.5可简写为column-rule属性。

<head>
    <style>
        .box{
            width: 600px;
            height: 500px;
            border: 3px solid red;
            column-count: 3;
            column-gap: 30px;
            column-rule: 3px solid red;
        }
    </style>
</head>
<body>
    <div class="box">
        Once upon a time, there was a mountain, on the mountain there was a temple, in the temple, an old monk was telling the little monk a story, what is the story about? Once upon a time, there was a mountain, on the mountain there was……
    </div>
</body>