CSS3一览（1） 文本阴影和渐变

CSS3的新功能我也看了一一些，做了一个简要的笔记，总结一下，当成学习笔记发上来。

阴影 box-shadow

格式：box-shadow:h-shadow v-shadow blur spread color inset

说明

值	说明
h-shaodw	必要 水平阴影位置 可为负
v-shadow	必要 垂直阴影位置 可为负
Blur	可选 模糊距离
Spread	可选 阴影尺寸
Color	可选 阴影颜色
Inset	可选 将外部阴影改为内部阴影

 

 

文本阴影 text-shadow

格式：text-shadow：h-shadowv-shadow blur color

 

圆角 border-radius

复合属性 应为border-*-radius

简写为border-radius时，书写方向为从左上按顺时针到左下，写三个的话，左下的值等于右上的，写两个的话，对角相等

 

渐变

1. 线性渐变linear-gradient

格式：linear-gradient(角度,颜色 所占渐变位置大小，[颜色 所占渐变位置大小…])

例子：background:linear-gradient(toright,transparent 50%,red,orange,yellow)

 

2. 放射渐变radial-gradient

格式：radial-gradient(角度,颜色 所占渐变位置大小，[颜色 所占渐变位置大小…])默认是以中心椭圆放射的

例子：radial-gradient(circle,transparent 30%,red,blue,orange)

 

 

文本描边text-stroke

格式：text-stroke：text-stroke-widthtext-stroke-color

文本填充text-fill-color

格式：text-fill-color:color

如果设置了color又设置了文本填充，文本填充会覆盖color的设置