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 相关文章推荐
CSS心形加载的动画源码的实现
Mar 09 HTML / CSS
css3.0 图形构成实例练习二
Mar 19 HTML / CSS
CSS3感应鼠标的背景闪烁和图片缩放动画效果
May 14 HTML / CSS
纯css3实现宠物小鸡实例代码
Oct 08 HTML / CSS
关于HTML5的22个初级技巧(图文教程)
Jun 21 HTML / CSS
html5 Canvas画图教程(6)—canvas里画曲线之arcTo方法
Jan 09 HTML / CSS
HTML5中新标签和常用标签详解
Mar 07 HTML / CSS
阻止移动设备(手机、pad)浏览器双击放大网页的方法
Jun 03 HTML / CSS
HTML5 DeviceOrientation实现手机网站摇一摇功能代码实例
Apr 24 HTML / CSS
HTML5+CSS3实现机器猫
Oct 17 HTML / CSS
HTML+CSS+JS实现图片的瀑布流布局的示例代码
Apr 22 HTML / CSS
什么是css原子化,有什么用?
Apr 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中的常用函数回顾
2013/07/11 PHP
PHP中spl_autoload_register()和__autoload()区别分析
2014/05/10 PHP
PHP魔术方法使用方法汇总
2016/02/14 PHP
PHP实现的登录页面信息提示功能示例
2017/07/24 PHP
使用prototype.js 的时候应该特别注意的几个问题.
2007/04/12 Javascript
JQuery操作tr和td内容的方法实例
2013/03/06 Javascript
JavaScript自定义等待wait函数实例分析
2015/03/23 Javascript
AngularJS基础知识笔记之过滤器
2015/05/10 Javascript
jquery制作属于自己的select自定义样式
2015/11/23 Javascript
jQuery选择器用法实例详解
2015/12/17 Javascript
JS实现显示带倒影的图片横排居中放大展示特效实例【测试可用】
2016/08/23 Javascript
js两种拼接字符串的简单方法(必看)
2016/09/02 Javascript
浅谈vue-cli加载不到dev-server.js的解决办法
2017/11/24 Javascript
JS变量提升原理与用法实例浅析
2020/05/22 Javascript
vue内置组件keep-alive事件动态缓存实例
2020/10/30 Javascript
python调用shell的方法
2013/11/20 Python
Python内置函数Type()函数一个有趣的用法
2015/02/18 Python
按日期打印Python的Tornado框架中的日志的方法
2015/05/02 Python
栈和队列数据结构的基本概念及其相关的Python实现
2015/08/24 Python
PyTorch使用cpu加载模型运算方式
2020/01/13 Python
Keras load_model 导入错误的解决方式
2020/06/09 Python
安装python依赖包psycopg2来调用postgresql的操作
2021/01/01 Python
ALDI奥乐齐官方海外旗舰店:德国百年超市
2017/12/27 全球购物
英国综合网上购物商城:The Hut
2018/07/03 全球购物
美国运动鞋和服装网上商店:YCMC
2018/09/15 全球购物
蒂娜商店:Tiina the Store
2019/12/07 全球购物
介绍一下SOA和SOA的基本特征
2016/02/24 面试题
技校生自我鉴定范文
2013/09/26 职场文书
计算机网络专业个人的自我评价
2013/10/17 职场文书
爱我中华演讲稿
2014/05/20 职场文书
社团个人总结范文
2015/03/05 职场文书
2015年党建工作目标责任书
2015/05/08 职场文书
2016年党员创先争优公开承诺书
2016/03/25 职场文书
2019个人工作计划书的格式及范文!
2019/07/04 职场文书
2019年消防宣传标语集锦
2019/11/21 职场文书
Win11怎么跳过联网验机 ?Win11跳过联网验机激活教程
2022/04/05 数码科技