CSS3

作者: yuhuan121 | 来源:发表于2017-08-24 17:27 被阅读0次

CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括：盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等。

CSS3文本

text-overflow

1.clip: 隐藏超出文本
2.ellipsis: 超出部分使用省略号
例子

overflow:hidden;
text-overflow:clip;

对于省略号效果还需要其它属性配合

overflow:hidden; 超出的部分隐藏
text-overflow:ellipsis; 超出的文本省略号...
white-space: nowrap; 文本不换行

文本换行

word-wrap

word-wrap 属性允许长单词或 URL 地址换行到下一行

word-break

word-break 属性规定自动换行的处理方法

white-space

white-space 属性设置如何处理元素内的空白

normal 默认。连续空白会被浏览器忽略
pre 空白会被浏览器保留。其行为方式类似 HTML 中的标签
nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 
标签为止
pre-wrap 保留空白符序列，但是正常地进行换行
pre-line 合并空白符序列，但是保留换行符
inherit 规定应该从父元素继承 white-space 属性的值

text-shadows设置文字阴影

和box-shdow很像
可以设置偏移、颜色、阴影大小

text-shadow: x轴(X Offset) y轴(Y Offset)  模糊半径(Blur)  颜色(Color)

可以写多个，,隔开

 text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 40px #ff00de, 0 0 70px #ff00d

结合背景颜色，通过偏移距离负数或者颜色，可以做出各种效果

CSS3边框

border-radius

通过border-radius设置元素的圆角半径
对于正方形border-radius设置为边长的一半，就变成圆了

width: 100px;
height: 100px;
border-radius: 50px; //或者border-radius: 50%;

border-radius是缩写格式，其实border-radius和border属性一样，还可以把各个角单独拆分出来

border-radius: 50px 30px 20px 0;  表示左上、右上、右下、左下

半圆

.circle{
    width: 100px;
    height: 50px;
    background: red;
    border-radius: 50px 50px 0 0;
}

border-image

border-image几个属性详解
边框都是线条略显单调，使用CSS3可以用图片作为边框的修饰

source

和background类似，指定想使用的图片来源

border-image-source:url(image url);

width

指定border的宽度

border-image-width: 1;

repeat

三种repeat方式

stretch 压缩或伸展border-image的背景图片以其刚好适应border-width的宽度
repeat 简单的重复
round 压缩或伸展border-image的背景图片以图片最小单元刚好适应border-width的宽度，在此基础上重复

slice

border-image-slice: number|%|fill;

此属性指定顶部，右，底部，左边缘的图像向内偏移，分为九个区域：四个角，四边和中间。图像中间部分将被丢弃（完全透明的处理）

有工具帮忙生成 border-image-generator

box-shadow

box-shadow:inset x-offset y-offset blur-radius spread-radius color
box-shadow属性至多有6个参数设置
阴影类型 X-offset Y-offset 阴影模糊半径 阴影扩展半径 颜色

阴影类型：默认的投影方式是外阴影；如果取其唯一值inset,就是将外阴影变成内阴影
X-offset:是指阴影水平偏移量，可正可负，如果值为正，则阴影在对象的右边，值为负值时，阴影在对象的左边
Y-offset:是指阴影的垂直偏移量，其值也可以是正负值，如果为正值，阴影在对象的底部，反之其值为负值时，阴影在对象的顶部
阴影模糊半径：参数可选，但其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊
阴影扩展半径：参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值是，则缩小
阴影颜色：此参数可选，如果不设定任何颜色时，浏览器会取默认色，但各浏览器默认色不一样

box-shadow可以使用一个或多个投影，如果使用多个投影时必须需要用逗号,分开

box-shadow: 3px 3px 3px orange, 3px 3px 3px red;

用阴影属性写一个月亮

.circle{
    width: 100px;
    height: 50px;
    border:1px solid red;
    border-bottom:0;
    border-radius: 50px 50px 0 0;
    box-shadow: inset 0px 16px 0px -2px red;
}

