　　CSS3有一些是与旧版CSS2.1重叠的，有一些是没有浏览器支持的，全学没必要，下面只记录一下有用的。

一、CSS3边框

1、圆角border-radius

border-radius:值越大，角越圆；

div

{

    width:100px;

    height:100px;

    background-color:red;

    border-radius:10px;

    border-top-left-radius:20px;

}

border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;

也可以根据上面4个参数，单独设置某个角。

2、阴影box-shadow

div

{

　　width:100px;

　　height:100px;

　　background-color:yellow;

　　box-shadow: 10px 10px 5px #d8d8d8;

}

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

h-shadow:水平向右偏移量；

v-shadow:垂直向下偏移量；

blur:模糊距离；

spread:阴影尺寸；

color:阴影颜色；

inset:改为内阴影；

3、边框图片 border-image

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

二、CSS3 背景

　　1、background-size:控制背景图片的大小；

background-size:20px 20px;

　　2、background-origin:3个属性可选；

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

　　3、background-clip：规定背景的绘制区域。

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

　　另外在CSS3中，background-image:可以设置多张图片了。

background-image:url(1.gif),url(2.gif);

三、过渡transition

transition:简写属性，用于在一个属性中设置四个过渡属性。
transition-property:规定应用过渡的 CSS 属性的名称。
transition-duration:定义过渡效果花费的时间。默认是 0。
transition-timing-function:规定过渡效果的时间曲线。默认是 "ease"。
transition-delay:规定过渡效果何时开始。默认是 0。

　　其中transition-timing-function过渡时间，有以下几种，你可以规定它过渡的速度。

linear 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

<!DOCTYPE html>

<html>

<head>

<style>

div

{

    width:200px;

    height:200px;

    background-color:#d8d8d8;

}

div:hover

{

    width:300px;

    transition: width 2s;

}

</style>

</head>

<body>

    <div></div>

</body>

</html>

　　鼠标移上3D转换360度。

div:hover

{

    transform: rotateY(360deg);

    transition: transform 2s;

}

四、CSS动画

<!DOCTYPE html>

<html>

<head>

<style>

div

{

    width:100px;

    height:100px;

    background-color:#d5d5d5;

    color:white;

    animation:myfirst 5s;

}

@keyframes myfirst

{

    from {margin-left:20px;}

    to {margin-left:520px;transform: rotateY(360deg);}

}

</style>

</head>

<body>

<div>

    飞啊飞

</div>

</body>

</html>

　　以上是改变位置，并且一边移动一边旋转的动画。

<!DOCTYPE html>

<html>

<head>

<style>

div

{

    width:100px;

    height:100px;

    background-color:#d5d5d5;

    color:white;

    animation:myfirst 5s infinite;

}

@keyframes myfirst

{

    0%   {margin-left:20px;}

    25%  {margin-left:520px;transform: rotateY(360deg);}

    50%  {margin-top:120px;transform: rotateX(180deg);}

    75%  {margin-left:320px;transform: rotateY(360deg);}

    100% {margin-top:0px;transform: rotateX(180deg);}

}

</style>

</head>

<body>

<div>

    飞啊飞

</div>

</body>

</html>

属性自己去查吧。太多。

@keyframes 规定动画。
animation 所有动画属性的简写属性，除了 animation-play-state 属性。
animation-name 规定 @keyframes 动画的名称。
animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function 规定动画的速度曲线。默认是 "ease"。
animation-delay 规定动画何时开始。默认是 0。
animation-iteration-count 规定动画被播放的次数。默认是 1。
animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"。
animation-play-state 规定动画是否正在运行或暂停。默认是 "running"。
animation-fill-mode 规定对象动画时间之外的状态。

五、其他

resize:设置用户可以通过拖拉改变元素尺寸；
opacity:透明度；IE8旧的浏览器是这个filter:Alpha(opacity=50);
max-height：设置元素的最大高度。
max-width：设置元素的最大宽度。
min-height：设置元素的最小高度。
min-width：设置元素的最小宽度。
transform 向元素应用 2D 或 3D 转换。
transform-origin 允许你改变被转换元素的位置。
transform-style 规定被嵌套元素如何在 3D 空间中显示。
perspective 规定 3D 元素的透视效果。
perspective-origin 规定 3D 元素的底部位置。
backface-visibility 定义元素在不面对屏幕时是否可见。
outline-offset 对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。

