CSS3实现圆角、阴影、透明效果并兼容各大浏览器


Posted in HTML / CSS onAugust 08, 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 calc()会计算属性详解
Feb 27 HTML / CSS
CSS3 3D酷炫立方体变换动画的实现
Mar 26 HTML / CSS
HTML5 语义化结构化规范化
Oct 17 HTML / CSS
html5之Canvas路径绘图、坐标变换应用实例
Dec 26 HTML / CSS
HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等
May 08 HTML / CSS
HTML5 Canvas中绘制矩形实例
Jan 01 HTML / CSS
详解HTML5之pushstate、popstate操作history,无刷新改变当前url
Mar 15 HTML / CSS
HTML table 表格边框的实现思路
Oct 12 HTML / CSS
HTML5 video进入全屏和退出全屏的实现方法
Jul 28 HTML / CSS
html粘性页脚的具体使用
Jan 18 HTML / CSS
CSS浮动引起的高度塌陷问题
Aug 05 HTML / CSS
什么是clearfix (一文搞清楚css清除浮动clearfix)
May 21 HTML / CSS
CSS3制作文字半透明倒影效果的两种实现方式
Aug 08 #HTML / CSS
CSS3 transform的skew属性值图文详解
Jul 21 #HTML / CSS
目前不被任何主流浏览器支持的CSS3属性汇总
Jul 21 #HTML / CSS
细说CSS3中box属性中的overflow-x属性和overflow-y属性值的效果
Jul 21 #HTML / CSS
纯CSS3实现的8种Loading动画效果
Jul 05 #HTML / CSS
纯CSS实现设置半个字符的样式
Jul 03 #HTML / CSS
css3使网页、图片变成灰色兼容大多数浏览器
Jul 02 #HTML / CSS
You might like
sony ICF-2010 拆解与改装
2021/03/02 无线电
火车头discuz6.1 完美采集的php接口文件
2009/09/13 PHP
php字符串分割函数explode的实例代码
2013/02/07 PHP
关于Iframe如何跨域访问Cookie和Session的解决方法
2013/04/15 PHP
php读取二进制流(C语言结构体struct数据文件)的深入解析
2013/06/13 PHP
服务器变量 $_SERVER 的深入解析
2013/07/02 PHP
让PHP显示Facebook的粉丝数量方法
2014/01/08 PHP
php workerman定时任务的实现代码
2018/12/23 PHP
JQuery,Extjs,YUI,Prototype,Dojo 等JS框架的区别和应用场景简述
2010/04/15 Javascript
jquery的Theme和Theme Switcher使用小结
2010/09/08 Javascript
关于JavaScript定义类和对象的几种方式
2010/11/09 Javascript
JavaScript高级程序设计 事件学习笔记
2011/09/10 Javascript
javascript显示用户停留时间的简单实例
2013/08/05 Javascript
Javascript 颜色渐变效果的实现代码
2013/10/01 Javascript
jquery解析xml字符串示例分享
2014/03/25 Javascript
jQuery调取jSon数据并展示的方法
2015/01/29 Javascript
jquery插件hiAlert实现网页对话框美化
2015/05/03 Javascript
jquery点击展示与隐藏更多内容
2016/12/03 Javascript
jquery操作select取值赋值与设置选中实例
2017/02/28 Javascript
动态加载JavaScript文件的3种方式
2018/05/05 Javascript
浅谈VUE防抖与节流的最佳解决方案(函数式组件)
2019/05/22 Javascript
浅析vue-router中params和query的区别
2019/12/24 Javascript
Websocket 向指定用户发消息的方法
2020/01/09 Javascript
Django静态资源部署404问题解决方案
2020/05/11 Python
python suds访问webservice服务实现
2020/06/26 Python
谷歌浏览器小字体处理方案即12px以下字体
2013/12/17 HTML / CSS
HTML5页面嵌入小程序没有返回按钮及返回页面空白的问题
2020/05/28 HTML / CSS
大学国际贸易专业自荐信
2014/06/05 职场文书
医院节能减排方案
2014/06/13 职场文书
群教班子对照检查材料
2014/08/26 职场文书
2014迎接教师节演讲稿
2014/09/10 职场文书
2014年四风个人对照检查及整改措施
2014/10/28 职场文书
少先队大队委竞选口号
2015/12/25 职场文书
MySQL系列之八 MySQL服务器变量
2021/07/02 MySQL
Python类方法总结讲解
2021/07/26 Python
室外天线与收音机天线杆接合方法
2022/04/05 无线电