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中border-radius属性设定圆角的使用技巧
May 10 HTML / CSS
CSS3教程(9):设置RGB颜色
Apr 02 HTML / CSS
css3.0 图形构成实例练习二
Mar 19 HTML / CSS
纯css3实现效果超级炫的checkbox复选框和radio单选框
Sep 01 HTML / CSS
详解如何在css3打包后自动追加前缀插件:autoprefixer
Dec 18 HTML / CSS
HTML5 Canvas 起步(1) - 基本概念
May 12 HTML / CSS
解决Firefox下不支持outerHTML问题代码分享
Jun 04 HTML / CSS
HTML5打开手机扫码功能及优缺点
Nov 27 HTML / CSS
HTML5 source标签:媒介元素定义媒介资源
Jan 29 HTML / CSS
Html5写一个简单的俄罗斯方块小游戏
Dec 03 HTML / CSS
HTML5 HTMLCollection和NodeList的区别详解
Apr 29 HTML / CSS
如何解决flex文本溢出问题小结
Jul 15 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实现将GB编码转换为UTF8
2006/11/25 PHP
php中通过curl模拟登陆discuz论坛的实现代码
2012/02/16 PHP
解析如何修改phpmyadmin中的默认登陆超时时间
2013/06/25 PHP
Thinkphp框架开发移动端接口(2)
2016/08/18 PHP
PHP常见过waf webshell以及最简单的检测方法
2019/05/21 PHP
jquery post方式传递多个参数值后台以数组的方式进行接收
2013/01/11 Javascript
js图片向右一张张滚动效果实例代码
2013/11/23 Javascript
JavaScript中跨域调用Flash的方法
2014/08/11 Javascript
jquery uploadify 在FF下无效的解决办法
2014/09/26 Javascript
JavaScript取得键盘按下方向键是哪个的方法
2015/08/04 Javascript
JavaScript实现显示函数调用堆栈的方法
2016/04/21 Javascript
jquery点赞功能实现代码 点个赞吧!
2020/05/29 jQuery
javascript基于牛顿迭代法实现求浮点数的平方根【递归原理】
2017/09/28 Javascript
微信小程序中上传图片并进行压缩的实现代码
2018/08/28 Javascript
详解React之key的使用和实践
2018/09/29 Javascript
在vue中把含有html标签转为html渲染页面的实例
2019/10/28 Javascript
解决vue v-for src 图片路径问题 404
2019/11/12 Javascript
selenium 反爬虫之跳过淘宝滑块验证功能的实现代码
2020/08/27 Javascript
[01:02:09]Liquid vs TNC 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21
2020/07/19 DOTA
python实现按行切分文本文件的方法
2016/04/18 Python
python中set常用操作汇总
2016/06/30 Python
python 实现一个贴吧图片爬虫的示例
2017/10/12 Python
Python+tkinter使用40行代码实现计算器功能
2018/01/30 Python
Python设置在shell脚本中自动补全功能的方法
2018/06/25 Python
浅析Python 中几种字符串格式化方法及其比较
2019/07/02 Python
解决pytorch GPU 计算过程中出现内存耗尽的问题
2019/08/19 Python
面向对象学习之pygame坦克大战
2019/09/11 Python
Python selenium的基本使用方法分析
2019/12/21 Python
Django实现前台上传并显示图片功能
2020/05/29 Python
Belvilla德国:在线预订度假屋
2018/04/10 全球购物
人力资源管理专业毕业生自我评价
2013/09/21 职场文书
村委会贫困证明范文
2014/09/21 职场文书
工伤事故证明
2014/10/20 职场文书
大学组织委员竞选稿
2015/11/21 职场文书
SONY AN-LP1 短波有源天线放大器
2021/04/22 无线电
elementui的el-popover修改样式不生效的解决
2021/06/30 Javascript