AI智能
改变未来

7.16CSS3部分


一些最重要CSS3模块如下:

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

1.有了 CSS3 的

border-image

属性,你可以使用图像创建一个边框(IE不支持)

border-image:url(border.png) 30 30 round;   //平铺border-image:url(border.png) 30 30 stretch;  //拉伸

详细点击此处

2.CSS3 background-image属性,背景图片

background-image: url(img_flwr.gif), url(paper.gif);   //显示两张图片,用逗号分开,显示在最顶端的为第一张,可放多张。background-position: right bottom, left top;  //背景的显示位置background-repeat: no-repeat, repeat; //背景是否重复显示

3.CSS3 background-size 属性

background-size指定背景图像的大小。

4.CSS3 的 background-origin 属性

background-origin

属性指定了背景图像的位置区域。

content-box, padding-box,

border-box

区域内可以放置背景图像。

5.CSS3 background-cli

p属性
CSS3中

background-clip

背景剪裁属性是从指定位置开始绘制
有三个属性

content-box, padding-box,

border-box只有设置了边框宽度才可以剪。

6.背景渐变

线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向
径向渐变(Radial Gradients)- 由它们的中心定义
具体使用点击此处

7.CSS3字体

在新的 @font-face 规则中,您必须首先定义字体的名称(比如 myFirstFont),然后指向该字体文件。

@font-face{font-family: myFirstFont;src: url(\'Sansation_Light.ttf\'),url(\'Sansation_Light.eot\'); /* IE9 */}div{font-family:myFirstFont;}

CSS3字体描述

8.转换

2D转换
3D转换

9.过渡

transition

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。

div {width: 100px;height: 100px;background: red;-webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* For Safari 3.1 to 6.0 */transition: width 2s, height 2s, transform 2s;}div:hover {width: 200px;height: 200px;-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */transform: rotate(180deg);}

详情链接

10.动画

要创建 CSS3 动画,你需要了解 @keyframes 规则。
动画是使元素从一种样式逐渐变化为另一种样式的效果。
您可以改变任意多的样式任意多的次数。
请用百分比来规定变化发生的时间,或用关键词 “from” 和 “to”,等同于 0% 和 100%。
0% 是动画的开始,100% 是动画的完成。
为了得到最佳的浏览器支持,您应该始终定义 0% 和 100% 选择器。
还可以加上位置,2d,3d等。

div{width:100px;height:100px;background:red;animation:myfirst 5s;-moz-animation:myfirst 5s; /* Firefox */-webkit-animation:myfirst 5s; /* Safari and Chrome */-o-animation:myfirst 5s; /* Opera */}@keyframes myfirst{0%   {background:red; left:0px; top:0px;}25%  {background:yellow; left:200px; top:0px;}50%  {background:blue; left:200px; top:200px;}75%  {background:green; left:0px; top:200px;}100% {background:red; left:0px; top:0px;}}

11.CSS3 可以将文本内容设计成像报纸一样的多列布局。

详细属性点击此处

12.在 CSS3 中, 增加了一些新的用户界面特性来调整元素尺寸,框尺寸和外边框。

点击此处了解

13.CSS3图片

大部分靠伪类

:hover :active

实现
点击此处

14.CSS3分页

如果你的网站有很多个页面,你就需要使用分页来为每个页面做导航。
详细点击此处

15.CSS3

box-sizing

属性可以设置 width 和 height 属性中包含了 padding(内边距) 和 border(边框)。

16.CSS3弹性盒子Flex Box

菜鸟教程链接
阮一峰老师教程链接
flexbox的练习网站

17.CSS3 多媒体查询

详情点击此处

赞(0) 打赏
未经允许不得转载:爱站程序员基地 » 7.16CSS3部分