好久没有使用CSS3中的一些特性了,今天偶尔使用发现忘记了许多细节的东西,所以记录一下,作为以后复习的资料:
——多栏布局
通过设置栏位数量或者栏位宽度设置某个模块的显示
column-width:接受px、em;设置栏位的宽度,当浏览器的视口变化时,会相应的增加或减少栏位的数量
column-count:自然数;设置栏位的数量,当浏览器视口变化是,会相应的增加或减少栏位的宽度
column-gap:接受px、em;设置栏位之间的间隔
column-rule:宽度(接受px、em)、分割线样式、分割线颜色;设置栏位的分割线的样式
PS:该属性须添加私有前缀,例如:-moz-column-width:5em;还有一个奇怪的现象,当文本只有英文或数字时不会出现分栏(火狐测试)
——文本阴影
text-shadow: 右侧阴影(1) 下侧阴影(2) 模糊距离(3) 阴影颜色(4)
取值1:单位可以为px、em、%,当为正值时为右侧阴影,负值为左侧阴影
取值2:单位可以为px、em、%,当为正值时为下侧阴影,负值为上侧阴影
取值3:单位可以为px、em、%,可以不写
取值4:不多赘述
PS:可以制作多重的文字阴影,需要将俩组值用逗号隔开,例如:text-shadow:1px 1px 1px #FFFFFF,2px 2px 2px #000000
——盒阴影
box-shadow:取值和文本阴影一样
盒阴影需要注意的就是盒阴影可以取内阴影,需要在取值最前方添加 inset,例如:box-shadow:inset 1px 1px 1px #FFFFFF,该属性也可以制作多重盒阴影
——线性渐变
background:linear-gradient(渐变方向(deg),渐变起点(1),渐变中间点(可以省略)(2),渐变终点(3))
每个渐变的点又可以拆分成 [ 颜色 位置 ]例如:[ #FFFFFF 0% ],完整的线性渐变为:linear-gradient(30deg,#FFFFFF 0%,#12ABABFF 50%,#BABAFF 100%)
——径向渐变
background:radial-gradient(辐射中心点位置,辐射形状,渐变中间点,渐变终点)
这个属性比较复杂,但愿我能说清楚吧。。
渐变起始点位置:取值可以为center(常用值),也可以拆分为[ 20px 20px ],表示距离元素顶部和左面20px的位置
辐射形状:取值有很多,但常用的只有circle(均匀辐射)、ellipse(不均匀辐射,椭圆)。其他的可以去菜鸟教程上去看,很详细
渐变中间点:#FFFFFF 0% (不多赘述)
渐变终点:同上
——重复线性渐变
repeating-linear-gradient(渐变方向,渐变起始点,渐变终点)
属性取值参照线性渐变
——重复径向渐变
repeating-radial-gradient(起始点位置,辐射形状,中间点,终点)
属性取值参照径向渐变
所有的渐变都可以使用多重取值。
关于渐变,如果觉得不好理解或者嫌写代码麻烦的可以在这个网站上进行调试,然后把代码拷下来:http://www.colorzilla.com/gradient-editor/
还有一个用渐变做的特别炫酷的背景图案展示网站:http://lea.verou.me/css3patterns/
先就这么多吧,改天有时间了再进行记录。各位要是发现什么问题,敬请提出。