CSS3 新特性
来源:互联网 发布:便携网络图形图像 编辑:程序博客网 时间:2024/06/14 04:20
CSS3 是最新的 CSS 标准,并且完全向后兼容,不过目前W3C 仍然在对 css3 规范进行开发,虽然标准的规范还没有正式发布,但是现代浏览器已经支持相当多的 CSS3 属性了。CSS3 提供了很多可以把玩的新特性,模糊了之前只控制样式的定义,让之前很难处理的样式(如:圆角、多列等)和只能通过JavaScript来实现的动画效果等现在都能通过CSS3 新特性提供的属性很轻松的实现,功能是越来越强大。
一、CSS3 边框
在 css3 中新增的边框属性如下:
创建圆角边框 示例
在CSS2中添加圆角很棘手,我们不得不在每个角落使用不同的图像。但是在CSS3中通过添加一个属性就可以搞定,那就是border-radius
,代码如下:
语法: border-radius : length length;
length: 由浮点数字和单位标识符组成的长度值(如:20px)。不可为负值,如果为负值则与0展示效果一样。第一个值设置其水平半径,第二个值设置其垂直半径,如果第二个值省略则默认第二个值等于第一个值。
- 1
- 2
- 3
- 4
- 5
- 1
- 2
- 3
- 4
- 5
border-radius
是4个角的缩写方法。四个角的表示顺序与border
类似按照border-top-left-radius
、border-top-right-radius
、border-bottom-right-radius
、border-bottom-left-radius
的顺序来设置:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
border-radius
指定不同数量的值遵循对角相等的原则,即指定了值的取指定值,没有指定值的与对角值相等,对角相等模型如下:
边框阴影
通过属性box-shadow
向边框添加阴影。
语法: {box-shadow : [inset] x-offset y-offset blur-radius extension-radius spread-radiuscolor}
说明:对象选择器 {box-shadow:[投影方式] X轴偏移量 Y轴偏移量 模糊半径 阴影扩展半径 阴影颜色}
- 1
- 2
- 3
- 4
- 1
- 2
- 3
- 4
box-shadow属性的参数设置取值:
阴影类型:此参数可选。如不设值,默认投影方式是外阴影;如取其唯一值inset ,其投影为内阴影;
X-offset:阴影水平偏移量,其值可以是正负值。如果值为正值,则阴影在对象的右边,其值为负值时,阴影在对象的左边;
Y-offset:阴影垂直偏移量,其值也可以是正负值。如果为正值,阴影在对象的底部,其值为负值时,阴影在对象的顶部;
Blur-radius:阴影模糊半径:此参数可选,但其值只能是为正值,如果其值为0时,表示阴影不具有模糊效果,其值越大阴影的边缘就越模糊;
Extension-radius阴影扩展半径:此参数可选,其值可以是正负值,如果值为正,则整个阴影都延展扩大,反之值为负值时,则缩小;
阴影颜色:此参数可选。如不设定颜色,浏览器会取默认色,但各浏览器默认取色不一致,特别是在webkit内核下的safari和chrome浏览器下表现为透明色,在Firefox/Opera下表现为黑色(已验证),建议不要省略此参数。
边框图片
语法:
border-image : border-image-source || border-image-slice [ / border-image-width] || border-image-repeat
border-image : none | image [ number | percentage]{1,4} [ / border-width>{1,4} ] ? [ stretch | repeat | round ]{0,2}
- 1
- 2
- 3
- 4
- 5
- 1
- 2
- 3
- 4
- 5
border-image的参数说明:
- none:是border-image的默认值,如果取值为none时,表示边框无背景图片;
- image:设置border-image的背景图片,这个跟background-image一样,使用绝对或相对的url地址,来指定背景图片;
- number:number是一个数值,用来设置边框的宽度,其单位是px,其实就像border-width一样取值,可以使用1~4个值,其具体表示四个方位的值,可以参考border-width的设置方式;
- percntage:percntage也是用来设置边框的宽度,跟number不同之处是,其使用的是百分比值来设置边框宽度;
- stretch,repeat,round:他们是用来设置边框背景图片的铺放方式,类似于background-position,其中stretch是拉伸,repeat是重复,round是平铺,stretch为默认值。
border-image-slice
这玩意比较复杂,感觉是看明白了,但是就是做不出例子的效果,不知道是资源图片的原因还是写法的原因,还是浏览器的原因还是写例子的人自己都没整明白,这东西现在比较糊,到时整明白在整理。
二、CSS3 背景
background-size
属性 示例
在 CSS3 之前,背景图片的尺寸是由图片的实际尺寸决定的。在 CSS3 中,可以设置背景图片的尺寸,这就允许我们在不同的环境中重复使用背景图片。可以像素或百分比规定尺寸。如果以百分比规定尺寸,那么尺寸相对于父元素的宽度和高度。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
background-origin
属性 示例
规定背景图片的定位区域,背景图片可以放置于 content-box
、padding-box
或 border-box
区域,
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 1
- 2
- 3
- 4
- 5
- 6
- 7
区域的具体划分如下:
background-clip
属性 示例
与background-origin
属性相似,规定背景颜色的绘制区域,区域划分与background-origin
属性相同。
- 1
- 2
- 3
- 4
- 1
- 2
- 3
- 4
CSS3 多重背景图片 示例
CSS3 允许为元素设置多个背景图像
- 1
- 2
- 3
- 1
- 2
- 3
三、CSS3 文本效果
text-shadow
属性 示例
给为本添加阴影,能够设置水平阴影、垂直阴影、模糊距离,以及阴影的颜色。
- 1
- 2
- 3
- 1
- 2
- 3
text-wrap 属性 示例
设置区域内的自动换行。
语法: text-wrap: normal | none | unrestricted | suppress | break-word;
- 1
- 2
- 1
- 2
四、CSS3 字体
字体定义
在 CSS3 之前,web 设计师必须使用已在用户计算机上安装好的字体。但是通过 CSS3,web 设计师可以使用他们喜欢的任意字体。当找到或购买到希望使用的字体时,可将该字体文件存放到 web 服务器上,它会在需要时被自动下载到用户的计算机上。字体需要在 CSS3 @font-face 规则中定义。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
使用粗体字体
“Sansation_Light.ttf”文件 是定义的正常字体,”Sansation_Bold.ttf” 是另一个字体文件,它包含了 Sansation 字体的粗体字符。只要 font-family 为 “myFirstFont” 的文本需要显示为粗体,浏览器就会使用该字体。
(其实没弄清楚这样处理的原因,经测试直接在html中通过 b 标签也可以实现加粗的效果)
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
五、CSS3 2D 转换
通过 CSS3 转换,我们能够对元素进行移动、缩放、转动、拉长或拉伸,转换是使元素改变形状、尺寸和位置的一种效果。
translate() 方法 示例
通过 translate(x , y) 方法,元素根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数从其当前位置移动,x为正值向右移动,为负值向左移动;y为正值向下移动,为负值向上移动;
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 1
- 2
- 3
- 4
- 5
- 6
- 7
rotate() 方法 示例
控制元素顺时针旋转给定的角度。为正值,元素将顺时针旋转。为负值,元素将逆时针旋转。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 1
- 2
- 3
- 4
- 5
- 6
- 7
scale() 方法 示例
根据给定的宽度(X 轴)和高度(Y 轴)参数,控制元素的尺寸的增加、减少。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 1
- 2
- 3
- 4
- 5
- 6
- 7
skew() 方法 示例
根据给定的水平线(X 轴)和垂直线(Y 轴)参数设置元素翻转给定的角度。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
matrix() 方法 示例
matrix() 方法把所有 2D 转换方法组合在一起。matrix() 方法需要六个参数,包含数学函数,允许旋转、缩放、移动以及倾斜元素。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
2D Transform 方法汇总
六、CSS3 3D 转换
CSS3 允许使用 3D 转换来对元素进行格式化
rotateX() 方法 示例
- 1
- 2
- 3
- 4
- 5
- 6
- 1
- 2
- 3
- 4
- 5
- 6
rotateY() 旋转 示例
- 1
- 2
- 3
- 4
- 5
- 6
- 1
- 2
- 3
- 4
- 5
- 6
2017百度前端学院热身试题 百度前端学院热身试题-第三题 就重点考察了元素2D、3D转换的内容,说明这部分是比较适用比较重要的部分,要熟练掌握。
七、CSS3 过渡
通过 CSS3可以在不使用 Flash 动画或 javascript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果。
要实现这一点,必须规定以下两项内容:
- 设置添加过渡效果的 CSS 属性;
- 设置过渡效果的时长;
注意: 如果时长未设置,则不会有过渡效果,因为默认值是 0。
单项改变 示例
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
注意: 当鼠标移出元素时,它会逐渐变回原来的样式。
多项改变 示例
如需向多个样式添加过渡效果,请添加多个属性,由逗号隔开。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
过渡属性详解 详解
transition
是简写属性,
语法: transition : transition-property | transition-duration | transition-timing-function | transition-delay;
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 1
- 2
- 3
- 4
- 5
- 6
- 7
八、CSS3 动画
通过 CSS3可以创建动画,这些动画可以取代网页中的画图片、Flash 动画以及 JavaScript。
CSS3 中通过@keyframes 规则来创建动画。在 @keyframes 中规定某项 CSS 样式,就能创建由当前样式(动画开始前的样式)逐渐改为新样式(需要变到的样式)的动画效果。
通过from , to关键字设置动画发生的时间 示例
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
通过百分比设置动画发生的时间 示例
动画是使元素从一种样式逐渐变化为另一种样式的效果。可以改变任意多的样式任意多的次数。可以用关键词 “from” 和 “to”来设置动画变化发生的时间,其效果等同于 0% 和 100%。0% 是动画的开始,100% 是动画的完成。为了得到最佳的浏览器支持,应该始终定义 0% 和 100% 选择器。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
动画属性详解
animation
是除了 animation-play-state
属性所有动画属性的简写属性。
语法: animation : animation-name | animation-duration | animation-timing-function | animation-delay | animation-iteration-count | animation-direction
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
九、CSS3 多列
通过 CSS3够创建多个列来对文本进行布局,就像我们经常看到的报纸的布局一样。
CSS3 创建多列 示例
column-count
属性规定元素应该被分隔的列数。
- 1
- 2
- 3
- 4
- 5
- 6
- 1
- 2
- 3
- 4
- 5
- 6
CSS3 规定列之间的间隔 示例
column-gap
属性规定列之间的间隔。
- 1
- 2
- 3
- 4
- 5
- 6
- 1
- 2
- 3
- 4
- 5
- 6
CSS3 列规则 示例
column-rule
属性设置列之间的宽度、样式和颜色规则。
语法: column-rule : column-rule-width | column-rule-style | column-rule-color
- 1
- 2
- 3
- 4
- 5
- 1
- 2
- 3
- 4
- 5
十、CSS3 用户界面
CSS3 resize 示例
在 CSS3中resize
属性设置是否可由用户调整元素尺寸。
- 1
- 2
- 3
- 4
- 5
- 1
- 2
- 3
- 4
- 5
CSS3 box-sizing 示例
box-sizing
属性允许您以确切的方式定义适应某个区域的具体内容。
这个属性没太懂
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
CSS3 outline-offset 示例
outline-offset
属性对轮廓进行偏移,并在超出边框边缘的位置绘制轮廓。
轮廓与边框有两点不同:
- 轮廓不占用空间;
- 轮廓可能是非矩形;
- CSS3新特性
- CSS3的新特性
- CSS3新特性一览
- CSS3新特性
- CSS3新特性简介
- CSS3新特性
- css3+html5新特性
- CSS3 新特性小结
- CSS3新的特性
- CSS3の新特性
- CSS3新特性学习
- css3新特性
- CSS3 新特性实例
- css3新特性
- CSS3新特性(一)
- CSS3新特性(二)
- CSS3新特性
- CSS3新特性概览
- 几个coding相关的电子杂志阅读
- 计算机图形学学习笔记 第三章 光栅
- iOS内存管理之引用计数初识
- 欢迎使用CSDN-markdown编辑器
- 【机器学习笔记之五】用ARIMA模型做需求预测用ARIMA模型做需求预测
- CSS3 新特性
- UART
- Haproxy
- HTML笔记(九)bootstrap之导航栏
- iOS 数组中replaceObjectAtIndex方法
- 欢迎使用CSDN-markdown编辑器
- 简单的动态规划问题(帮助理解动态规划)
- 配置java环境变量(win版本)
- Add Binary