Css3整理集合干货

内容简介：Css3整理集合干货

把以前的手写笔记整理到 博客 中...

css3边框：

border-radius 圆角
border-image 边背景图
box-shadow 阴影

border-radius圆角

设置百分比或者值px都可以 50% 为正圆 一个值为默认设置所有边角 四个值代表设置四个边角

box-shadow 阴影

设置 四个值 按顺序分别是

offset-x 代表x轴偏移值 值为正则代表右侧，负代表左侧

offset-y 代表y轴偏移值 值为正则代表上方，负代表下方

blur 代表阴影的模糊半径 值越大则越模糊 负值不合法

color 代表模糊的颜色 可设置 red 或者 #f1f1f1 或者 rgba 等类型值

多重阴影 一个div上可以添加多个阴影效果，方法只需把添加的效果用 逗号 隔开即可

参考文章: http://www.iyangqiong.com/web/318.html

border-image边角背景图

三个值 第一个是 url(文件路径) 第二个是 裁剪位置(默认像素 ) 第三个是 重复性 这个一定程度赶上跟 border宽度 上有关系

backgournd-image
background-size
background-origin
background-clip

background-image

可添加多个背景图 用 逗号 相隔 对应 background-position background-repeat 设置背景图的位置和重复

background-size

可指定 background-size 为背景图片设置大小 可设置宽和高

background-origin

指定了背景图的位置区域 三个值对应区域如图

background-clip

这个属性是指从指定位置开始绘制 三个值跟上边的一样

css3渐变

分两种渐变： 线性渐变（Linear Gradients） - 向下/向上/向左/向右/对角方向和 径向渐变（Radial Gradients） - 由它们的中心定义

也就是一个是从 一边到另一边 一个是从 中间到四周 的方式渐变

首先linear-gradient 线形渐变(默认从上到下)

background: linear-gradient(direction, color-stop1, color-stop2, ...);
direction值可为开始方向也可为角度deg 后面是开始颜色和结束颜色(可为rgba也可为多个颜色值)
repeating-linear-gradient()重复性渐变

然后radial-gradient 线形渐变(四周向外扩)

background: radial-gradient(center, shape size, start-color, ..., last-color);
分别代表 渐变中心(默认center)，形状，大小，开始颜色，结束颜色

css3文本效果

text-shadow
box-shadow 
text-overflow
word-wrap
word-break

text-shadow 文本阴影

text-shadow:四个值 如同 box-shadow

text-soverflow 文本溢出

text-overflow: 一个值 两个内容
elipsis 溢出裁剪省略号  clip溢出裁剪

word-wrap 文本换行

word-wrap:break-word;强制自动换行

word-break 文本拆分换行

word-break:一个值 两个内容
keep-all 保持单词完整 break-all 保持每行够满字符

@font-face自定义字体

@font-face{
//自定义字体名字
font-family:name;
src:url('字体文件.ttf'),
//ie9专用字体
url('字体文件.eot');
//使用粗体文本
font-weight:bold;
}

使用的时候 font-family： 自定义名字

动画相关

css3 2d转换transform:

translate()
rotate()  旋转
scale()  缩放
skew()
matrix()

translate() 位移

transform:translate(x,y) 
两个值 x正即向右移动，负值即是向左移动 y正向上负向下
也可单独位移 **translateX(n)**  **translateY(n)**

rotate() 旋转

rotate(deg) 正是准时针负是逆时针

scale() 缩放

scale(x,y) x是宽度x倍   y是长度y倍
也可单独缩放 **scaleX(n)**  **scaleY(n)**

skew() 倾斜

skew(deg,deg) 表示向x轴和y轴倾斜的方向
也可单独倾斜 **　skewX(n)**  **　skewY(n)**

matrix() 集合

matrix(位移，旋转，缩放，倾斜)表示所有transform的集合都可以写在这里

css3 3d转换 改变xyz轴实现效果

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 转换元素的透视视图

CSS3 过渡

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

CSS3 动画

@feyframes规则
animation

1.首先使用@keyframes创建动画 把它绑定到一个选择器。否则动画不会有效果

+ 规定动画的名称
+ 规定动画的时长

2.然后用 animation 动画捆绑到div元素

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

• 前端面试题干货集合
• Java集合干货——ArrayList源码分析
• Java集合干货——CopyOnWriteArrayList源码分析
• Scala 中的集合（二）：集合性能比较
• Scala 中的集合（二）：集合性能比较
• 《面试知识，工作可待：集合篇》：Java 集合面试知识大全

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。