CSS3 初步学习
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)( ...
随机推荐
- php 常用变量与函数
php 基本函数explode(" ",$str) 字符串转数组 implode(" ",$arr) 数组转字符串strrchr("I love Sh ...
- This tag and its children can be replaced by one <TextView/> and a compound drawable
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=&quo ...
- iOS学习之应用数据存储1-属性列表、偏好设置、NSKeyedArchiver归档
iOS应用数据存储的常用方式(持久化方式) 属性列表(plist)归档(XML文件) Preference(偏好设置) NSKeyedArchiver归档(NSCoding) SQLite3 Core ...
- Javascript笔记一
Javascript: ECMAscript :相当于翻译器 翻译电脑于代码 解释器 DOM document object model 文档 对象 模型 --->document 获取 ...
- magento中如何实现产品图片放大效果
Magento列表页用jQuery实现产品图片放大效果今天看到个网站,鼠标移到列表页的产品图片上,旁边会弹出一个大图,感觉不错,就自己在Magento里写了个.先看看效果 这个效果比较好实现,打开li ...
- 网页闯关游戏(riddle webgame)--游戏玩法和整体介绍
前言: 记得上大学那会, 有位传说中的大牛, 写了一个网页闯关类的游戏. 当时我们玩得不亦乐乎, 也是第一次接触到这种形式的游戏. 不过当时纯玩家心态, 并没有想过去创造一个. 最近想起这事, 突然想 ...
- Jena TDB assembler syntax
1 introduction Assembler is a DSL of Jena to specify something to build, models and dataset, for exa ...
- MongoDB学习笔记一:入门
文档:多个键及其关联的值『有序』地放置在一起. {"greeting" : "Hello, world!", "foo" : 3}集合:一组 ...
- PHP、JAVA、C#、Object-C 通用的DES加密
PHP.JAVA.C#.Object-C 通用的DES加密 PHP: 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 ...
- 盯盯拍Android App 3.0指导
http://www.ddpai.com/bbs/thread-233-1-1.html 视频介绍:http://v.17173.com/v_102_604/MzA0OTAwMDg.html