CSS3基础(RGBa、text-shadow、box-shadow、border-radius)


Posted in HTML / CSS onNovember 13, 2012

RGBa
前三个值是RGB色值,最后一个值是十进制的alpha不透明度值(0=透明,1=不透明)
CSS3基础(RGBa、text-shadow、box-shadow、border-radius)
CSS 3 RGBa实现半透明背景
RBGa可以用于任何更颜色相关的属性,例如字体颜色、边框颜色、背景颜色、阴影颜色等。
CSS3基础(RGBa、text-shadow、box-shadow、border-radius)
RGBa可以应用在所有颜色属性上
译者注:RGBa与opacity的区别在于opacity除了对被背景生效之外,应用它的元素内容也会继承它,也就说内容也会和背景一样变透明,RGBa正是为了解决这个问题的设计的。)

TEXT SHADOW
Text shadow由以下顺序构成:x-offset, y-offset, blur, and color,即垂直偏移、水平偏移、投影宽度(模糊半径)和颜色。
CSS3基础(RGBa、text-shadow、box-shadow、border-radius)
CSS 3 text-shadow属性详解
如果对水平偏移(x-offset)应用负值,阴影将出现在元素的右边;如果对垂直偏移(y-offset)应用负值,阴影将出现在元素顶部,可以在阴影颜色上使用RGBa。模糊半径的值越大,阴影越模糊,设置为0时,阴影最清晰。
CSS3基础(RGBa、text-shadow、box-shadow、border-radius)
在text-shadow颜色上使用RGBa
也可以指定一系列text-shadow值(用逗号分隔),下面的例子使用两个text-shadow实现文字凸起效果(上下各1px)。

text-shadow: 0 1px 0 #fff, 0 -1px 0 #000;
CSS3基础(RGBa、text-shadow、box-shadow、border-radius)
text-shadow 文字凸起效果
BORDER RADIUS
border radius(圆角)的速记法和padding和margin属性类似(例如border-radius:20px),为使浏览器能识别圆角属性,需添加特定的前缀,如”-webkit-”针对webkit浏览器,”-moz-”针对Firefox。
CSS3基础(RGBa、text-shadow、box-shadow、border-radius)
CSS 3圆角
每个角都可以指定不同的宽度,注意每个角分开写时Webkit和Firefox的差异。
CSS3基础(RGBa、text-shadow、box-shadow、border-radius)
CSS 3圆角
BOX SHADOW
box-shadow的属性结构和text-shadow类似:x-offset, y-offset, blur, and color.
CSS3基础(RGBa、text-shadow、box-shadow、border-radius)
box-shadow属性详解
和text-shadow一样,可以设定多组值,下面的例子是三组box-shadow声明:

-moz-box-shadow:{
-2px -2px 0 #fff,
2px 2px 0 #bb9595,
2px 4px 15px rgba(0, 0, 0, .3);

}
CSS3基础(RGBa、text-shadow、box-shadow、border-radius)
CSS 3 box-shadow

HTML / CSS 相关文章推荐
css3隔行变换色实现示例
Feb 19 HTML / CSS
浅谈CSS3鼠标移入图片动态提示效果(transform)
Nov 06 HTML / CSS
CSS3实现图片抽屉式效果的示例代码
Nov 06 HTML / CSS
html+css3实现的登录界面
Dec 09 HTML / CSS
基于HTML5 Canvas 实现商场监控实例详解
Nov 20 HTML / CSS
Canvas 文本转粒子效果的实现代码
Feb 14 HTML / CSS
html5教程实现Photoshop渐变色效果
Dec 04 HTML / CSS
详解HTML5中的拖放事件(Drag 和 drop)
Nov 14 HTML / CSS
html5教你做炫酷的碎片式图片切换 (canvas)
Jul 28 HTML / CSS
HTML5输入框下拉菜单功能的示例代码
Sep 08 HTML / CSS
使用CSS定位HTML元素的实现方法
Jul 07 HTML / CSS
详解CSS3浏览器兼容
Dec 24 HTML / CSS
css3绘制天猫logo实现代码
Nov 06 #HTML / CSS
CSS3实现DIV圆角效果完整代码
Oct 10 #HTML / CSS
10 套华丽的CSS3 按钮小结
Oct 03 #HTML / CSS
25个CSS3动画按钮和菜单教程分享
Oct 03 #HTML / CSS
收集的22款给力的HTML5和CSS3帮助工具
Sep 14 #HTML / CSS
35款精致的 CSS3 和 HTML5 网页模板 推荐
Aug 03 #HTML / CSS
利用CSS3参考手册和CSS3代码生成工具加速来学习网页制
Jul 11 #HTML / CSS
You might like
提交表单后 PHP获取提交内容的实现方法
2016/05/25 PHP
详解php 使用Callable Closure强制指定回调类型
2017/10/26 PHP
PDO::errorCode讲解
2019/01/28 PHP
node.js中的fs.statSync方法使用说明
2014/12/16 Javascript
JS控制表格实现一条光线流动分割行的方法
2015/03/09 Javascript
JavaScript编写页面半透明遮罩效果的简单示例
2016/05/09 Javascript
angular ngClick阻止冒泡使用默认行为的方法
2016/11/03 Javascript
AngularJS中watch监听用法分析
2016/11/04 Javascript
Angular的模块化(代码分享)
2016/12/26 Javascript
jQuery排序插件tableSorter使用方法
2017/02/10 Javascript
JavaScript中undefined和null的区别
2017/05/03 Javascript
ionic环境配置及问题详解
2017/06/27 Javascript
vue+socket.io+express+mongodb 实现简易多房间在线群聊示例
2017/10/21 Javascript
在Vue组件中使用 TypeScript的方法
2018/02/28 Javascript
基于VuePress 轻量级静态网站生成器的实现方法
2018/04/17 Javascript
微信小程序登录数据解密及状态维持实例详解
2019/05/06 Javascript
vue elementUI 表单校验的实现代码(多层嵌套)
2019/11/06 Javascript
如何用JS模拟实现数组的map方法
2020/07/30 Javascript
vuex的数据渲染与修改浅析
2020/11/26 Vue.js
Python简单进程锁代码实例
2015/04/27 Python
Python读取Excel的方法实例分析
2015/07/11 Python
基于python3 OpenCV3实现静态图片人脸识别
2018/05/25 Python
Python生成rsa密钥对操作示例
2019/04/26 Python
pytorch numpy list类型之间的相互转换实例
2019/08/18 Python
python自动生成model文件过程详解
2019/11/02 Python
python对文件的操作方法汇总
2020/02/28 Python
Python中求对数方法总结
2020/03/10 Python
佳能德国网上商店:Canon德国
2017/03/18 全球购物
小蚁科技官方商店:YI Technology
2019/08/23 全球购物
Happy Socks英国官网:购买五颜六色的袜子
2020/11/03 全球购物
Prototype是怎么扩展DOM的
2014/10/01 面试题
SOA面试题:如何在SOA中实现松耦合
2013/07/21 面试题
秋季运动会稿件
2014/01/30 职场文书
2015年加油站站长工作总结
2015/05/27 职场文书
小学生暑假生活总结
2015/07/13 职场文书
小学大队委竞选口号
2015/12/25 职场文书