HTML5实践 -- 介绍css3中的几个属性：text-shadow、box-shadow 和 border-radius

2024-05-13 17:43:40

　　转载请注明原创地址：http://www.cnblogs.com/softlover/archive/2012/11/21/2779873.html

　　今天我们的内容是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相关推荐

css3新增属性有哪些？css3中常用的新增属性总结
css3新增属性有哪些?来提问这个问题的人都应该知道css3是css的升级版本,那么,css3既然是升级版本,自然是会新增一些属性,接下来本篇文章将给大家介绍关于css3中常用的新增属性. 我的学习交 ...
详解CSS3中新增的内容属性：content
详解CSS3中新增的内容属性:content 1. 用法: content属性用于插入生成的内容,常和:before选择器和:after选择器配合使用,将生成的内容放在一个元素内容的前面或后面. 2. ...
不是css3新增的技术,css3新增属性有哪些？css3中常用的新增属性总结，分享
来提问这个问题的人都应该知道css3中常用的新增属性. 一.css3新增边框属性 1.css3新增属性之border-color:为边框设置多种颜色 % 这里说一下题外话,需要注意:"bor ...
简单介绍CSS3中的transform的使用方法
一,转换(transform)是CSS3中具有颠覆性的特征之一,可以实现元素的位移,旋转,缩放等效果.分为两种转换,分别是2D以及3D转换效果. 转换可以简单理解为的变形,其主要效果有三种: 移动:t ...
css3新增属性有哪些？css3中常用的新增属性
** 一.css3新增边框属性 ** 1.css3新增属性之border-color:为边框设置多种颜色 p { border-style:solid; border-color:#ff0000 #0 ...
CSS3中的圆角边框属性详解(border-radius属性)
实例向 div 元素添加圆角边框: div { border:2px solid; border-radius:25px; } 页面底部有更多实例. 浏览器支持 IE Firefox Chrome ...
介绍Java中一个快速复制属性值的方法——非常简单但很实用
菜鸟程序员Chivalry 2017-05-19 11:32 少啰嗦,直接看需求代码: 比如说你现在有一个help_student_application数据表,表中记录申请岗位学生信息,其中有一个字 ...
CSS -- CSS3中3D转换相关属性讲解（translate3d，rotate3d，perspective，transform-style）
文章目录 3D转换 1 三维坐标系 2 3D移动 translate3d 3 透视 perspective 4 3D 旋转 rotate3d 5 3D旋转 rotate3d 6 3D呈现 transf ...
html5中css新增的属性,css3有哪些新增属性？常用的新增属性总结
css3新增属性有哪些?来提问这个问题的人都应该知道css3是css的升级版本,那么,css3既然是升级版本,自然是会新增一些属性,接下来本篇文章将给大家介绍关于css3中常用的新增属性. 一.css ...

最新文章

热门文章