CSS3新样式

来源：互联网发布：盐枪淘宝编辑：程序博客网时间：2024/06/06 18:17

一、transition

transition是复合属性，可以改变元素数值类的属性，例如宽高、背景颜色等。
一个元素从一个样式过渡到另外一个样式需要的时间，transition可以设置过渡的时间速度等。
如下代码，当鼠标移入div1元素时，会从#div1的样式变到#div1:hover的样式。

<style>    #div1{        width:100px;        height:100px;        background:red;        position:absolute;        /*transition-duration:1s;过程时间        transition-property:left;        transition-timing-function:ease-in-out;改变速度        transition-delay:1s;延时1s*/        transition:1s width,2s 0.5s left,3s 2.5s background;        left:10px;        top:10px;    }    #div1:hover{        width:200px;        height:200px;        left:100px;        background:blue;    }</style>

transition-duration:1s;设置样式变化经历的时间（1秒）；
transition-property:left;只改变某个属性的值（left）；
transition-timing-function:ease-in-out;改变变化速度；
transition-delay:1s;变化延时时间（1秒）。
还可以把这些属性写在一起：
transition:1s width,2s 0.5s left,3s 2.5s background;
宽度变化经历1s;left 0.5s后开始变化，经历2s;背景2.5s后开始变化，经历3s。
补充：transform:rotate(720deg);旋转720度

二、border-radius圆角弧度

border-radius的写法：1-4个数字/1-4个数字；
1、“/”左右两边都可以写1-4个数字，并且左右两边的数字个数可以不同。
2、左边代表水平方向，右边代表垂直方向，没有“/”则水平垂直的弧度都一样，某个角的实际效果由左右两边共同决定。
3、某一边写1-4数字的效果为（左右两边同理）：
4个值：没个值按顺讯分别控制左上，右上，右下，左下（顺时针方向）四个方向。
3个值：第一个值控制左上，第二个值控制右上和左下，第三个值控制右下；
2个值：对角弧度一样，第一个值控制左上和右下，第二个值控制右上和左下。
1个值：4个角的弧度一样。
总结：4个值时，从左上开始顺时针每个值控制一个方向，每少一个值，原来对应位置的值就和对角线一样，一个值时当然全部一样。
4、弧度的值可以是像素px，也可以是百分百（表示原来宽或高的百分之几）。

三、box-shadow和text-shadow阴影效果

1、box-shadow和text-shadow可以设置多组值，每组可以代表不同方向的阴影，每组可以有2-5个值。
2、每组的5个值分别表示：水平偏移、垂直偏移、模糊半径、阴影的尺寸、阴影的颜色。
3、其中水平偏移和垂直偏移不可少，如果没有偏移也要设置为0；如果带像素单位的值少于2个则没有效果。
4、最后一个值代表颜色，用单位和其他值区分，颜色写到前面也没有效果，当颜色没有指定时，默认阴影为黑色
5、前面4个单位为px的值，每少些一个，后面的值就为0；写三个时代表水平偏移、垂直偏移、模糊半径；写两个时代表水平偏移、垂直偏移；
6、偏移值以右下为证，当水平偏移、垂直偏移为负数时，分别代表向左和向上偏移。

四、选择器

以下是未加入选择器时的代码；

<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title></title>        <style>            #div1 p,#div1 div{                height:30px;                border:1px solid red            }        </style>    </head>    <body>        <div id="div1">            <p>123</p>            <p>123</p>            <div>456</div>            <p>123</p>            <p>123</p>            <p>123</p>            <p>123</p>              </div>    </body></html>

结果图如下：
这里写图片描述
下面的代码都是加入到style中的，改变style后会给出相应的效果图；

1、nth-child() 用于父级下选择某一个元素。

a、括号内可以是自然数；表示查找第几个子元素，并改变该元素的样式，如果该元素不是声明的元素则不改变；

#div1 p:nth-child(3){    background:blue;    height: 50px;}#div1 p:nth-child(5){    background:blue;    height: 50px;}

这里写图片描述
这里#div1 p:nth-child(3)先选中第三个元素<div>456</div>，但是由于不是声明的p元素，所以无效，不改变样式；而第五个元素符合条件，改变了样式。

b、nth-child()括号内的参数可以带变量n，n从0开始自动往上增加；

#div1 p:nth-child(2n+1){    background:blue;    height: 50px;}

这里写图片描述
2n+1选中的有第1、3、5、7；由于第个不是声明的元素所以无效；

2、nth-of-type（）在父级下指定类型查找元素

