css3学习笔记

css3整理

简介

l 选择器

l 框模型

l 背景和边框

l 文本效果

l 2D 转换

l 动画

l 多列布局

l 用户界面

 

边框

l border-radius

l       border-radius:25px;   边框圆角

l box-shadow                 边框阴影

l       box-shadow: 10px 10px 5px #888888;

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

l border-image               边框图片

 

背景

l background-size:x,y

l     背景图片的尺寸，绝对大小或者百分比。

l background-origin

l   background-origin:content-box|padding-box 或 border-box;

l    分别表示内部，整体和包含外部整体。

文本效果

l text-shadow

l text-shadow: 5px 5px 5px #FF0000;

l 水平，垂直，模糊距离，颜色。

l word-wrap：

l  p {word-wrap:break-word;}自动换行

 

l 自定义字体

l    声明：@font-face{

l font-family: myFirstFont;

l src: url('Sansation_Light.ttf'),

l      url('Sansation_Light.eot'); /* IE9+ *

l      （font-weight:bold;）/}

l 使用bold字体时，必须再次声明bold字体

 

2D效果

l translate()

l     transform: translate(50px,100px);移动

l rotate()

l    transform: rotate(30deg);旋转角度

l scale([x],[y])

l    放大|缩小，参数：长度倍数，宽度倍数。

l skew()

l   transform: skew(30deg,20deg);

l   翻转给定的角度。x轴，y轴。

l matrix()

l   转、缩放、移动以及倾斜元素。

 

动画

l transition: width 2s, height 2s, transform 2s;

 

l div:hover

 

l 动画

l 声明： @keyframes 

l keyframes myfirst

l {

l from {background: red;}

l to {background: yellow;}

l }

l from-to：0-100%；还可以：0-25%-50%-75%-100%

 

l 使用：animation: myfirst 5s;

 

多列

l column-count

l  分成列数

 

l column-gap

l   列间隔

 

l column-rule

l   规定列之间的宽度、样式和颜色规则。

l column-rule:3px outset #ff0000;

 

l column-span：规定跨越的列数

 

CSS3 用户界面

l resize

l 元素可由用户调整大小

 

l box-sizing

l 属性允许您以确切的方式定义适应某个区域的具体内容。

 

l outline-offset

l outline-offset:15px;

outline-offset 属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。