css3

目录

一、css3 简介

二、css3 边框

三、css3 背景

四、css3 渐变

五、css3 文本效果

六、css3 2D 3D转换

1.平移

2.旋转

3.缩放

4.拉伸

5.转换属性

七 、css3 过渡

八、css3 动画

---

 

一、css3 简介

升级的css2, 多了动画，选择器，多列布局之类

二、css3 边框

圆角
/*border-radius: 10px 20px 30px 40px; /!*左上 右上 右下 左下*!/*/

/*border-radius: 10px 20px 30px; */

/*border-radius: 20px 40px;*/

/*border-radius: 20px;*/

/*border-top-left-radius: 20px;*/ 

边界图片

/*border-image-source: url("./imgtest/下载.jpg");*/

/*border-image-slice: 10%;*/

/*border-image-width: 10px;*/

/*border-image-outset: 5px;*/

/*border-image-repeat: stretch;*/

border-image: url("./imgtest/下载.jpg") 50 round

阴影

/*box-shadow: 0 0 10px 5px red inset;*/

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

阴影参数

h-shadow	必需的。水平阴影的位置。允许负值
v-shadow	必需的。垂直阴影的位置。允许负值
blur	可选。模糊距离
spread	可选。阴影的大小
color	可选。阴影的颜色。
inset	可选。从外层的阴影（开始时）改变阴影内侧阴影

三、css3 背景

background-image:CSS3中可以通过background-image属性添加背景图片。不同的背景图像和图像用逗号隔开，所有的图片中显示在最顶端的为第一张。

backgroung-origin:属性规定背景图片的定位区域。背景图片可以放置于 content-box、padding-box 或 border-box 区域。

background-size:指定背景图像的大小。CSS3以前，背景图像大小由图像的实际大小决定。CSS3中可以指定背景图片，让我们重新在不同的环境中指定背景图片的大小。您可以指定像素或百分比大小。

你指定的大小是相对于父元素的宽度和高度的百分比的大小。

background-clip:背景剪裁属性是从指定位置开始绘制 

四、css3 渐变

CSS3 定义了两种类型的渐变（gradients）：

• 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
• 径向渐变（Radial Gradients）- 由它们的中心定义

线性渐变：background-image: linear-gradient(to left, red, yellow);

前面可以是方向to bottom、to top、to right、to left、to bottom right，等等。还可以是角度

径向渐变：径向渐变由它的中心定义。为了创建一个径向渐变，你也必须至少定义两种颜色节点。颜色节点即你想要呈现平稳过渡的颜色。同时，你也可以指定渐变的中心、形状（圆形或椭圆形）、大小。默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。

closest-side:半径为从圆心到最近边

closest-corner:半径为从圆心到最近角

farthest-side:半径为从圆心到最远边

farthest-corner:半径为从圆心到最远角

五、css3 文本效果

 

六、css3 2D 3D转换

1.平移

• translate(x, y); 定义 2D 转换，沿着 X 和 Y 轴移动元素
• translate3d(x, y, z); 定义 3D 转化
• translateX(x); 沿着x轴移动x单位
• translateY(y); 沿着y轴移动y单位
• translateZ(z); 沿着z轴移动z单位

2.旋转

• rotate(angle); 定义 2D 旋转,默认沿z轴
• rotate3d(x,y,z,angle); 定义3D旋转
• rotateX(angle); 沿x轴旋转 
• rotateY(angle); 沿y轴旋转
• rotateZ(angle)； 沿z轴旋转

3.缩放

• scale(x,y); 定义 2D 缩放转换，改变元素的宽度和高度
• scale3d(x,y,z); 定义 3D 缩放转换
• scaleX(x); x轴的缩放
• scaleY(y); y轴的缩放
• scaleZ(z); z轴的缩放

4.拉伸

• skew(x-angle,y-angle); 定义 2D 倾斜转换，沿着 X 和 Y 轴
• skewX(angle); 沿着x轴拉伸
• skewY(angle); 沿着y轴拉伸

5.转换属性

• transform-style：flat/preserve-3d 表示所有子元素在2d平面还是在3d空间呈现
• transform-orign: 用于设置旋转元素的基点位置

七 、css3 过渡

1.设置过渡延迟

transition-delay

2.设置过渡的时间

transition-duration 

3.设置过渡属性 如果过渡的属性比较多 其他的一样 可以写成all 也可以使用逗号连写

transition-property

4.设置动画的方式 linear ease ease-in ease-out ease-in-out

transition-timing-function:linear;

5.简写属性

/* transition:text-shadow .5s linear,font-size .5s ease-in;*/

transition:all .5s linear;

八、css3 动画

@keyframes 动画播放器

@keyframes animte_1 {
            /*这个里面两种写法
            from to
            0%   100%
            */
            from{
                
            }
            to{
                
            }

          /*  0%{

            }
            100%{

            }*/
        }

1.动画的名称

animation-name

2.动画的时间

animation-duration

3.规定动画的速度曲线。默认是 "ease"。

animation-timing-function

4.播放完成的位置

aniamtion-fill-mode

5.动画的延迟

animation-delay

6.动画执行的次数：number/infinite
animation-iteration-count: 2;

7.播放方式

animation-direction

8.动画是否正在运行或暂停。默认是 "running"

animation-play-state