使用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制作倾斜导航条和毛玻璃效果
Sep 12 HTML / CSS
收集的7个CSS3代码生成工具
Apr 17 HTML / CSS
css3实现垂直下拉动画菜单示例
Apr 22 HTML / CSS
使用CSS3的背景渐变Text Gradient 创建文字颜色渐变
Aug 19 HTML / CSS
CSS3 实现侧边栏展开收起动画
Dec 22 HTML / CSS
css3如何绘制一个圆圆的loading转圈动画
Jan 09 HTML / CSS
自定义html标记替换html5新增元素
Oct 17 HTML / CSS
html5定位并在百度地图上显示的示例
Apr 27 HTML / CSS
用HTML5实现鼠标滚轮事件放大缩小图片的功能
Jun 25 HTML / CSS
基于HTML5代码实现折叠菜单附源码下载
Nov 27 HTML / CSS
逼真的HTML5树叶飘落动画
Mar 01 HTML / CSS
Html5 滚动穿透的方法
May 13 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 中的一些经验积累
2006/10/09 PHP
YII中assets的使用示例
2014/07/31 PHP
PHP中大于2038年时间戳的问题处理方案
2015/03/03 PHP
php获取系统变量方法小结
2015/05/29 PHP
JQuery 文本框回车跳到下一个文本框示例代码
2013/08/30 Javascript
jQuery网页右侧广告跟随滚动代码分享
2020/04/20 Javascript
JavaScript实现相册弹窗功能(zepto.js)
2016/06/21 Javascript
基于d3.js实现实时刷新的折线图
2016/08/03 Javascript
完美解决js传递参数中加号和&amp;号自动改变的方法
2016/10/11 Javascript
微信小程序 视图层(xx.xml)和逻辑层(xx.js)详细介绍
2016/10/13 Javascript
Angular指令封装jQuery日期时间插件datetimepicker实现双向绑定示例
2017/01/22 Javascript
jquery实现轮播图效果
2017/02/13 Javascript
详解Angular.js中$http拦截器的介绍及使用
2017/07/04 Javascript
axios中cookie跨域及相关配置示例详解
2017/12/20 Javascript
React Native 图片查看组件的方法
2018/03/01 Javascript
JS中利用FileReader实现上传图片前本地预览功能
2018/03/02 Javascript
详解vue填坑之解决部分浏览器不支持pushState方法
2018/07/12 Javascript
实用的 vue tags 创建缓存导航的过程实现
2020/12/03 Vue.js
Python中turtle作图示例
2017/11/15 Python
关于Python的一些学习总结
2018/05/25 Python
Python正则表达式指南 推荐
2018/10/09 Python
PyCharm在新窗口打开项目的方法
2019/01/17 Python
Python API自动化框架总结
2019/11/12 Python
Pandas操作CSV文件的读写实现方法
2019/11/13 Python
Python实现Kerberos用户的增删改查操作
2020/12/14 Python
html5与css3小应用
2013/04/03 HTML / CSS
Joe Fresh官网:加拿大时尚品牌和零售连锁店
2016/11/30 全球购物
优质飞蝇钓和渔具:RiverBum
2020/05/10 全球购物
小学生读书感言
2014/02/12 职场文书
高中毕业生登记表自我鉴定范文
2014/03/18 职场文书
总经理岗位职责说明书
2014/07/30 职场文书
公司周年庆活动方案
2014/08/25 职场文书
思想作风纪律整顿心得体会
2014/09/04 职场文书
2019年思想汇报
2019/06/20 职场文书
经典哲理警句:志不真则心不热,心不热则功不贤
2019/11/14 职场文书
搞笑Gif:这么白这么长的腿像极了一楼的女朋友
2022/03/21 杂记