基础

CSS3多列布局(Multi-column)

多列布局(Multi-column)多列布局就是将文本内容设计成像报纸那样的多列布局。或者说在之前我们通过js或者JQuery才能实现的瀑布流,在CSS3中我们可以直接通过CSS就可以实现,虽然有兼容性上面的问题。。兼容性IE10+、FireFox16+、Chrome26+、Safari6.1+、Op

CSS动画(animation)

通过之前的学习我们知道,利用transition属性可以实现简单的过渡动画,但过渡动画仅能指定开始和结束两个状态,整个过程都是由特定的函数来控制的,不是很灵活。本节我们再来介绍一种更为复杂的动画——animation。动画(animation):和过渡类似,

CSS过渡效果(transition)

通常当CSS的属性值更改后,浏览器会立即更新相应的样式,例如当鼠标悬停在元素上时,通过:hover选择器定义的样式会立即应用在元素上。在CSS3中加入了一项过渡功能,通过该功能您可以将元素从一种样式在指定时间内平滑的过渡到另一种样式,类似于简单的动画,但无需借助flash或JavaScript。

CSS3中3D转换形式

CSS3D转换在CSS中,除了可以对页面中的元素进行2D转换外,您也可以对象元素进行3D转换(将页面看作是一个三维空间来对页面中的元素进行移动、旋转、缩放和倾斜等操作)。与2D转换相同,3D转换同样不会影响周围的元素,而且可以与其它元素重叠。

CSS3中2D转换形式

CSS中的2D转换允许我们在二维空间中执行一些基本的变换操作,例如移动、旋转、缩放或扭曲等,变换后的元素与绝对定位的元素类似,不会影响周围的元素,但可以和周围的元素重叠,不同的是,转换后的元素在页面中任然会占用为转换之前的空间。下面我们来介绍2D的转换:一、移动translate()根据左(X轴)和顶

CSS阴影效果

css阴影效果是我们经常使用的一个css属性,但你有仔细了解过它吗?是不是用的时候直接从蓝湖上复制过来就行了,那你了解它的每个参数吗?用阴影又能实现哪些好看的效果呢?在网页设计中常常要使用到阴影效果,通过阴影效果可以很好的突出一个元素,在CSS3出现之前,

CSS渐变色(颜色渐变)

CSS中的渐变指的是两种或多种颜色之间的平滑过渡,以前我们必须使用事先定义好的图像来实现渐变效果,CSS3为实现渐变效果提供了一种灵活的解决方案。通过CSS3您可以定义三种类型的渐变,分别为线性渐变(通过linear-gradient()函数创建)、径向渐变(通过radial-gradient()函数

CSS边框图片(border-image)

对于元素的边框我们除了可以使用之前介绍的一些默认样式外,还可以通过CSS3中的border-image属性使用图像来作为元素的边框,以创建出丰富多彩边框效果。border-image属性可以通过一些简单的规则,将一副图像划分为9个单独的部分,浏览器会自动使用相应的部分来替换边框的默认样式。

CSS圆角属性(border-radius)

在制作网页的过程中,有时我们可能需要实现圆角的效果,以前的做法是通过切图(将设计稿切成便于制作成页面的图片),使用多个背景图像来实现圆角。在CSS3出现之后就不需要这么麻烦了,CSS3中提供了一系列属性来设置元素的圆角效果,如下所示:border-top-left-radius为元素左上角设置圆角效果

CSS媒体查询(@media)全面解析

随着移动设备的快速普及,用户不再只是通过传统的电脑系来浏览Web内容,越来越多的用户开始使用各种尺寸的智能手机、平板电脑或者其它设备来浏览Web内容,为了确保使用不同设备的用户都能拥有不错的体验就需要用到媒体查询。媒体查询是CSS样式表最重要的功能之一,