HTML5实践 -- 介绍css3中的几个属性:text-shadow、box-shadow 和 border-radius
2012-11-21 15:38
786 查看
转载请注明原创地址:/article/4938635.html
今天我们的内容是css3的text-shadow、box-shadow 和 border-radius几个属性的介绍,他能增强页面布局,值得学习。
RGBA可以用于任何和color有关的属性,例如字体颜色、边框颜色、背景颜色和阴影颜色等。
为x-offset设置负值会将阴影位置改变到左边,为y-offset设置负值会将阴影位置改变到头部。我们也可以使用RBGA设置阴影的颜色。
你可以设置一组text-shadow,中间以逗号相隔。下面的例子使用两个text-shadow(顶部1px 和 底部1px),为名字设置了新闻文字效果。
你可以为不同的边角设置不同的半径,注意webkit和firefox浏览器,每个边角有不同的属性名称。
你可以为盒子阴影设置很多效果,例如下面的例子使用一组参数来设置效果(参数之间以逗号相隔)。
原文地址:http://webdesignerwall.com/tutorials/the-basics-of-css3
HTML5实践系列
今天我们的内容是css3的text-shadow、box-shadow 和 border-radius几个属性的介绍,他能增强页面布局,值得学习。
RGBA
前三个值分别代码RBG的值,最后一个值代表透明度(0表示透明,1表示不透明)。RGBA可以用于任何和color有关的属性,例如字体颜色、边框颜色、背景颜色和阴影颜色等。
文字阴影
文字阴影的结构按照这样的顺序:x-offset, y-offset, blur, 和 color。为x-offset设置负值会将阴影位置改变到左边,为y-offset设置负值会将阴影位置改变到头部。我们也可以使用RBGA设置阴影的颜色。
你可以设置一组text-shadow,中间以逗号相隔。下面的例子使用两个text-shadow(顶部1px 和 底部1px),为名字设置了新闻文字效果。
text-shadow: 0 1px 0 #fff, 0 -1px 0 #000;
边框半径
边框半径对属性赋值的便捷写法类似于padding和margin(例如:border-radius: 20px)。为了让有些浏览器能正确渲染效果,需要在属性前面加前缀,例如针对webkit浏览器需要添加 "
-webkit-" 前缀,firefox浏览器需要添加 "
-moz-" 前缀。
你可以为不同的边角设置不同的半径,注意webkit和firefox浏览器,每个边角有不同的属性名称。
盒子阴影
盒子阴影的结构和text-shadow属性一样,按照这样的顺序: x-offset, y-offset, blur, 和 color。
你可以为盒子阴影设置很多效果,例如下面的例子使用一组参数来设置效果(参数之间以逗号相隔)。
-moz-box-shadow: -2px -2px 0 #fff, 2px 2px 0 #bb9595, 2px 4px 15px rgba(0, 0, 0, .3);
原文地址:http://webdesignerwall.com/tutorials/the-basics-of-css3
HTML5实践系列
相关文章推荐
- HTML5实践 -- 介绍css3中的几个属性:text-shadow、box-shadow 和 border-radius
- IE兼容CSS3圆角border-radius的方法(同时兼容box-shadow,text-shadow)
- HTML5结构标签、border-radius、box-shadow与text-shadow
- CSS属性:text-shadow,box-shadow,border-radius
- 让IE8支持CSS3属性(border-radius、box-shadow、linear-gradient)
- CSS3 GENERATOR可以同时为一个元素完成border-radius、box-shadow、gradient和opacity多项属性的设置
- css3 实现圆角边框的border-radius属性和实现阴影效果的box-shadow属性
- IE兼容CSS3圆角border-radius,box-shadow,text-shadow的方法
- CSS3基础(RGBa、text-shadow、box-shadow、border-radius)
- CSS text-shadow,box-shadow,border-radius属性
- IE兼容CSS3圆角border-radius的方法(同时兼容box-shadow,text-shadow)
- CSS3属性box-shadow和text-shadow使用
- CSS3 边框 border-radius box-shadow
- css3边框——圆角效果(border-radius)、阴影(box-shadow)、边框应用图片(border-image)
- CSS3属性之text-shadow和box-shadow(立体效果的实现)
- CSS3学习之圆角box-shadow,阴影border-radius
- css3中的box-shadow的用法与text-shadow的用法
- CSS3 border-radius 属性
- CSS3属性之一:border-radius
- 介绍几个JS类库,让20世纪的浏览器也能支持html5、css3