nth-of-type在查找的时候就已经指定类型了，对nth-of-type来说不是指定类型的元素的不编号查找,就当它们不存在；括号里参数的值和nth-child一样。

#div1 p:nth-of-type(3){    background:red;}#div1 p:nth-of-type(3n){    background:red;}

这里写图片描述
nth-of-type(3)查找父级下的第三个p元素，实际上父级下的第三个元素是<div>456</div>，但不是P元素，所以不给它编号，直接跳过忽略，父级的第四个元素才是要找的第三个p元素，所以改变了样式。
nth-child是不管什么元素全部编号查出符合参数值的元素，再看看是否为声明元素，是则该编样式，不是则不改变。
nth-of-type是先筛选出声明的元素，再编号，再查出符合参数值的元素，然后改变样式。

五、渐变

以下是未加入渐变效果的代码；下面加入渐变效果的代码都是加在#div1的样式中的，加入后会给出效果图；

<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title></title>        <style>            #div1{                width:100px;                height:100px;                margin: 50px auto;                border:1px solid red;                }        </style>    </head>    <body>        <div id="div1"></div>    </body></html>

效果图就是一个框，什么都没有：
这里写图片描述

radial-gradient()径向渐变：以弧度的形式扩散；

1、第一个参数可以写方向（也可以不写方向，线性渐变方向默认top从上到下，径向渐变默认在中心），径向渐变可以以像素为单位设置坐标的偏移量，后面的参数全部都是设置颜色的，每个参数之间用“,”隔开，颜色参数可以无数个。
2、当第一个参数写了方向时，要声明浏览器内核，否则会有兼容问题；
以下是主要浏览器的内核：
谷歌 -webkit-
火狐 -moz-
opera -o-
ie -ms-
例如要兼容谷歌浏览器要把linear-gradient改成-webkit-linear-gradient；
好了，写第一个样式来看看效果：background:radial-gradient(red,blue ,green)
这里写图片描述
默认渐变中心就是在元素的中心，每个颜色的空间默认平均分配。
第二个例子：background:-webkit-radial-gradient(30px 30px, red,blue ,green)

可以看到中心偏移了
第三个例子：
background:-webkit-radial-gradient(bottom,red,blue ,green)
这里写图片描述
中心在底部。

linear-gradient()线性渐变

线行渐变方向默认top从上到下，方向参数可以用度数deg来确定。
第四个例子：background:linear-gradient(red ,blue ,green);
这里写图片描述
第五个例子：background:-webkit-linear-gradient(30deg,red ,blue ,blue ,green);

第六个例子：background:-webkit-linear-gradient(90deg,red ,blue ,green);

倾斜90度就和background:-webkit-linear-gradient(bottom,red ,blue ,green);是一样的
3、颜色参数可以分为两个部分，第一部分为颜色，第二部分为颜色从哪里开始渐变，是个百分比值，表示占元素宽高的百分之几；

第七个例子：background:-webkit-linear-gradient(left,red 10%,blue 50%,green 50%);
这里写图片描述
前10%都是红色的，从10%-50%开始向蓝色渐变，50%-50%从蓝色到绿色渐变，由于50%=50%，所以这里蓝色到绿色没有渐变空间，直接变色。

六、css 2D

1、transform属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
在操作元素的样式里加上transition:1s;然后#元素id:hover{transform: 方法();}就可以实现单鼠标移入该元素时产生动画的效果了。下面说说transform的方法。
rotate（n deg）旋转n度。
skew(x-angle,y-angle)定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle) 定义沿着 X 轴的 2D 倾斜转换。
skewY(angle)定义沿着 Y 轴的 2D 倾斜转换。
scale(angle) 整体扩大取值正数小数负数比原来的大小扩大几倍为负数时先缩小到没有在扩大到负数的绝对值倍
scaleX(angle) 左右方向扩大
scaleY(angle) 垂直方向扩大
translate 改变位置默认向右
translateX 横向位置左负右正
translateY 纵向位置上负下正

七、css 3D

要实现3D效果必须在相应元素创建3D环境和设置景深（3D效果是在多远的距离看到的）；

/*创建3D 环境*/transform-style: preserve-3d;perspective:1500px;/*景深*/

下面介绍一些属性和方法的功能：
rotate旋转；
transform-origin 设置旋转基点；

补充：CSS3的特性还有很多，不可能全部在这里列出来，我只是把目前学到的内容尽量的写了进来，以后继续学到其他特性也会写到这里进来。想学习其他特性的同学可以去这里看看，深入了解 CSS3 新特性；写得真心不错。

阅读全文

0 0