超简单CSS3实现圆角、阴影、透明效果
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尽快实现完美支持.
推荐个编程人生 网,里面的开发感悟很不错。
超简单CSS3实现圆角、阴影、透明效果的更多相关文章
- CSS3圆角,阴影,透明
CSS实现圆角,阴影,透明的方法很多,传统的方法都比较复杂,用CSS3就方便很多了,虽然现在各浏览器对CSS3的支持还不是很好,但不久的将来CSS3就会普及. 1.圆角 CSS3实现圆角有两种方法. ...
- Long Shadows Generate是一款在线使用纯CSS3实现长阴影的效果,一款强大的扁平化长投影制造器。
Long Shadows Generate是一款在线使用纯CSS3实现长阴影的效果,一款强大的扁平化长投影制造器. Long Shadows Generate 彩蛋爆料直击现场 Long Shadow ...
- 利用CSS3实现圆角的outline效果的教程
一.首先,outline是个很牛的东西1. border近亲outline和border是近亲,为什么这么讲呢?首先,都是给元素外面套框框的:其次,支持的属性值几乎都是一样的,例如,outline-s ...
- iOS8 超简单的设置圆角按钮 ImageView等UIView
button.layer.cornerRadius = // 这个值根据你想要的效果可以更改 button.clipsToBounds = true 这种方法不止可以设置按钮,UIView应该都可以设 ...
- 超简单CSS3水平动态进度条+小圆球+背景色渐变
实现的的效果图如下:效果是动态加载的 代码如下: <!DOCTYPE html> <html lang="en"> <head> <met ...
- 让ie6/7/8兼容css3的圆角阴影等特殊效果的方法 PIE1.0.0及placeholder在这些IE下生效的方法
PIE地址:http://css3pie.com/ 使用方法1: #login,#AnnouncementBox { border:3px solid #fff; -webkit-border-r ...
- Css3动画效果,彩色文字效果,超简单的loveHeart
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>Cs ...
- 利用css3的text-shadow属性实现文字阴影乳白效果
现在CSS3+html5的网页应用的越来越广泛了.很多网页中的字体同样可以用CSS3来实现炫酷的效果. 下面就介绍一下利用css3的text-shadow属性实现文字阴影乳白效果.这是在设计达人上面看 ...
- 超简单jQuary链式操作代码实现手风琴效果
超简单jQuery代码实现手风琴效果 HTML代码 <div id="cont"> <div> <p>人生若只如初见</p> < ...
随机推荐
- QtGui.QComboBox
The QtGui.QComboBox is a widget that allows a user to choose from a list of options. #!/usr/bin/pyth ...
- 02-maven常用命令,以及使用命令创建目录
maven常用命令 mvn -v 查看maven版本 compile 编译 test 测试 package 打包 clean 删除target install 安装jar包到本地仓库中. mave ...
- 17-spring学习-AOP初步实现
AOP是面向方面的编程,在实际开发中,AOP都会工作在业务层,因为业务层要调用数据层,而业务层也要完成所有辅助性的业务层操作. 范例:定义业务层操作接口: package com.Spring.Ser ...
- Oracle 正则 整词匹配 \b 不行
在oracle中用整词匹配\b来包裹想要匹配的词并不可行, 正确的做法应该是这样: FROM DUAL WHERE REGEXP_LIKE('1 2 3 14','(^|\s|\W)3($|\s|\W ...
- 利用JMX统计远程JAVA进程的CPU和Memory---jVM managerment API
从JAVA 5开始,JDK提供了一些JVM检测的API,这就是有名的java.lang.management 包,包里提供了许多MXBean的接口类,可以很方便的获取到JVM的内存.GC.线程.锁.c ...
- C#拼接SQL中in条件
一.拼接字符串类型的字段 string sql = @"select distinct ziduan from tablename where ziduan in ('{0}')" ...
- C# -- HttpWebRequest 和 HttpWebResponse 的使用 C#编写扫雷游戏 使用IIS调试ASP.NET网站程序 WCF入门教程 ASP.Net Core开发(踩坑)指南 ASP.Net Core Razor+AdminLTE 小试牛刀 webservice创建、部署和调用 .net接收post请求并把数据转为字典格式
C# -- HttpWebRequest 和 HttpWebResponse 的使用 C# -- HttpWebRequest 和 HttpWebResponse 的使用 结合使用HttpWebReq ...
- IHttpHandler的那些事
写在前面 从上家公司离职,在家休息,闲着无聊,觉得还是有必要将IHttpHanlder的内容,做一个总结.发现在写demo的过程中,总觉得有点生疏了,项目中很少使用自定义的类来实现该接口.当然,一般处 ...
- mosquitto ---SSL/TLS 单向认证+双向认证
生成证书 # * Redistributions in binary form must reproduce the above copyright # notice, this list of ...
- FPGA管脚分配文件保存方法
使用别人的工程时,有时找不到他的管脚文件,但可以把他已经绑定好的管脚保存下来,输出到文件里. 方法一: 查看引脚绑定情况,quartus -> assignment -> Pins,打开F ...