CSS3有哪些新特性？

来源：互联网发布：手机遥控器软件大全编辑：程序博客网时间：2024/04/27 04:02

css3把很多以前用图片或脚本实现的效果、甚至动画效果，只需短短的几行代码就能搞定。比如圆角，图片边框，文字阴影和盒阴影，过渡，动画等。
CSS3最重要的模块包括：

选择器
框模型
背景和边框
文本效果
2D/3D 转换
动画
多列布局
用户界面

css3都有哪些强大的功能呢？
1、强大的选择器
2、圆角效果
3、块阴影和文字阴影
4、色彩：CSS3支持更多的颜色和更广泛的颜色定义
5、渐变效果
6、个性化字体：@Font-Face
7、多背景图
8、边框背景图
9、变形处理：可以对HTML元素进行旋转、缩放、倾斜、移动以及动画
10、多栏布局
11、媒体查询：不同屏幕分辨率，应用不同的样式

css3边框圆角效果 border-radius

border-radius：5px 4px 3px 2px;/*四个值分别代表左上角，右上角，右下角，左下角，顺时针*/

例子：实心上半圆和实心圆

<!DOCTYPE html><html><head>    <title></title>    <style type="text/css">        .circle{            height: 100px;            width:100px;            background: #9da;            border-radius: 50px;/*四个圆角值都设置为宽度或高度值的一半*/        }        .semi-circle{            height: 50px;            width:100px;            background: #9da;            border-radius: 50px 50px 0 0;/*左上角，右上角的半径至少设置为height值*/        }    </style></head><body>    <div class="circle"></div>    <div class="semi-circle"></div></body></html>

css3边框阴影 box-shadow

box-shadow：X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];

值描述 X轴偏移量必需。水平阴影的位置，允许负值。 Y轴偏移量必需。垂直阴影的位置，允许负值。阴影模糊半径可选。模糊距离，其值只能是正值，如果值为0，表示阴影没有模糊效果。阴影扩展半径可选。阴影的尺寸。阴影颜色可选。阴影的颜色。省略默认会黑色。投影方式可选。设置为inset时为内部阴影方式，若省略为外阴影方式

为元素设置外阴影：

