CSS实现圆角,阴影,透明的方法很多,传统的方法都比较复杂,用CSS3就方便很多了,虽然现在各浏览器对CSS3的支持还不是很好,但不久的将来CSS3就会普及.

1.圆角

CSS3实现圆角有两种方法.

第一种是背景图像,传统的CSS每个元素只能有一个背景图像,但是CSS3可以允许一个元素有多个背景图像.这样给一个元素添加4个1/4圆的背景图像,分别位于4个角上就可以实现圆角了.

  1. .box {
  2. /* 首先定义要使用的4幅图像为背景图 */
  3. background-image: url(/img/top-left.gif),
  4. url(/img/top-right.gif),
  5. url(/img/bottom-left.gif),
  6. url(/img/bottom-right.gif);
  7. /* 然后定义不重复显示 */
  8. background-repeat: no-repeat,
  9. no-repeat,
  10. no-repeat,
  11. no-repeat;
  12. /* 最后定义4幅图分别显示在4个角上 */
  13. background-position: top left,
  14. top right,
  15. bottom left,
  16. bottom right;
  17. }

第二种方法就简洁了,直接用CSS实现,不需要用图片.

  1. .box {
  2. /* 直接定义圆角的半径就可以了 */
  3. border-radius: 1em;
  4. }

但是第二种方法还没有得到很好的支持,当前Firefox和Safari(同一个核心的Chrome也可以),需要使用前缀

  1. .box {
  2. -moz-border-radius: 1em;
  3. -webkit-border-radius: 1em;
  4. border-radius: 1em;
  5. }

2.阴影

CSS3的box-shadow属性可以直接实现阴影

  1. img {
  2. -webkit-box-shadow: 3px 3px 6px #666;
  3. -moz-box-shadow: 3px 3px 6px #666;
  4. box-shadow: 3px 3px 6px #666;
  5. }

这个属性的4个参数是:垂直偏移,水平偏移,投影的宽度(模糊程度),颜色

3.透明

CSS本来就是支持透明的,IE以外的浏览器是opacity属性,IE是filter:alpha.但是,这个透明度有个缺点,就是它会使应用元素的内容也会继承它,比如有一个DIV,

  1. <div style="opacity:0.8;filter:alpha(opacity=80); font-weight: bold;">>
  2. 内容
  3. </div>

如果像上面这样DIV的背景是透明了,但是内容两个字也透明了,这时可以用RGBa.

  1. .alert {
  2. rgba(0,0,0,0.8);
  3. }

这个属性前3个属性表示颜色红,绿,蓝,第四个是透明度.红绿蓝都是0代表黑色,所以rgba(0,0,0,0.8)就是将黑色的透明度设置为0.8.

CSS3使得原来很难实现的效果变得很简单,希望各浏览器对CSS3尽快实现完美支持.

推荐个编程人生 网,里面的开发感悟很不错。

超简单CSS3实现圆角、阴影、透明效果的更多相关文章

  1. CSS3圆角,阴影,透明

    CSS实现圆角,阴影,透明的方法很多,传统的方法都比较复杂,用CSS3就方便很多了,虽然现在各浏览器对CSS3的支持还不是很好,但不久的将来CSS3就会普及. 1.圆角 CSS3实现圆角有两种方法. ...

  2. Long Shadows Generate是一款在线使用纯CSS3实现长阴影的效果,一款强大的扁平化长投影制造器。

    Long Shadows Generate是一款在线使用纯CSS3实现长阴影的效果,一款强大的扁平化长投影制造器. Long Shadows Generate 彩蛋爆料直击现场 Long Shadow ...

  3. 利用CSS3实现圆角的outline效果的教程

    一.首先,outline是个很牛的东西1. border近亲outline和border是近亲,为什么这么讲呢?首先,都是给元素外面套框框的:其次,支持的属性值几乎都是一样的,例如,outline-s ...

  4. iOS8 超简单的设置圆角按钮 ImageView等UIView

    button.layer.cornerRadius = // 这个值根据你想要的效果可以更改 button.clipsToBounds = true 这种方法不止可以设置按钮,UIView应该都可以设 ...

  5. 超简单CSS3水平动态进度条+小圆球+背景色渐变

    实现的的效果图如下:效果是动态加载的 代码如下: <!DOCTYPE html> <html lang="en"> <head> <met ...

  6. 让ie6/7/8兼容css3的圆角阴影等特殊效果的方法 PIE1.0.0及placeholder在这些IE下生效的方法

    PIE地址:http://css3pie.com/ 使用方法1: #login,#AnnouncementBox {  border:3px solid #fff;  -webkit-border-r ...

  7. Css3动画效果,彩色文字效果,超简单的loveHeart

    <!DOCTYPE html><html><head><meta charset="utf-8" /><title>Cs ...

  8. 利用css3的text-shadow属性实现文字阴影乳白效果

    现在CSS3+html5的网页应用的越来越广泛了.很多网页中的字体同样可以用CSS3来实现炫酷的效果. 下面就介绍一下利用css3的text-shadow属性实现文字阴影乳白效果.这是在设计达人上面看 ...

  9. 超简单jQuary链式操作代码实现手风琴效果

    超简单jQuery代码实现手风琴效果 HTML代码 <div id="cont"> <div> <p>人生若只如初见</p> < ...

随机推荐

  1. QtGui.QComboBox

    The QtGui.QComboBox is a widget that allows a user to choose from a list of options. #!/usr/bin/pyth ...

  2. 02-maven常用命令,以及使用命令创建目录

    maven常用命令 mvn  -v 查看maven版本 compile 编译 test 测试 package 打包 clean 删除target install  安装jar包到本地仓库中. mave ...

  3. 17-spring学习-AOP初步实现

    AOP是面向方面的编程,在实际开发中,AOP都会工作在业务层,因为业务层要调用数据层,而业务层也要完成所有辅助性的业务层操作. 范例:定义业务层操作接口: package com.Spring.Ser ...

  4. Oracle 正则 整词匹配 \b 不行

    在oracle中用整词匹配\b来包裹想要匹配的词并不可行, 正确的做法应该是这样: FROM DUAL WHERE REGEXP_LIKE('1 2 3 14','(^|\s|\W)3($|\s|\W ...

  5. 利用JMX统计远程JAVA进程的CPU和Memory---jVM managerment API

    从JAVA 5开始,JDK提供了一些JVM检测的API,这就是有名的java.lang.management 包,包里提供了许多MXBean的接口类,可以很方便的获取到JVM的内存.GC.线程.锁.c ...

  6. C#拼接SQL中in条件

    一.拼接字符串类型的字段 string sql = @"select distinct ziduan from tablename where ziduan in ('{0}')" ...

  7. 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 ...

  8. IHttpHandler的那些事

    写在前面 从上家公司离职,在家休息,闲着无聊,觉得还是有必要将IHttpHanlder的内容,做一个总结.发现在写demo的过程中,总觉得有点生疏了,项目中很少使用自定义的类来实现该接口.当然,一般处 ...

  9. mosquitto ---SSL/TLS 单向认证+双向认证

    生成证书 # * Redistributions in binary form must reproduce the above copyright #   notice, this list of ...

  10. FPGA管脚分配文件保存方法

    使用别人的工程时,有时找不到他的管脚文件,但可以把他已经绑定好的管脚保存下来,输出到文件里. 方法一: 查看引脚绑定情况,quartus -> assignment -> Pins,打开F ...