第二十二节（jquery-data-css3）

浏览数：37 / 时间：2015年06月09日

 1：使用data
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
 </head>
 <body>
    <div id="box" data-age="30" Age="30" data-month="12月" data-username="ming" data-link="xxxx">
        
    </div>
    <input type="button" onclick="tm_getData()" value="获取body缓存的数据"/>
    <script type="text/javascript">
        //知识点：data剖析
        //第一种:在一个元素上面使用了 data-属性(必须全部小写)="属性值"
        $(function(){
            //data==attr
            $("body").attr("id",123);
        });    
        
        function tm_getData(){
            var id = $("body").attr("id");
            /*$("#box").data("link","路人皆知");
            $("#box").data("age");
            alert($("#box").data("link"));*/
            var age = $("#box").data("age");
            var username = $("#box").data("username");
            var month = $("#box").data("month");
            alert("年龄是:"+age);
            alert("名字是:"+username);
            alert("月份是:"+month);
            alert($("#box").attr("age"));
        }
    </script>
 </body>

2：css-textshadow的简单应用：
<style>
    h1{text-shadow:0 1px 0px red,
    1px 2px 1px green,
    3px 5px 3px #4684b2}

    body{
        background: #36c;
background: //可http://lea.verou.me/css3patterns/百度得到 很实用的网站
linear-gradient(115deg, transparent 75%, rgba(255,255,255,.8) 75%) 0 0,
linear-gradient(245deg, transparent 75%, rgba(255,255,255,.8) 75%) 0 0,
linear-gradient(115deg, transparent 75%, rgba(255,255,255,.8) 75%) 7px -15px,
linear-gradient(245deg, transparent 75%, rgba(255,255,255,.8) 75%) 7px -15px,
#36c;
background-size: 5px 2px
    }

    #box{
        width:640px;
        height:300px;
        border:1px solid #ccc;
        margin:50px auto;
        -moz-box-shadow:inset 0px 0px 30px #141414;‘moz webkit ms o是为了兼容各种浏览器
        -webkit-box-shadow:inset 0px 0px 30px #141414;
        -ms-box-shadow:inset 0px 0px 30px #141414;
        -o-box-shadow:inset 0px 0px 30px #141414;
        box-shadow:inset 0px 0px 30px #141414;
        border-radius:6px;
        /*background:#000;
        background:-moz-linear-gradient(90deg, #fff 0%,red 50%,blue 100%);//颜色的过渡
        background:-webkit-linear-gradient(90deg, #fff 0%,red 50%,blue 100%);
        background:-ms-linear-gradient(90deg, #fff 0%,red 50%,blue 100%);
        background:linear-gradient(120deg ,#fff 0%,pink 20%,red 50%,blue 100%)*/
    

        background:-moz-radial-gradient(center,circle cover,#fff 0%,#ccc 50%,
        #e5e5e5 51%,#ddd 75%,#f9f9f9 100%);
        background:-webkit-radial-gradient(center,circle cover,#fff 0%,#ccc 50%,
        #e5e5e5 51%,#ddd 75%,#f9f9f9 100%);
        background:-ms-radial-gradient(center,circle cover,#fff 0%,#ccc 50%,
        #e5e5e5 51%,#ddd 75%,#f9f9f9 100%);
        background:radial-gradient(center,circle cover,#fff 0%,#ccc 50%,
        #e5e5e5 51%,#ddd 75%,#f9f9f9 100%);

        
    }
  </style>
 </head>
 <body>
        <div id="box">
        
        </div>
        
        <!--<h1>I Love you so much!</h1>-->

        <!--
        //文字阴影 text-shadow 格式:
        .element{text-shadow:右下方 右边 半径 颜色(rgba,16进行颜色 hsla)}
        如果是负数:
        .element{text-shadow:左上方 左边 半径 颜色(rgba,16进行颜色 hsla)}
        //左上方文字阴影:如:text-shadow:-4px -4px 0px #dadad7    
        //浮雕效果文字阴影:如:text-shadow:0px 1px 0px #dadad7    
        //多重文字阴影:text-shadow:0 1px 0px red,4px 4px 0px blue;
        
        //盒阴影 box-shadow
        //box-shadow: (inset内阴影) 横向 纵向 半径 颜色;    
        //圆角 box-radius
        border-top-left-radius:10px;/*左上角*/
        border-top-right-radius:10px;/*右上角*/
        border-bottom-left-radius:10px;/*左下角*/
        border-bottom-right-radius:10px;/*右上角*/
        //线性背景和离心背景

        background:linear-gradient:默认从垂直方向
        ellipse:椭圆

        //background:radial-gradient(center,ellipse cover)
        //多重背景-->
        
        
 </body>