使用CSS3实现圆角,阴影,透明


Posted in HTML / CSS onDecember 23, 2014

CSS实现圆角,阴影,透明的方法很多,传统的方法都比较复杂,用CSS3就方便很多了,虽然现在各浏览器对CSS3的支持还不是很好,但不久的将来CSS3就会普及.

1.圆角

CSS3实现圆角有两种方法.

第一种是背景图像,传统的CSS每个元素只能有一个背景图像,但是CSS3可以允许一个元素有多个背景图像.这样给一个元素添加4个1/4圆的背景图像,分别位于4个角上就可以实现圆角了.

复制代码
代码如下:

.box {
/* 首先定义要使用的4幅图像为背景图 */
background-image: url(/img/top-left.gif),
url(/img/top-right.gif),
url(/img/bottom-left.gif),
url(/img/bottom-right.gif);
/* 然后定义不重复显示 */
background-repeat: no-repeat,
no-repeat,
no-repeat,
no-repeat;
/* 最后定义4幅图分别显示在4个角上 */
background-position: top left,
top right,
bottom left,
bottom right;
}

 第二种方法就简洁了,直接用CSS实现,不需要用图片.

复制代码
代码如下:

.box {
/* 直接定义圆角的半径就可以了 */
border-radius: 1em;
}

 但是第二种方法还没有得到很好的支持,当前Firefox和Safari(同一个核心的Chrome也可以),需要使用前缀

复制代码
代码如下:

.box {
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
border-radius: 1em;
}

2.阴影

CSS3的box-shadow属性可以直接实现阴影

复制代码
代码如下:

img {
-webkit-box-shadow: 3px 3px 6px #666;
-moz-box-shadow: 3px 3px 6px #666;
box-shadow: 3px 3px 6px #666;
}

 这个属性的4个参数是:垂直偏移,水平偏移,投影的宽度(模糊程度),颜色

3.透明

CSS本来就是支持透明的,IE以外的浏览器是opacity属性,IE是filter:alpha.但是,这个透明度有个缺点,就是它会使应用元素的内容也会继承它,比如有一个DIV,

复制代码
代码如下:

<div style="opacity:0.8;filter:alpha(opacity=80); font-weight: bold;">>
内容
</div>

 如果像上面这样DIV的背景是透明了,但是内容两个字也透明了,这时可以用RGBa.

复制代码
代码如下:

.alert {
rgba(0,0,0,0.8);
}

 这个属性前3个属性表示颜色红,绿,蓝,第四个是透明度.红绿蓝都是0代表黑色,所以rgba(0,0,0,0.8)就是将黑色的透明度设置为0.8.

CSS3使得原来很难实现的效果变得很简单,希望各浏览器对CSS3尽快实现完美支持.

HTML / CSS 相关文章推荐
纯CSS3实现圆角效果(含IE兼容解决方法)
May 07 HTML / CSS
详解Canvas 实现炫丽的粒子运动效果(粒子生成文字)
Feb 01 HTML / CSS
详解如何用canvas画一个微笑的表情
Mar 14 HTML / CSS
HTML5 与 XHTML2
Oct 17 HTML / CSS
实例教程 HTML5 Canvas 超炫酷烟花绽放动画实现代码
Nov 05 HTML / CSS
canvas之自定义头像功能实现代码示例
Sep 29 HTML / CSS
html5手机端页面可以向右滑动导致样式受影响的问题
Jun 20 HTML / CSS
移动端html5模拟长按事件的实现方法
Sep 30 HTML / CSS
详解Canvas实用库Fabric.js使用手册
Jan 07 HTML / CSS
跨域修改iframe页面内容详解
Oct 31 HTML / CSS
HTML+CSS实现导航条下拉菜单的示例代码
Aug 02 HTML / CSS
CSS中实现动画效果-附案例
Feb 28 HTML / CSS
纯css3实现的鼠标悬停动画按钮
Dec 23 #HTML / CSS
css3实现3D色子翻转特效
Dec 23 #HTML / CSS
CSS3使用border-radius属性制作圆角
Dec 22 #HTML / CSS
CSS3 实现侧边栏展开收起动画
Dec 22 #HTML / CSS
css3选择器基本介绍
Dec 15 #HTML / CSS
css3的transition属性详解
Dec 15 #HTML / CSS
CSS3 @font-face属性使用指南
Dec 12 #HTML / CSS
You might like
全国FM电台频率大全 - 26 西藏自治区
2020/03/11 无线电
MySQL数据源表结构图示
2008/06/05 PHP
for循环连续求和、九九乘法表代码
2012/02/20 PHP
redis 队列操作的例子(php)
2012/04/12 PHP
解析strtr函数的效率问题
2013/06/26 PHP
作为PHP程序员你要知道的另外一种日志
2018/07/30 PHP
ext jquery 简单比较
2010/04/07 Javascript
JavaScript中的console.assert()函数介绍
2014/12/29 Javascript
使用javascript实现json数据以csv格式下载
2015/01/09 Javascript
基于BootStrap Metronic开发框架经验小结【一】框架总览及菜单模块的处理
2016/05/12 Javascript
JS+CSS3模拟溢出滚动效果
2016/08/12 Javascript
React Native实现简单的登录功能(推荐)
2016/09/19 Javascript
微信小程序 倒计时组件实现代码
2016/10/24 Javascript
利用Jquery实现几款漂亮实用的时间轴(附示例代码)
2017/02/15 Javascript
Vue中建立全局引用或者全局命令的方法
2017/08/21 Javascript
React+react-dropzone+node.js实现图片上传的示例代码
2017/08/23 Javascript
微信小程序实现流程进度的图样式功能
2018/01/16 Javascript
vue如何将v-for中的表格导出来
2018/05/07 Javascript
详解Vue实战指南之依赖注入(provide/inject)
2018/11/13 Javascript
使用微信SDK自定义分享的方法
2019/07/03 Javascript
浅探express路由和中间件的实现
2019/09/30 Javascript
Djang中静态文件配置方法
2015/07/30 Python
分享一下Python数据分析常用的8款工具
2018/04/29 Python
用python求一个数组的和与平均值的实现方法
2019/06/29 Python
python FTP批量下载/删除/上传实例
2019/12/22 Python
Python使用requests模块爬取百度翻译
2020/08/25 Python
Python虚拟环境virtualenv创建及使用过程图解
2020/12/08 Python
Capitol Lighting的1800lighting.com:住宅和商业照明
2019/04/10 全球购物
学期自我鉴定
2013/11/04 职场文书
学习委员自我鉴定
2014/01/13 职场文书
三年级科学教学反思
2014/01/29 职场文书
聚美优品广告词改编
2014/03/14 职场文书
2014年四风个人对照检查及整改措施
2014/10/28 职场文书
和谐家庭事迹材料
2014/12/20 职场文书
介绍信的写法
2015/01/31 职场文书
聋哑人盗窃罪辩护词
2015/05/21 职场文书