css3取值html,css3基础

css3新特性

文本阴影

动态效果

排版方式

圆角边框

阴影效果

旋转效果

浏览器

w3c制订标准慢，浏览器厂商快速加入新属性的支持，加前缀

w3c确定标准后，全面支持，去掉前缀

浏览器内核

浏览器

css3

Webkit

Safari Chrome

-webkit-

Gecko

Firefox

-moz-

Presto

Opera

-o-

Trident

IE

-ms-

圆角边框border-radius

border-top-left-radius 左上角的形状

border-top-right-radius 右上角的形状

border-bottom-left-radius 左下角的形状

border-bottom-right-radius 右下角的形状

取值

border-radius

水平值x

垂直值y

决定形状是什么如 椭圆 圆

例子

div{

height:100px;

width:150px;

border:1px solid blue;

border-top-left-radius:40px 20px; (水平40，垂直20)

border-bottom-right-radius:20px;(水平垂直都20)

}

例子

div{

width:350px;

height:50px;

border:2px solid #a1a1a1;

background:#ddd;

border-radius:25px;

}

bdrs扩展

-webkit-border-radius:|;

-moz-border-radius:|;

border-radius:|;

输入具体值就可以

阴影box-shadow

inset 水平偏移 垂直偏移 模糊距离 颜色

inset 可选，内部阴影

outset 默认值，外部阴影

例子

div

{

width:300px;

height:100px;

background-color:#f90;

box-shadow:10px 10px 5px #888;(水平垂直正数右下角偏移，5px是模糊范围，范围越大阴影越大)

}

bxsh扩展

-webkit-box-shadow:inset hoff voff blur color;

-moz-box-shadow:inset hoff voff blur color;

box-shadow:inset hoff voff blur color;

文本与文字

text-shadow属性

word-wrap属性

@font-face规则

text-shadow属性

设置阴影: 水平偏移 垂直偏移 阴影大小 颜色

例子

阴影

h1{

text-shadow:2px 2px #FF0000；

} (省略阴影大小 文字大小相同)

h1{

text-shadow:2px 2px 8px blue;

}

文字描边

例子

h1{

text-shadow:0 0 3px #f00;

}

h1{

color:white;

text-shadow:2px 2px 4px #000;

}

word-wrap属性

允许长单词、URL强制进行换行

normal

break-word

例子：对比前后代码为设置后

p.wdrp

{

width:8em;

border:1px solid #333;

word-wrap:break-word;

}

最长英文单词，pneumonoultramicroscopicsilicovolcanoconiosis

@font-face规则

web字体，放在服务器上，需要时下载使用

利用@font-face规则，定义web字体，并引用需要字体的四种文件格式，确保能在主流浏览器中都能正常显示该字体

字体文件后缀

适用于浏览器

.TTF或.OTT

Firefox、Safari、Opera

.EOT

Internet Explorer 4.0+

.SVG

Chrome、IPhone

.WOFF

Chrome、Firefox

例子：基于已经下载好字体并放在fonts文件夹内

@font-face{

font-family:kastlerFont; (定义字体名称)

src:url('fonts/kastler.ttf') (来源)

('fonts/kastler.eot')

('fonts/kastler.woff')

('fonts/kastler.svg')

}

p{

font-family:kastlerFont; (引用字体)

}

2D变换：transform属性

对元素进行旋转、缩放、移动、拉伸

transform属性

rotate()

scale()

transform:rotate( deg);

deg为单位正值顺时针负值逆时针旋转

例子

css

div{

width:100px;

height:75px;

background-color:#ccc;

border:1px solid black;

}

#rotateDiv{

transform:rotate(30deg);

}

html

web

web

trsf扩展

#rotateDiv{

transform:rotate(30deg);

-ms-transform:rotate(30deg);

-moz-transform:rotate(30deg);

-wedkit-transform:rotate(30deg);

-o-transform:rotate(30deg);

}

缩放transform:scale()

transform:scale(x,y)

x:水平方向缩放的倍数

y:垂直方向缩放的倍数，若省略，同x

0-1，缩小；>1放大

过度与动画

过渡

transition属性

transition-property

transition-duration

transition-timing-function

transition-delay

动画

@keyframes规则

animation属性

过渡transition

将元素的某个属性从"一个值"

在指定的时间内过渡到"另一个值"

transition 属性名 持续 时间 过渡方法

transition-property 属性名(若多个逗号隔开)|all 对哪个属性进行变化

transition-duration 持续时间

transition-timing-function 过渡使用的方法(函数)

transition-timing-function属性取值

值

描述

linear

匀速

ease

慢快慢

ease-in

慢快

ease-out

快慢

ease-in-out

慢快慢

例子 鼠标悬停 一秒内变化

css:

div{

height:30px;

width:100px;

line-height:30px;

border-radius:5px;

color:#000;

background-color:silver;

transition:all 1s linear；

}

div:hover{

color:white;

background-color:#45B823;

}

html:

web design

animation动画

步骤

定义动画 @keyframes(关键帧)规则

调用动画 animation属性

例子需要套入html结构

css

@keyframes mycolor(动画名称)

{

0% {background-color:red;}

30% {background-color:blue;}

60% {background-color:yellow;}

100% {background-color:green;}

}

html

div:hover

{

animation:mycolor 5s linear;

}

animation属性取值

animation 简写

animation-name： 引用@keyframes动画的名称

animation-duration： 动画完成时间

animation-timing-function： 规定动画的速度曲线。默认"ease"

animation-play-state： running|paused

把子属性写在animation属性

先写动画 名字，时长，方式

animation-name

animation-duration

animation-timing-function

3D变换

3D

transform-style:preserve-3D

旋转

transform属性

rotateX()

rotateY()--------角度deg

rotateZ()

透视

perspective属性

既是透视关系值设置越大越不明显

使用时需设置

transform-style:preserve-3D

以及

perspective:100px(自行取值)