.box-shadow{box-shadow:4px 2px 6px #333333;}

为元素设置内阴影：

.box-shadow{box-shadow:4px 2px 6px #333333 inset;}

为元素添加多个阴影(只需用逗号隔开即可)：

.box-shadow{box-shadow:4px 2px 6px #f00,-4px -2px px #000,0px 0px 12px 5px #33cc00 inset;}

css3边框背景图 border-image

想象一下：一个矩形，有四个边框。如果应用了边框图片，图片该怎么分布呢？图片会自动被切割分成四个等分，用于四个边框。
可以把border-image理解为就是一个切片工具，会自动把用做边框的图片切割。

border-image：border-image-source [border-image-slice] [border-image-width] [border-image-outset] [border-image-repeat];

值描述 border-image-source 用在边框的图片的路径。 border-image-slice 图片边框向内偏移。 border-image-width 图片边框的宽度。 border-image-outset 边框图像区域超出边框的量。 border-image-repeat 图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)

border-image:url(border.png) 70 70 70 70 repeat;

css3颜色颜色之RGBA

color:rgba(R,G,B,A)

以上R,G,B三个参数，正整数的取值范围为：0-255。百分数值的取值范围为0.0%-100%。
A为透明度参数，取值在0-1之间，不可为负值。

background-color:rgba(255,255,255,0.5);/*透明度为0.5的白色*/

css3颜色渐变色彩

liner-gradient(to bottom,#fff,#999)/*liner-gradient为渐变类型-线性渐变，径向为radial，to bottom渐变方向，后面两个参数表示颜色的起始点和结束点，可以有两至多值*/

第一个参数为渐变方向，可以用角度的关键词或英文来表示：

角度英文作用 0deg to top 从下向上 90deg to right 从左向右 180deg to bottom 从上向下 270deg to left 从右向左 to top left 从右下角到左上角 to top right 从左下角到右上角

第二个和第三个参数，表示颜色的起始点和结束点，可以有多个颜色值。

background-image:liner-gradient(to left,red,orange,yellow,green,blue,indigo,violet);

CSS3文字与字体 text-overflow与word-wrap

text-overflow用来设置是否使用一个省略标记(……)表示对象内文本的溢出。

text-overflow:clip(表示剪切) | ellipsis(表示显示省略标记);

但是text-overflow只是用来说明文字溢出时用什么方式显示，要实现溢出时产生省略号的效果，还须其他条件：

定义强制文本在一行显示（white-space:nowrap）
溢出内容为隐藏（overflow:hidden）

text-overflow:ellipsis;overflow:hidden;white-space:nowrap;

word-wrap用来设置文本行为，当前行超过指定容器的边界时是否断开转行

word-wrap:normal |break-word;

CSS3文字与字体 @font-face

@font-face能够加载服务器端的字体文件，让浏览器端可以显示用户电脑里没有安装的字体。

@font-face{    font-family:"字体名称"；    src:url("字体文件在服务器上的相对或绝对路径")；}

这样设置之后，就可以像使用普通字体一样在（font-*）中设置字体样式。比如：

p{    font-size:12px;    font-family:"my font";/*必须项，设置@font-face中font-family同样的值*/}

CSS3文字与字体 text-shadow

text-shadow用来设置文本的阴影效果。

text-shadow:X-offset Y-offset blur color;

值描述 X-offset 阴影的水平偏移距离，正值向右偏移，负值向左偏移； Y-offset 阴影的垂直偏移距离，正值向下偏移，负值向上偏移； blur 阴影的模糊程度，不能是负值，值越大越模糊； color 阴影的颜色；

text-shadow:0 1px 1px #fff;

CSS3背景 background-origin

background-origin设置元素背景图片的原始起始位置。

background-origin:border-box |padding-box|content-box;

值描述 border-box 表示背景图片是从边框开始显示 padding-box 表示背景图片是从内边距（默认值）开始显示 content-box 表示背景图片是从内容区域开始显示

效果图如下：
这里写图片描述
需要注意的是，background-origin属性只有在背景设置为no-repeat的情况下起作用，如果背景不是no-repeat，该属性无效，会从边框开始显示。

CSS3背景 background-clip

background-clip用来将背景图片做适当的剪裁以适应实际需要。

background-clip：border-box | padding-box | content-box |no-clip;

值描述 border-box 表示从边框向外剪裁背景 padding-box 表示从内边距向外剪裁背景 content-box 表示从内容区域向外剪裁背景 no-clip 表示不剪裁，和参数border-box显示同样的效果

剪裁效果如下：
这里写图片描述

CSS3背景 background-size

background-size设置背景图片的大小，以长度或百分比显示，还可以通过cover和contain来对图片进行伸缩。

  background-size:auto|<长度值>|<百分比>|cover|contain

值描述 auto 默认值，不改变背景图片的原始高度和宽度 <长度值> 成对出现，设置了背景的宽高，如果就一个值，将其作为图片的宽度值来等比缩放 <百分比> 成对出现，背景的宽高乘以设置的百分比得出的数即为当前宽高，如果就一个值，作为宽度值来等比缩放 cover 覆盖，将图片等比缩放以填满整个容器 contain 容纳，将图片等比缩放至某一边紧贴容器边缘为止

CSS3变形–旋转 rotate()

旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转。
角度值为正值，顺时针旋转
角度值为负值，逆时针旋转

.wrapper{width: 200px;    height: 200px;    border:1px dotted red;    margin:100px auto;}.wrapper div{    width: 200px;    height: 200px;    background: orange;    -webkit-transform:rotate(45deg);    transform:rotate(45deg);}

 <div class="wrapper">        <div></div> </div>

CSS3变形–扭曲 sknew()

CSS3变形–缩放 scale()

scale()函数让元素根据中心原点对对象进行缩放。
scale(X,Y)使元素水平方向和垂直方向同时缩放
scaleX(x)
scaleY(y)

.wrapper{width: 200px;    height: 200px;    border:1px dashed red;    margin:100px auto;}.wrapper div{    width: 200px;    height: 200px;    line-height:200px;    background: orange;    text-align:center;    color:#fff; }.wrapper div:hover{    opacity:.5;    -webkit-transform:scale(1.5);    -moz-transform:scale(1.5);    transform:scale(1.5);}

 <div class="wrapper">        <div>我将放大1.5倍/div> </div>

CSS3多列布局 Columns

它主要应用在文本的多列布局方面，这种布局在报纸和杂志上都使用了几十年了，但要在Web页面上实现这样的效果还是有相当大的难度，庆幸的是，CSS3的多列布局可以轻松实现。接下来咱们一起学习多列布局相关的知识。

columns：<column-width> || <column-count>

值描述 column-width 主要用来定义多列中每列的宽度 column-count 主要用来定义多列中的列数

举例：要显示2栏显示，每栏宽度为200px，代码为：

columns: 200px 2;

需要注意的是，目前所有主流浏览器其该属性都支持，只是仍需加浏览器私有前缀，如-moz,-webkit,-ms,-o等。

CSS3多列布局 column-width

column-width的使用和CSS中的width属性一样，不过不同的是，column-width属性在定义元素列宽的时候，既可以单独使用，也可以和多列属性中其他属性配合使用。其基本语法如下所示；

column-width: auto | <length>

值描述 auto 如果column-width设置值为auto或者没有显式的设置值时，元素多列的列宽将由其他属性来决定，比如前面的示例就是由列数column-count来决定。 length 使用固定值来设置元素列的宽度，其主要是由数值和长度单位组成，不过其值只能是正值，不能为负值。

-webkit-column-width:200px;  -moz-column-width:200px;  -o-column-width:200px;  -ms-column-width:200px;  column-width:200px;

CSS3多列布局 column-count

column-count属性主要用来给元素指定想要的列数和允许的最大列数。其语法规则：

column-count：auto | <integer>

值描述 auto 此值为column-count的默认值，表示元素只有一列，其主要依靠浏览器计算自动设置。 integer 此值为正整数值，主要用来定义元素的列数，取值为大于0的整数，负值无效。

-webkit-column-count:4;  -moz-column-count:4;  -o-column-count:4;  -ms-column-count:4;  column-count:4;

CSS3 列间距 column-gap

column-gap主要用来设置列与列之间的间距，其语法规则如下：

column-gap: normal || <length>

值描述 normal 默认值，默值为1em（如果你的字号是px，其默认值为你的font-size值）。 length 此值用来设置列与列之间的距离，其可以使用px,em单位的任何整数值，但不能是负值。

例如：将内容分三列显列，列与列之间的间距为2em，实现代码为：

column-count: 3;column-gap: 2em;

CSS3 列边框 column-rule

column-rule主要是用来定义列与列之间的边框宽度、边框样式和边框颜色。简单点说，就有点类似于常用的border属性。但column-rule是不占用任何空间位置的，在列与列之间改变其宽度不会改变任何列的位置。

column-rule:<column-rule-width>|<column-rule-style>|<column-rule-color>

值描述 column-rule-width 类似于border-width属性，主要用来定义列边框的宽度，其默认值为“medium”，column-rule-width属性接受任意浮点数，但不接收负值。但也像border-width属性一样，可以使用关键词：medium、thick和thin。 column-rule-style 类似于border-style属性，主要用来定义列边框样式，其默认值为“none”。column-rule-style属性值与border-style属值相同，包括none、hidden、dotted、dashed、solid、double、groove、ridge、inset、outset。 column-rule-color 类似于border-color属性，主要用来定义列边框颜色，其默认值为前景色color的值，使用时相当于border-color。column-rule-color接受所有的颜色。如果不希望显示颜色，也可以将其设置为transparent(透明色)

column-rule: 2px dotted green;

CSS3 跨列设置 column-span

column-span主要用来定义一个分列元素中的子元素能跨列多少。column-width、column-count等属性能让一元素分成多列，不管里面元素如何排放顺序，他们都是从左向右的放置内容，但有时我们需要基中一段内容或一个标题不进行分列，也就是横跨所有列，此时column-span就可以轻松实现，此属性的语法如下。

column-span: none | all

值描述 none 此值为column-span的默认值，表示不跨越任何列。 all 这个值跟none值刚好相反，表示的是元素跨越所有列，并定位在列的Ｚ轴之上。

例如：将第一个标题跨越所有列，代码：

column-span:all;

CSS3 盒子模型 box-sizing

在CSS3中新增加了box-sizing属性，能够事先定义盒模型的尺寸解析方式，其语法规则如下：

box-sizing: content-box | border-box | inherit

值描述 content-box 默认值，其让元素维持W3C的标准盒模型，也就是说元素的宽度和高度（width/height）等于元素边框宽度（border）加上元素内距（padding）加上元素内容宽度或高度（content width/ height），也就是element width/height = border + padding + content width / height border-box 重新定义CSS2.1中盒模型组成的模式，让元素维持IE传统的盒模型（IE6以下版本和IE6-7怪异模式），也就是说元素的宽度或高度等于元素内容的宽度或高度。根据传统IE盒模型可知，这里的内容宽度或高度包含了元素的border、padding、内容的宽度或高度（此处的内容宽度或高度＝盒子的宽度或高度—边框—内距） inherit 使元素继承父元素的盒模型模式

CSS3 伸缩布局(弹性盒布局) Flexbox

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool 讲的非常棒

0 0