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时，书写方向为从左上按顺时针到左下，写三个的话，左下的值等于右上的，写两个的话，对角相等

 

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

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

 

放射渐变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的设置