六、2D转换

matrix(n,n,n,n,n,n) 定义 2D 转换，使用六个值的矩阵；
transform-origin:围绕着旋转的原点，可用X、Y百分比；
translate(x,y) 定义 2D 转换，沿着 X 和 Y 轴移动元素；
----translateX(n) 定义 2D 转换，沿着 X 轴移动元素；
----translateY(n) 定义 2D 转换，沿着 Y 轴移动元素；
scale(x,y) 定义 2D 缩放转换，改变元素的宽度和高度；
----scaleX(n) 定义 2D 缩放转换，改变元素的宽度；
----scaleY(n) 定义 2D 缩放转换，改变元素的高度；
rotate(angle) 定义 2D 旋转的角度(负数逆时针)；
skew(x-angle,y-angle) 定义 2D 倾斜转换，沿着 X 和 Y 轴；
----skewX(angle) 定义 2D 倾斜转换，沿着 X 轴；
----skewY(angle) 定义 2D 倾斜转换，沿着 Y 轴；

<!DOCTYPE html>

<html>

<head>

<style>

div

{

    width:300px;

    height:240px;

    line-height:28px;

    border:2px solid #dcdcdc;

    transform: rotate(30deg);

}

</style>

</head>

<body>

<div>

    <img style="width:300px; height:200px;" src="http://files.cnblogs.com/files/kissdodog/fengjing.gif" />

    <span style="padding-left:20px;">美丽的花海</span>

</div>

</body>

</html>

七、3D转换

matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换，使用 16 个值的 4x4 矩阵；
translate3d(x,y,z) 定义 3D 转化；
translateX(x) 定义 3D 转化，仅使用用于 X 轴的值；
translateY(y) 定义 3D 转化，仅使用用于 Y 轴的值；
translateZ(z) 定义 3D 转化，仅使用用于 Z 轴的值；
scale3d(x,y,z) 定义 3D 缩放转换；
scaleX(x) 定义 3D 缩放转换，通过给定一个 X 轴的值；
scaleY(y) 定义 3D 缩放转换，通过给定一个 Y 轴的值；
scaleZ(z) 定义 3D 缩放转换，通过给定一个 Z 轴的值；
rotate3d(x,y,z,angle) 定义 3D 旋转；
rotateX(angle) 定义沿 X 轴的 3D 旋转；
rotateY(angle) 定义沿 Y 轴的 3D 旋转；
rotateZ(angle) 定义沿 Z 轴的 3D 旋转；
perspective(n) 定义 3D 转换元素的透视视图；

　　3D可以想象一个立体坐标系在屏幕上，X向右，Y向里，Z向上。

<!DOCTYPE html>

<html>

<head>

<style>

div

{

    width:300px;

    height:240px;

    line-height:28px;

    border:2px solid #dcdcdc;

    transform:rotateX(180deg);

}

</style>

</head>

<body>

<div>

    <img style="width:300px; height:200px;" src="http://files.cnblogs.com/files/kissdodog/fengjing.gif" />

    <span style="padding-left:20px;">美丽的花海</span>

</div>

</body>

</html>

CSS3 初步学习的更多相关文章