box-sizing

box-sizing可以改变盒模型
传统的盒模型width就是指内容区域宽度，和padding、border没有关系，但是这在布局上带来一定的困难

content-box：标准盒模型
border-box：width = content width + paddingLeft + borderLeft + paddingRight + borderRight

background-size

length:设置背景图像的高度和宽度，第一个值设置宽度，第二个值设置高度，如果只设置一个值，则第二个值会被设置为auto
percentage: 以父元素的百分比来设置背景图像的宽度和高度，第一个值设置宽度，第二个值设置高度，如果只设置一个值，则第二个值会被设置为auto
cover: 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域，背景图像的某些部分也许无法显示在背景定位区域中
contain: 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域

图片全屏设置

<style>
    html,body{
        margin: 0;
        height: 100%;
    }
    .box {
        height:100%;
        background: url(http://img2.imgtn.bdimg.com/it/u=3319314272,2780729326&fm=27&gp=0.jpg) no-repeat;
        background-size:cover;  
    }
    </style>
</head>
<body>
<div class="box"></div>

background-origin

background-origin 属性规定 background-position 属性相对于什么位置来定位

padding-box: 背景图像相对于内边距框来定位
border-box: 背景图像相对于边框盒来定位
content-box: 背景图像相对于内容框来定位

如果背景图像的 background-attachment 属性为fixed，则该属性没有效果

background-clip

background-clip 属性规定背景的绘制区域

padding-box: 背景被裁剪到边框盒
border-box: 背景被裁剪到内边距框
content-box: 背景被裁剪到内容框

多背景

在之前的CSS中只能使用一张背景图片，CSS3可以使用多张背景图片

background:url("haoroomsCSS1_s.jpg") 0 0 no-repeat,
         url("haoroomsCSS2_s.jpg") 200px 0 no-repeat,
         url("haorooms.jpg") 400px 201px no-repeat;

CSS3渐变

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

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

CSS3 线性渐变

语法

#可以使用多个颜色结点
background: linear-gradient(direction, color-stop1, color-stop2, ...);

background: linear-gradient(red, blue); /* 默认从上到下 */
background: linear-gradient(to right, red , blue); /* 从左到右 */
background: linear-gradient(to bottom right, red , blue); /* 从左上角到右下角 */
background: linear-gradient(180deg, red, blue); /*带有指定的角度的线性渐变 */
background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /* 从完全透明，过渡到完全不透明的红色*/
/*rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明。*/
background: repeating-linear-gradient(red, yellow 10%, green 20%)/*重复线性渐变*/

CSS3 径向渐变

语法

background: radial-gradient(center, shape size, start-color, ..., last-color);

至少定义两种颜色结点，还可以指定渐变的中心、形状（原型或椭圆形）、大小。默认情况下，渐变的中心是 center（在中心点），渐变的形状是 ellipse（椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。

background: radial-gradient(red, green, blue); /*颜色结点均匀分布*/
background: radial-gradient(red 5%, green 15%, blue 60%);/*颜色结点不均匀分布*/
background: radial-gradient(circle, red, yellow, green);/*形状为圆形的径向渐变*/
background: repeating-radial-gradient(red, yellow 10%, green 15%)/*重复的径向渐变*/
background: radial-gradient(60% 55%, closest-side,blue,green,yellow,black)/*控制渐变尺寸大小*/

CSS3 过渡

用法

transition: property, duration, timing-function, delay

以下两种写法等价：

#1
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
#2
transition: width 1s linear 2s;

CSS3 动画

利用CSS3创建的动画，可以取代许多网页动画图像，Flash动画，和JAVAScripts。
CSS3 @keyframes 规则
@keyframes用于定义动画的规则

@keyframes rainbow {
  0% { background: #c00; }
  50% { background: orange; }
  100% { background: yellowgreen; }
}

rainbow效果一共有三个状态，分别为起始（0%）、中点（50%）和结束（100%）。如果有需要，可以插入更多状态。

定义了关键帧之后就可以给DOM元素绑定动画了，和事件很像

div:hover {
  animation: 1s rainbow;
}
#加入infinite关键字，让动画无限次播放
div:hover {
  animation: 1s rainbow infinite;
}
#指定动画具体播放的次数，比如3次
div:hover {
  animation: 1s rainbow 3;
}

animation-fill-mode规定结束模式

none：默认值，回到动画没开始时的状态
forwards：让动画停留在结束状态
backwards：让动画回到第一帧的状态
both: 根据animation-direction（见后）轮流应用forwards和backwards规则

animation-direction指定了动画播放的方向

animation-play-state
如果想让动画保持突然终止时的状态，设置为paused

 animation-play-state: paused;
animation-play-state: running;

工具
CSS3 Tool

如下 loading 动画效果 DEMO1& DEMO2

loading效果

CSS3变形

CSS3中transform属性包括以下几种：旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix

transform ： none | <transform-function> [ <transform-function> ]*

transform中使用多个属性时需要有空格隔开，可用于内联(inline)元素和块级(block)元素

旋转rotate

transform:rotate(30deg);//通过rotate使元素顺时针旋转一定的度数
transform-origin: 0% 0%;//通过transform-origin属性改变元素旋转的的基点,
//transform-origin的取值可以是top, bottom, left, right, center,百分数

旋转之后元素仍占据原来位置，实际上所有的transform都是这样，缩放、位移等都不会改变元素占据的位置
transform-origin属性对下面介绍的transform都有作用
位移
可以通过translate使元素平移

transform:translate(x,y);
transform:translate(200px,150px);
transform:translate(50%,50%);//相对于自身发生偏移,常用来代替margin-left和margin-top设定绝对定位实现垂直水平居中：

也可以简单只移动一个坐标

transform:translateX(100px);
transform:translateY(100px);

缩放scale
通过scale使元素缩放一定的比例

transform:scale(2, 0.5);//scale(x,y)：使元素水平方向和垂直方向同时缩放
transform:scaleY(0.3);//scaleY(y)：元素仅垂直方向缩放
transform:scaleY(2);//scaleX(x)：元素仅水平方向缩放
transform:scale(3);//scale只设置一个参数，一相同的比例缩放两个方向

扭曲skew
通过skew使元素扭曲一定的度数，和上面一样也有三种类似的用法

transform:skew(10deg, 20deg);//使元素水平方向和垂直方向同时扭曲
transform:skewX(10deg); //元素仅水平方向扭曲
transform:skewY(10deg); //元素仅垂直方向扭曲
transform:skew(10deg); //只设置一个参数，一相同的角度扭曲两个方向

3D

CSS3带来了DOM的3D效果，元素需要在transform属性中使用perspective方法来激活3D效果
2种方法
1.在transform属性中使用perspective方法

 transform: perspective( 600px );

2.直接使用perspective属性

 perspective: 600px;

perspective属性的值决定了3D效果的强烈程度，可以认为是观察者到页面的距离。值越大距离越远，视觉上的3D效果就会相应的减弱。

2种方法的不同
第一种方式直接在一个元素上触发3D变形，如果使用同样的方法作用于不同位置的元素的时候，每个元素会有自己的轴心

在父元素使用perspective属性，这样每个子元素都共享相同的3D空间

3D变形方法
在perspective激活的3D空间中我们可以在X、Y、Z三个坐标轴上对元素进行变形处理。3D变形使用的变形方法和2D变形一样

rotateX( angle )
rotateY( angle )
rotateZ( angle )
translateZ( tz )//使元素延Z轴（在3D空间中方向从前到后）移动
scaleZ( sz ) //缩放
translateX() //使元素延X轴移动（在3D空间中方向从前到后）移动。正值使元素离观察者更近，负值使元素变远。

立方体
css3立方体