标签：
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>
标签：
原文地址：http://www.cnblogs.com/Deng1185246160/p/4278495.html
