今天我们的内容是css3的text-shadow、box-shadow 和 border-radius几个属性的介绍，他能增强页面布局，值得学习。
前三个值分别代码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);
以上就是HTML5实践-详细介绍css3中的几个属性text-shadow、box-shadow和border-radius的详细内容，更多请关注php中文网其它相关文章！
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
444
收藏