css3 3d学习心得
css3 3d学习心得卡片反转魔方 banner图首先我们要学习好css3 3d一定要有一定的立体感通过这个图片应该清楚的了解到了x轴 y轴 z轴是什么概念了. 首先先给大家看一个小例子: 卡 ...
json2.js的初步学习与了解
json2.js的初步学习与了解,想要学习json的朋友可以参考下. json2.js的初步学习与了解 1.)该js的下载地址是:http://www.json.org/json2.js 2.)在页面 ...
HTMl5/CSS3/Javascript 学习推荐资源
HTMl5/CSS3/Javascript 学习推荐资源前端的定义应该是数据内容的展示,在国内大家都觉得前端只是HTML+CSS+Javascript,但是实际上与展示有关的都是前端,所以Ruby/ ...
老周的ABP框架系列教程 -》　一、框架理论初步学习
老周的ABP框架系列教程 -- 一.框架理论初步学习 1. ABP框架的来源与作用简介 1.1 简介 1.1.1 ABP框架全称为"ASP.NET Boilerplate ...
初步学习nodejs，业余用node写个一个自动创建目录和文件的小脚本，希望对需要的人有所帮助
初步学习nodejs,业余用node写个一个自动创建目录和文件的小脚本,希望对需要的人有所帮助,如果有bug或者更好的优化方案,也请批评与指正,谢谢,代码如下: var fs = require('f ...
EF Codefirst 初步学习（二）—— 程序管理命令更新数据库
前提:搭建成功codefirst相关代码,参见EF Codefirst 初步学习(一)--设置codefirst开发模式具体需要注意点如下: 1.确保实体类库程序生成成功 2.确保实体表类库不缺少 ...
初步学习python
自计算机诞生以来,也伴随着计算机语言的诞生,现在,全世界的编程语言有600多种,但流行的编程语言也就20多种. Java和C一直占据着前两名.但是近年来伴随着人工智能的发展,Python发展迅猛,以其 ...
Git的初步学习
前言感谢! 承蒙关照~ Git的初步学习为什么要用Git和Github呢?它们的出现是为了用于提交项目和存储项目的,是一种很方便的项目管理软件和网址地址. 接下来看看,一家公司的基本流程图: 集中 ...
语法分析器初步学习——LISP语法分析
语法分析器初步学习——LISP语法分析本文参考自vczh的<如何手写语法分析器>. LISP的表达式是按照前缀的形式写的,比如(1+2)*(3+4)在LISP中会写成(*(+ 1 2)( ...

随机推荐

java.io.IOException: Too many open files
1.描述: 每日一样,例行打开hadoop集群的cloudera manager的管理界面.发现出现了多个bad health的服务.那么出现的这个问题就是查看该服务运行的日志,对应的该服务当中,会包 ...
《Java中的抽象类及抽象类的作用》
//抽象类示例: abstract class Shape1 { { System.out.println("执行Shape的初始化块..."); } private String ...
priority_queue 优先队列用法
//采用默认优先关系: //(priority_queue<int>que;) //Queue 0: // 91 83 72 56 47 36 22 14 10 7 3 // //采用结构 ...
E - 滑雪
Time Limit:1000MS Memory Limit:65536KB 64bit IO Format:%I64d & %I64u Submit Status Pract ...
基于cocos2d-x的Android游戏中使用fmod音频引擎
cocos2d-x的音频引擎是cocosDenshion, 它的Android版比较弱, 只能播放一个背景音乐和些许音效, 如果要实现稍微复杂一点的音频播放, 比如同时播放几个音轨就不能了. 这一点远 ...
python数据结构与算法——图的最短路径（Dijkstra算法）
# Dijkstra算法——通过边实现松弛 # 指定一个点到其他各顶点的路径——单源最短路径 # 初始化图参数 G = {1:{1:0, 2:1, 3:12}, 2:{2:0, 3:9, 4:3}, ...
第七课第六节，T语言流程语句（版本5.0）
select语句 seelct语句,可以说是if语句的升级版,当我们的if语句嵌套太多,或者if语句判断太多的时候,都可以考虑使用选择语句在多条件判断的时候,选择语句的执行速度比多个if语句要快而且 ...
poj3461 字符串匹配熟悉kmp算法第一题
题意: 计算一个字符串在另一个字符串中出现的次数. #include<cstdio> #include<cstring> #include<algorithm> ...
Jquery 中的$(this) 和javascript中的this
this 是 JavaScript 中的关键字. $(this) 可以认为是用 jQuery 包装过 JavaScript 中的 this,包装后 $(this) 就会继承 jQuery 的方法. 本 ...
50 道 Java 线程面试题(转载自牛客网）
下面是 Java 线程相关的热门面试题,你可以用它来好好准备面试. 1) 什么是线程? 线程是操作系统能够进行运算调度的最小单位,它被包含在进程之中,是进程中的实际运作单位.程序员可以通过它进行多处理 ...

CSS3 初步学习