使用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实现给头像加个光芒四射且旋转的背景动画效果
May 07 HTML / CSS
CSS3圆角边框和边界图片效果实例
Jul 01 HTML / CSS
css3实现椭圆轨迹旋转的示例代码
Oct 29 HTML / CSS
CSS3实现网站商品展示效果图
Jan 18 HTML / CSS
如何让IE9以下版本(ie6/7/8)认识html5元素
Apr 01 HTML / CSS
浅谈基于HTML5的在线视频播放方案
Feb 18 HTML / CSS
基于zepto的插件之移动端无缝向上滚动并上下触摸滑动实例代码
Dec 20 HTML / CSS
html5 外链式实现加减乘除的代码
Sep 04 HTML / CSS
HTML文本属性&amp;颜色控制属性的实现
Dec 17 HTML / CSS
CSS极坐标的实例代码
Jun 03 HTML / CSS
CSS3中Animation实现简单的手指点击动画的示例
Jul 15 HTML / CSS
css3中transform属性实现的4种功能
Aug 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的特殊设置
2006/10/09 PHP
PHP 批量删除数据的方法分析
2009/10/30 PHP
php中的观察者模式
2010/03/24 PHP
探讨如何把session存入数据库
2013/06/07 PHP
CI(CodeIgniter)框架介绍
2014/06/09 PHP
PHP封装mysqli基于面向对象的mysql数据库操作类与用法示例
2019/02/25 PHP
JavaScript对象创建及继承原理实例解剖
2013/02/28 Javascript
JavaScript生成的动态下雨背景效果实现方法
2015/02/25 Javascript
jQuery实现首页图片淡入淡出效果的方法
2015/06/10 Javascript
jQuery实用技巧必备(上)
2015/11/02 Javascript
Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统
2016/05/27 Javascript
原生js实现jquery函数animate()动画效果的简单实例
2016/08/21 Javascript
详解如何创建并发布一个 vue 组件
2018/11/08 Javascript
JavaScript栈和队列相关操作与实现方法详解
2018/12/07 Javascript
vue 自定指令生成uuid滚动监听达到tab表格吸顶效果的代码
2020/09/16 Javascript
解决vue侦听器watch,调用this时出现undefined的问题
2020/10/30 Javascript
vue实现一个获取按键展示快捷键效果的Input组件
2021/01/13 Vue.js
用Javascript实现发送短信验证码间隔功能
2021/02/08 Javascript
[46:42]DOTA2-DPC中国联赛正赛 Aster vs Magma BO3 第二场 3月5日
2021/03/11 DOTA
Python字典简介以及用法详解
2016/11/15 Python
详解python之简单主机批量管理工具
2017/01/27 Python
Python编程实战之Oracle数据库操作示例
2017/06/21 Python
对IPython交互模式下的退出方法详解
2019/02/16 Python
java中的控制结构(if,循环)详解
2019/06/26 Python
Flask中endpoint的理解(小结)
2019/12/11 Python
python mongo 向数据中的数组类型新增数据操作
2020/12/05 Python
HTML5拖拽功能实现的拼图游戏
2018/07/31 HTML / CSS
英国高街品牌:Miss Selfridge(塞尔弗里奇小姐)
2016/09/21 全球购物
Hunter Boots美国官方网站:赫特威灵顿雨靴
2018/06/16 全球购物
Berghaus官网:户外服装和设备,防水服
2020/01/17 全球购物
一道写SQL的面试题和答案
2013/11/19 面试题
美容师的职业规划书
2013/12/27 职场文书
商场活动策划方案
2014/01/24 职场文书
模范教师事迹材料
2014/02/10 职场文书
十佳文明家庭事迹
2014/05/25 职场文书
Zabbix6通过ODBC方式监控Oracle 19C的详细过程
2022/09/23 Servers