CSS滤镜(filter)用于定义滤镜效果,也就是改变元素的透明度、对比度、亮度和模糊度等效果。其包含一系列的函数来实现各种滤镜效果,也可以将这些函数组合起来,以此达到更复杂的滤镜效果。
CSS媒体查询
一个媒体查询由一个可选的媒体类型和零个或多个使用媒体功能限制样式表范围的表达式组成, 例如宽度,高度和颜色等。这些表达式描述了媒体特征,最终会被解析为true或false。如果媒体查询中指定的媒体类型匹配展示文档所使用的设备类型,并且所有的表达式的值都是true,那么该媒体查询的结果为true。
CSS3 animation
CSS3的animation属性可以绘制各种复杂的动画,animation属性由以下8种属性的简写形式: animation-name,animation-duration,animation-timing-function,animation-delay,animation-iteration-count,animation-direction 和 animation-fill-mode。下面一一介绍这八种属性。
CSS3 transition
transform呈现的是一种变形结果,而Transation呈现的是一种过渡,通俗点说就是一种动画转换过程,如渐显、渐弱、动画快慢等。transition可以和Transform同时使用。transition是一个复合属性,可以同时定义transition-property、transition-duration、transition-timing-function、transition-delay子属性值。
CSS3 transform
transform属性能对元素对象进行变形操作,主要包括以下几种:旋转rotate、缩放scale、移动translate、倾斜skew以及矩阵变形matrix。基本语法:
1 | transform: none | <transform-function>[<transform-function>]* |
none
表示不进行变换;<transform-function>
表示一个或多个变换函数,以空格分开,因此可以同时对一个元素进行transform的多种属性操作。包括:
CSS3背景属性
CSS3边框相关属性
CSS3标准发布之前,对边框的样式的设定是非常单调的。CSS3标准发布之后,我们可以使用图片来定制边框,可以设置元素的阴影以及选择使用哪种盒子模型等。
border-image
border-image
属性可以用图片作为边框样式。border-image
属性可以拆分为5个属性:
1 | border-image-source // 边框图片源 |
BootstrapValidator指南
BootstrapValidator是一款基于jQuery的Bootstrap表单校验插件,提供了非常丰富的校验规则。
准备工作
要使用BootstrapValidator,需要先引入必要的文件:
1 | <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap-3.0.3.min.css"/> |
其中需要注意的是jQuery版本必须大于1.9.1。文件下载地址:https://drive.google.com/open?id=1FVhZT899gewytpLVTwD-4x2uR1tSXFkN。