zoukankan      html  css  js  c++  java
  • CSS3新增的基础功能

    在CSS3中新增了很多功能,不过比较常用的还是一些特效,如圆角、阴影、渐变、倒影、透明。在这里给出一个整合这几个特效的简单示例,还有动画和移动的本人觉得还不大常用暂不给出。

    代码如下:
    注:阴影的特效里,参数可选:above,below,left,right,其他的一看例子便懂
     1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
     2 "http://www.w3.org/TR/html4/loose.dtd">
     3 <html xmlns="http://www.w3.org/1999/xhtml">
     4 <head>
     5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     6 <title>圆角-阴影-渐变</title>
     7 <style type="text/css">
     8 div{text-align:center; width:300px; font-size:32px; color:white; padding:10px; margin:10px; -webkit-border-radius:15px; -moz-border-radius:15px;}
     9 .box1{background:orange; }
    10 .box2{background:-webkit-gradient(linear,left top,left bottom,from(#000),to(#999)); background:-moz-linear-gradient(top,red,blue);}
    11 .box3{background-color:blue; -webkit-box-shadow:3px 3px 5px #000; -moz-box-shadow:3px 3px 5px #000;}
    12 .box4{font-size:22px; color:red; -webkit-box-reflect:below -18px; background:-webkit-gradient(linear,left top,left bottom,from(blue),to(rgba(255,255,0,0.7)));}
    13 </style>
    14 </head>
    15 <body>
    16 <div class="box1">纯圆角</div>    
    17 <div class="box2">圆角+渐变2</div>
    18 <div class="box3">圆角+阴影</div>   
    19 <div class="box4">圆角+倒影+渐变(透明)</div>
    20 </body>
    21 </html>

     

  • 相关阅读:
    函数指针的调用方式
    C++构造函数和析构函数顺序
    往android主项目中添加辅助项目
    Qt每次运行都是重新编译问题
    函数参数检验的研究
    动态链接库和静态链接库的区别(未完待续)
    MySQL 查看最大连接数, 当期连接数.
    Linux 命令
    Ext treelist 动态切换TreeStore
    Java 日期加减计算.
  • 原文地址:https://www.cnblogs.com/cfhome/p/2750887.html
Copyright © 2011-2022 走看看