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弹性伸缩布局之box布局
Jul 12 HTML / CSS
使用HTML5和CSS3表单验证功能
May 05 HTML / CSS
CSS3 选择器 属性选择器介绍
Jan 21 HTML / CSS
浅析CSS3中鲜为人知的属性:-webkit-tap-highlight-color
Jan 12 HTML / CSS
详解css3使用transform出现字体模糊的解决办法
Oct 16 HTML / CSS
详解HTML5中的标签
Jun 19 HTML / CSS
HTML5之web workers_动力节点Java学院整理
Jul 17 HTML / CSS
html5调用摄像头功能的实现代码
May 07 HTML / CSS
浅谈Html5中视频 音频标签 进度条的问题
Jul 26 HTML / CSS
HTML5不支持frameset的两种解决方法
Nov 14 HTML / CSS
纯HTML5+CSS3制作生日蛋糕(代码易懂)
Nov 16 HTML / CSS
CSS3 实现的图片悬停的切换按钮
Apr 13 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中{}大括号是什么意思
2013/12/01 PHP
10款实用的PHP开源工具
2015/10/23 PHP
一起来写段JS drag拖动代码
2010/12/09 Javascript
检测input每次的输入是否合法遇到汉字输入就有问题
2012/05/23 Javascript
JS 如何获取radio选中后的值及不选择取radio的值
2013/10/28 Javascript
Asp.Net alert弹出提示信息的几种方法总结
2014/01/29 Javascript
javascript类型转换示例
2014/04/29 Javascript
jQuery选择id属性带有点符号元素的方法
2015/03/17 Javascript
js实现简洁的TAB滑动门效果代码
2015/09/06 Javascript
jQuery插件EasyUI实现Layout框架页面中弹出窗体到最顶层效果(穿越iframe)
2016/08/05 Javascript
常用js,css文件统一加载方法(推荐) 并在加载之后调用回调函数
2016/09/23 Javascript
JavaScript prototype属性详解
2016/10/25 Javascript
Bootstrap基本插件学习笔记之Tooltip提示工具(18)
2016/12/08 Javascript
使用jQuery和ajax代替iframe的方法(详解)
2017/04/12 jQuery
重新认识vue之事件阻止冒泡的实现
2018/08/02 Javascript
Vue监听事件实现计数点击依次增加的方法
2018/09/26 Javascript
Element Steps步骤条的使用方法
2020/07/26 Javascript
[01:16]2014DOTA2 TI专访C9战队EE:中国五强中会占三席
2014/07/10 DOTA
Python学习小技巧之列表项的排序
2017/05/20 Python
用python实现的线程池实例代码
2018/01/06 Python
Django使用模板后无法找到静态资源文件问题解决
2019/07/19 Python
Python高级特性 切片 迭代解析
2019/08/23 Python
西班牙香水和化妆品网上商店:Douglas
2017/10/29 全球购物
英国Office鞋店德国网站:在线购买鞋子、靴子和运动鞋
2018/12/19 全球购物
美国购买体育赛事门票网站:TicketCity
2019/03/06 全球购物
高级人员简历的自我评价分享
2013/11/03 职场文书
毕业研究生的自我鉴定
2013/11/30 职场文书
工程班组长岗位职责
2013/12/30 职场文书
七年级数学教学反思
2014/01/22 职场文书
解除合同协议书
2014/04/17 职场文书
村班子对照检查材料
2014/08/18 职场文书
破坏寝室公物检讨书
2014/11/17 职场文书
学前教育见习总结
2015/06/23 职场文书
2016秋季校长开学典礼致辞
2015/11/26 职场文书
熟背这些句子,让您的英语口语突飞猛进(135句)
2019/09/06 职场文书
HTML5页面打开微信小程序功能实现
2022/09/23 HTML / CSS