使用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 相关文章推荐
前端隐藏出边界内容的实现方法
Apr 14 HTML / CSS
详解css3中 text-fill-color属性
Jul 08 HTML / CSS
利用Canvas模仿百度贴吧客户端loading小球的方法示例
Aug 13 HTML / CSS
编写html5时调试发现脚本php等网页js、css等失效
Dec 31 HTML / CSS
HTML5到底会有什么发展?HTML5的前景展望
Jul 07 HTML / CSS
五个2015 年最佳HTML5 框架
Nov 11 HTML / CSS
通过HTML5规范搞定i、em、b、strong元素的区别
Mar 04 HTML / CSS
基于canvas使用贝塞尔曲线平滑拟合折线段的方法
Jan 10 HTML / CSS
微信端html5页面调用分享接口示例
Mar 14 HTML / CSS
快速实现一个简单的canvas迷宫游戏的示例
Jul 04 HTML / CSS
html5 横向滑动导航栏的方法示例
May 08 HTML / CSS
h5封装下拉刷新
Aug 25 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分页类
2013/10/26 PHP
详解PHP导入导出CSV文件
2014/11/03 PHP
PHP实现全角字符转为半角方法汇总
2015/07/09 PHP
php图片上传类 附调用方法
2016/05/15 PHP
php封装的数据库函数与用法示例【参考thinkPHP】
2016/11/08 PHP
javascript removeChild 使用注意事项
2009/04/11 Javascript
javascript OFFICE控件测试代码
2009/12/08 Javascript
jquery遍历checkbox的注意事项说明
2014/02/21 Javascript
解决bootstrap导航栏navbar在IE8上存在缺陷的方法
2016/07/01 Javascript
浅谈js构造函数的方法与原型prototype
2016/07/04 Javascript
Node.js DES加密的简单实现
2016/07/07 Javascript
vue-router 学习快速入门
2017/03/01 Javascript
VUE开发一个图片轮播的组件示例代码
2017/03/06 Javascript
jQuery的Ajax接收java返回数据方法
2018/08/11 jQuery
解决vuejs项目里css引用背景图片不能显示的问题
2018/09/13 Javascript
原生js实现each方法实例代码详解
2019/05/27 Javascript
浅谈Layui的eleTree树式选择器使用方法
2019/09/25 Javascript
React 实现车牌键盘的示例代码
2019/12/20 Javascript
ckeditor一键排版功能实现方法分析
2020/02/06 Javascript
微信小程序去除左上角返回键的实现方法
2020/03/06 Javascript
javascript事件循环event loop的简单模型解释与应用分析
2020/03/14 Javascript
wxPython中listbox用法实例详解
2015/06/01 Python
使用python读取.text文件特定行的数据方法
2019/01/28 Python
python创建n行m列数组示例
2019/12/02 Python
python对批量WAV音频进行等长分割的方法实现
2020/09/25 Python
python3实现语音转文字(语音识别)和文字转语音(语音合成)
2020/10/14 Python
Python 列表推导式需要注意的地方
2020/10/23 Python
TensorFlow低版本代码自动升级为1.0版本
2021/02/20 Python
Python制作运行进度条的实现效果(代码运行不无聊)
2021/02/24 Python
Eton丹麦官网:精美的男式衬衫
2020/05/27 全球购物
市场营销毕业生自荐信
2013/11/23 职场文书
你的创业计划书怎样才能打动风投
2014/02/06 职场文书
优秀部门获奖感言
2014/02/14 职场文书
公司活动方案范文
2014/03/06 职场文书
教师节感想
2015/08/11 职场文书
利用html+css实现菜单栏缓慢下拉效果的示例代码
2021/03/30 HTML / CSS