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样式无效的十个重要原因详解
Aug 10 HTML / CSS
CSS3 圆角效果
Jul 15 HTML / CSS
HTML5 标准将把互联网视频扔回到黑暗时代
Feb 10 HTML / CSS
html5-Canvas可以在web中绘制各种图形
Dec 26 HTML / CSS
突袭HTML5之Javascript API扩展4—拖拽(Drag/Drop)概述
Jan 31 HTML / CSS
Canvas与Image互相转换示例代码
Aug 09 HTML / CSS
谷歌浏览器小字体处理方案即12px以下字体
Dec 17 HTML / CSS
html5开发三八女王节表白神器
Mar 07 HTML / CSS
Html5实现首页动态视频背景的示例代码
Sep 25 HTML / CSS
AmazeUI图片轮播效果的示例代码
Aug 20 HTML / CSS
详解淘宝H5 sign加密算法
Aug 25 HTML / CSS
奇妙的 CSS shapes(CSS图形)
Apr 05 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按行读取、处理较大CSV文件的代码实例
2014/04/09 PHP
PHP获取指定日期是星期几的实现方法
2016/11/30 PHP
PHP学习记录之常用的魔术常量详解
2019/12/12 PHP
javascript 多种搜索引擎集成的页面实现代码
2010/01/02 Javascript
jQuery-ui中自动完成实现方法
2010/06/10 Javascript
JavaScript中的数组操作介绍
2014/12/30 Javascript
JS实现自动变换的菜单效果代码
2015/09/09 Javascript
js实现百度地图定位于地址逆解析,显示自己当前的地理位置
2016/12/08 Javascript
jQuery基于xml格式数据实现模糊查询及分页功能的方法
2016/12/25 Javascript
深入浅出es6模板字符串
2017/08/26 Javascript
webpack-dev-server远程访问配置方法
2018/02/22 Javascript
微信小程序移动拖拽视图-movable-view实例详解
2019/08/17 Javascript
layui 点击重置按钮, select 并没有被重置的解决方法
2019/09/03 Javascript
js实现鼠标拖拽div左右滑动
2020/01/15 Javascript
微信小程序纯文本实现@功能
2020/04/08 Javascript
vue路由结构可设一层方便动态添加路由操作
2020/08/31 Javascript
基于JavaScript实现随机点名器
2021/02/25 Javascript
Django的URLconf中使用缺省视图参数的方法
2015/07/18 Python
Python处理JSON数据并生成条形图
2016/08/05 Python
Django migrations 默认目录修改的方法教程
2018/09/28 Python
Python+OpenCV图片局部区域像素值处理改进版详解
2019/01/23 Python
对python pandas读取剪贴板内容的方法详解
2019/01/24 Python
python os.path.isfile()因参数问题判断错误的解决
2019/11/29 Python
Django通用类视图实现忘记密码重置密码功能示例
2019/12/17 Python
利用CSS的Sass预处理器(框架)来制作居中效果
2016/03/10 HTML / CSS
HTML5 Canvas阴影使用方法实例演示
2013/08/02 HTML / CSS
德国团购网站:Groupon德国
2018/03/13 全球购物
Linux开机引导的步骤是什么
2015/10/19 面试题
个人实用简单的自我评价
2013/10/19 职场文书
《临死前的严监生》教学反思
2014/02/13 职场文书
硕士研究生就业推荐信
2014/05/18 职场文书
祖国在我心中演讲稿200字
2014/08/28 职场文书
学年个人总结范文
2015/03/05 职场文书
信息简报范文
2015/07/21 职场文书
2016年党员读书月活动总结
2016/04/06 职场文书
yolov5返回坐标的方法实例
2022/03/17 Python