CSS3属性回顾

好久没有使用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/

先就这么多吧,改天有时间了再进行记录。各位要是发现什么问题,敬请提出。


猜你喜欢

转载自blog.csdn.net/qq8241994/article/details/54409435
今日推荐