使用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 重置iphone浏览器按钮input,select等表单元素的默认样式
Oct 11 HTML / CSS
详解CSS3中nth-child与nth-of-type的区别
Jan 05 HTML / CSS
CSS3 清除浮动的方法示例
Jun 01 HTML / CSS
CSS3中新增的对文本和字体的设置
Feb 03 HTML / CSS
微信浏览器左上角返回按钮拦截功能
Nov 21 HTML / CSS
简单聊聊H5的pushState与replaceState的用法
Apr 03 HTML / CSS
HTML5教程之html 5 本地数据库(Web Sql Database)
Apr 03 HTML / CSS
html5 Canvas画图教程(7)—canvas里画曲线之quadraticCurveTo方法
Jan 09 HTML / CSS
HTML5注册表单的自动聚焦与占位文本示例代码
Jul 19 HTML / CSS
让ie浏览器成为支持html5的浏览器的解决方法(使用html5shiv)
Apr 08 HTML / CSS
AmazeUI 评论列表的实现示例
Aug 13 HTML / CSS
css 中多种边框的实现小窍门
Apr 07 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
PHP ? EasyUI DataGrid 资料取的方式介绍
2012/11/07 PHP
2014年最新推荐的10款 PHP 开发框架
2014/08/01 PHP
PHP安装threads多线程扩展基础教程
2015/11/17 PHP
PHP递归实现快速排序的方法示例
2017/12/18 PHP
通过javascript获取iframe里的值示例代码
2013/06/24 Javascript
javascript下拉列表中显示树形菜单的实现方法
2015/11/17 Javascript
jquery $.trim()去除字符串空格的实现方法【附图例】
2016/03/30 Javascript
基于js实现的限制文本框只可以输入数字
2016/12/05 Javascript
JavaScript编写一个贪吃蛇游戏
2017/03/09 Javascript
Ionic2调用本地SQlite实例
2017/04/22 Javascript
关于foreach循环中遇到的问题小结
2017/05/08 Javascript
JS移动端/H5同时选择多张图片上传并使用canvas压缩图片
2017/06/20 Javascript
JS实现简单表格排序操作示例
2017/10/07 Javascript
解决vue+webpack打包路径的问题
2018/03/06 Javascript
微信小程序分享功能之按钮button 边框隐藏和点击隐藏
2018/06/14 Javascript
JS实现点击按钮可实现编辑功能
2018/07/03 Javascript
[29:23]2014 DOTA2国际邀请赛中国区预选赛 LGD-GAMING VS CIS 第一场1
2014/05/23 DOTA
[01:25]2015国际邀请赛最佳短片奖——斧王《拆塔英雄:天赋异禀》
2015/09/22 DOTA
python在控制台输出进度条的方法
2015/06/20 Python
开始着手第一个Django项目
2015/07/15 Python
Django框架封装外部函数示例
2019/05/28 Python
Python with用法:自动关闭文件进程
2019/07/10 Python
CSS3中的5个有趣的新技术
2009/04/02 HTML / CSS
html5 input元素新特性_动力节点Java学院整理
2017/07/06 HTML / CSS
eBay澳大利亚站:eBay.com.au
2018/02/02 全球购物
美国迪克体育用品商店:DICK’S Sporting Goods
2018/07/24 全球购物
德国自然时尚和有机产品购物网站:Waschbär
2019/05/29 全球购物
JBL美国官方商店:扬声器、耳机等
2019/12/01 全球购物
旅游管理毕业生自荐信
2013/11/05 职场文书
自我评价格式
2014/01/06 职场文书
国贸专业大学生职业生涯规划范文
2014/01/10 职场文书
小班重阳节活动方案
2014/02/08 职场文书
补充协议书范本
2014/04/23 职场文书
家具公司总经理岗位职责
2014/07/08 职场文书
驾驶员安全责任书范本
2014/07/24 职场文书
扩展多台相同的Web服务器
2021/04/01 Servers