CSS3笔记
2016-03-31 16:33
645 查看
CSS3的主要围绕CSS2.1的基础上新增加了模块,因此做到做到向后兼容,最重要的CSS3模块如下
1、选择器
2、盒模型
3、背景和边框
4、文字特效
5、2、3D转换
6、动画
7、多列布局
8、用户界面
一、边框---圆角边框、边框阴影、边框图片
写法格式表达式
border-image:source slice width outset repeat;
slice图像边界向内偏移、width宽度、outset外部绘制
戳这里有关于圆角参数详细解释,圆角有水平方向和垂直方向之分
box-shadow:h-shadow v-shadow blur模糊度 spread模糊半斤 color inset;
参数一共六个x、y轴的偏移,[模糊距离],[模糊度],阴影颜色,inset改为内阴影
渐变
二、图片背景
图片背景主要包括的属性是background-size;两张背景图片;background-clip;backgroud-origin;
三、文本阴影、font-face
四、2D转换transform
主要包括六种方式旋转rotata,扭曲skew,缩放scale,移动translate,矩阵变形matrix
五、过渡transition
简写一个属性一个时间,逗号分隔就好了
分开写的属性有
transition-property属性、transition-duration花费时间,transition-timing-function时间曲线,transition-delay开始时间
6、动画
7、column-count,column-gap,column-rule;多列布局,模仿报纸
8、用户界面包括盒子模型等主题
渐变 line-gradient radial-gradient
-moz-linear-gradient(top,#ccc,#000);//目前还需要前缀支持,IE需要滤镜实现
1、选择器
2、盒模型
3、背景和边框
4、文字特效
5、2、3D转换
6、动画
7、多列布局
8、用户界面
一、边框---圆角边框、边框阴影、边框图片
写法格式表达式
border-image:source slice width outset repeat;
slice图像边界向内偏移、width宽度、outset外部绘制
戳这里有关于圆角参数详细解释,圆角有水平方向和垂直方向之分
box-shadow:h-shadow v-shadow blur模糊度 spread模糊半斤 color inset;
参数一共六个x、y轴的偏移,[模糊距离],[模糊度],阴影颜色,inset改为内阴影
渐变
二、图片背景
图片背景主要包括的属性是background-size;两张背景图片;background-clip;backgroud-origin;
三、文本阴影、font-face
四、2D转换transform
主要包括六种方式旋转rotata,扭曲skew,缩放scale,移动translate,矩阵变形matrix
五、过渡transition
简写一个属性一个时间,逗号分隔就好了
分开写的属性有
transition-property属性、transition-duration花费时间,transition-timing-function时间曲线,transition-delay开始时间
div { transition-property:width; transition-duration;1; transition-timing-function:linear; transition-delay:2s; } div{ transition:width 1s linear 2s; }
6、动画
7、column-count,column-gap,column-rule;多列布局,模仿报纸
8、用户界面包括盒子模型等主题
渐变 line-gradient radial-gradient
-moz-linear-gradient(top,#ccc,#000);//目前还需要前缀支持,IE需要滤镜实现
相关文章推荐
- web CSS 颜色渐变代码
- DOM操作表格和样式
- <css 四>a href
- CSS:line-height:150%与line-height:1.5的区别是什么?
- css 透明
- CSS中!important的使用
- CSS3 选择器——伪类选择器
- 一款绚丽的菜单,拥有个各种样式和动画
- 伪元素控制表单样式
- CSS中的textarea的一些设置之resize属性(个人笔记)
- CSS布局基础之一设备像素,设备独立像素,设备像素比,css像素之间的关系
- 使用CSS绘制三角形
- H5移动前端开发常用高能css3汇总
- 你所不知的 CSS ::before 和 ::after 伪元素用法
- css3制作tab卡片选中小尖角
- 二级菜单总结
- Html+CSS input type=file 文件类型限制属性 accept (HTML 5)
- 根据浏览器显示界面大小变换,替换css文件方法
- CSS实现的loading页面等待效果
- LESS CSS 框架简介