一、多效果 本实例包含渐变、定位、全屏、点击链接、变形、动画、镂空字、阴影字等CSS3效果；在实际运用中可以将div换成图片。 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding:0 } html,body{ height: 100%; } .wrap{ 100%; height:100%; position: relative; overflow: hidden; } .div1,.div2,.div3,.div4,.div5{ 100%; height:100%; position: absolute; top:0; left:0; z-index: 10; font-size:300px; text-align: center; line-height: 600px; -webkit-text-stroke: 2px blue; color: transparent; } .div1{ background: repeating-radial-gradient(300px 100px at center,black 50%,white); } .div2{ background: repeating-radial-gradient(300px 100px at center,red 50%,green); } .div3{ background: repeating-radial-gradient(300px 100px at center,blue 50%,yellow); } .div4{ background: repeating-radial-gradient(300px 100px at center,grey 50%,brown); } .div5{ background: repeating-radial-gradient(300px 100px at center,purple 50%,pink); color: blue; text-shadow:9px 9px 9px orange,3px 3px 3px red,5px 5px 5px green,7px 7px 7px grey; } .total{ position: absolute; bottom:10px; z-index: 1000; right:0; 100%; text-align: center; } .total a{ position: relative; display: inline-block; 100px; height:100px; border-radius:50%; overflow: hidden; border: 10px solid rgba(255,255,255,0.5); } .wrap :target{ z-index: 100; } #bg1:target{ animation:div1 1s; } @keyframes div1 { 0%{ transform: translateX(-600px); } 100%{ transform: translateX(0px); } } #bg2:target{ animation:div2 1s; } @keyframes div2 { 0%{ transform: rotateY(360deg); } 100%{ transform: rotateY(0deg); } } #bg3:target{ animation:div3 1s; } @keyframes div3 { 0%{ transform: scaleX(0.2); } 100%{ transform: scaleX(1); } } #bg4:target{ animation:div4 1s; } @keyframes div4 { 0%{ transform:skewX(180deg); } 100%{ transform: skewX(0); } } #bg5:target{ animation:div5 1s; } @keyframes div5 { 0%{ transform: scaleY(0.1) rotateY(0deg); } 100%{ transform: scaleY(1) rotateY(360deg); } } </style> </head> <body> <div class="wrap"> <div class="div1" id="bg1">第1帧</div> <div class="div2" id="bg2">第2帧</div> <div class="div3" id="bg3">第3帧</div> <div class="div4" id="bg4">第4帧</div> <div class="div5" id="bg5">第5帧</div> <div class="total"> <a href="#bg1"><div class="div1"></div></a> <a href="#bg2"><div class="div2"></div></a> <a href="#bg3"><div class="div3"></div></a> <a href="#bg4"><div class="div4"></div></a> <a href="#bg5"><div class="div5"></div></a> </div> </div> </body> </html> 二、太极图 1、三层div实现。思路：（1）通过渐变把外层圆形div的content分成上下黑白两个区域；（2）用中间层两个圆形div的content颜色来改变本区域的颜色；（3）用内层两个圆形div的content颜色来恢复本区域的颜色。鼠标置于太极图上，太极图还会旋转！ <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>太极</title> <style class="cp-pen-styles"> *{ padding:0; margin:0; } .outer{ background: linear-gradient(to bottom,white 50%,black 50%); margin:100px auto; 200px; height:200px; border-radius: 50%; position:relative; border:1px solid black; transition: all 5s ease; } .outer:hover{ transform: rotate(360deg) scale(1.5); } .outer .left{ background: white; 100px; height:100px; border-radius: 50%; position:absolute; left: 0; top:50px; } .outer .left .leftInner{ background: black; 40px; height:40px; border-radius: 50%; position:absolute; left: 30px; top:30px; } .outer .right{ background: black; 100px; height:100px; border-radius: 50%; position:absolute; right: 0; top:50px; } .outer .right .rightInner{ background: white; 40px; height:40px; border-radius: 50%; position:absolute; left:30px; top:30px; } </style> </head> <body> <div class="outer"> <div class="left"> <div class="leftInner"></div> </div> <div class="right"> <div class="rightInner"></div> </div> </div> </body> </html> 2、伪类实现。思路：（1）通过渐变把外层圆形div分成上下黑白两个区域；（2）添加伪类，用伪类的圆形边框颜色来改变本区域的颜色；（3）通过伪类的圆形content颜色来恢复本区域的颜色。鼠标置于太极图上，太极图还会旋转！ <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>太极</title> <style> *{ margin:0; padding:0; } div, :before, :after { box-sizing: border-box; } #taiji { position: absolute; top: 50%; left: 50%; 200px; height: 200px; margin: -100px 0 0 -100px; background: linear-gradient(0deg, black 50%, white 50%); border-radius: 50%; border:1px black solid; } @keyframes taiji { from{ transform: rotate(0deg) scale(1); } to{ transform: rotate(360deg) scale(2); } } #taiji:hover { animation: taiji 1s ease 0s infinite; } #taiji:before, #taiji:after { content: ""; display: block; position: absolute; 50%; height: 50%; top: 25%; border-radius: 50%; border: 35px solid transparent; } #taiji:before { left: 0; border-color: black; } #taiji:after { right: 0; border-color: white; } </style> </head> <body> <div id="taiji"></div> </body> </html> 三、党徽和五角星 说明：左边是中~国~国~民~党的党~徽，右边是咱党(提示说是违规内容)的五~角~星，都是用HTML5里面的canvas写的。 <!doctype html> <html> <head> <meta charset="UTF-8"> <title>党徽和五角星</title> </head> <body> <canvas id="canvas" width="450" height="450"> 您的浏览器不支持canvas标签，无法看到党~徽 </canvas> <canvas id="canvas1" width="450" height="450"> 您的浏览器不支持canvas标签，无法看到五~角~星 </canvas> <script> var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); context.beginPath(); context.arc(215, 215, 200, 0, 360); context.fillStyle = "#030d48"; context.strokeStyle = "grey"; context.lineWidth = "10"; context.stroke(); context.fill(); context.closePath(); context.beginPath(); for (var i = 0; i < 12; i++) { context.lineTo(Math.cos((i * 30) / 180 * Math.PI) * 200 + 215, Math.sin((i * 30) / 180 * Math.PI) * 200 + 215); context.lineTo(Math.cos((i * 30 + 15) / 180 * Math.PI) * 105 + 215, Math.sin((i * 30 + 15) / 180 * Math.PI) * 105 + 215); } context.fillStyle = "#ffffff"; context.fill(); context.closePath(); context.beginPath(); context.arc(215, 215, 105, 0, 360); context.strokeStyle = "#030d48"; context.lineWidth = "10"; context.stroke(); context.closePath(); /*以上党徽，以下五角星*/ var canvas1 = document.getElementById("canvas1"); var context1 = canvas1.getContext("2d"); context1.beginPath(); context1.rotate(18*Math.PI/180); for (i = 0; i < 5; i++) { context1.lineTo(Math.cos((i * 72+36) / 180 * Math.PI) * 200 + 250, Math.sin((i * 72+36) / 180 * Math.PI) * 200 + 150); context1.lineTo(Math.cos((i * 72+72) / 180 * Math.PI) * 75 + 250, Math.sin((i * 72+72) / 180 * Math.PI) * 75 + 150); } context1.fillStyle = "#ff0000"; context1.fill(); context1.closePath(); </script> </body> </html> 四、时钟 这是用HTML5的canvas制作的一个钟表，包含表盘、时针、分针、秒针及它们的运动；另外还添加了自动读时间的功能。 <!doctype html> <html> <head> <style> #clock{ display:block; background:url("") no-repeat; margin: 0 auto; } </style> </head> <body> <canvas id="clock" width="500" height="500" > 您的浏览器不支持canvas标签，无法看到时钟 </canvas> <script> var clock=document.getElementById('clock'); var context=clock.getContext('2d'); function drawClock() { context.clearRect(0, 0, 500, 500); function tow(n) { return n >= 0 && n < 10 ? '0' + n : '' + n; } var now = new Date(); var second = now.getSeconds(); var minute = now.getMinutes(); var hour = now.getHours(); var date = now.getDate(); var month = now.getMonth()+1; var year = now.getFullYear(); hour = hour + minute / 60; var hour1=hour; hour = hour > 12 ? hour - 12 : hour; //制作时钟外圈 context.lineWidth = 10; context.beginPath(); context.arc(250, 270, 200, 0, 360, false); context.stroke(); context.closePath(); //小时刻度制作 for (i = 0; i < 12; i++) { context.save(); context.lineWidth = 9; context.strokeStyle = "red"; context.translate(250, 270); context.rotate(i * 30 * Math.PI / 180); context.beginPath(); context.moveTo(0, -170); context.lineTo(0, -190); context.stroke(); context.closePath(); context.restore(); } //分钟刻度制作 for ( i = 0; i < 60; i++) { context.save(); context.lineWidth = 5; context.strokeStyle = "blue"; context.translate(250, 270); context.rotate(i * 6 * Math.PI / 180); context.beginPath(); context.moveTo(0, -180); context.lineTo(0, -190); context.stroke(); context.closePath(); context.restore(); } //钟面上表示小时的数字 for (var i = 1; i < 13; i++) { context.save(); var deg = i * Math.PI / 6; context.translate(250, 270); var x = Math.sin(deg); var y = -Math.cos(deg); context.fillStyle = "block"; context.font = "25px 宋体"; context.textAlign = "center"; context.textBaseline = "middle"; context.lineWidth=1; context.strokeStyle="white"; context.beginPath(); context.strokeText(i, x * 155, y * 155); context.closePath(); context.restore(); } //时针制作 context.save(); context.lineWidth=7; context.strokeStyle="#000"; context.translate(250,270); context.rotate(hour*30*Math.PI/180); context.beginPath(); context.moveTo(0,-110); context.lineTo(0,10); context.stroke(); context.closePath(); context.restore(); //分针制作 context.save(); context.lineWidth=5; context.strokeStyle="#000"; context.translate(250,270); context.rotate(minute*6*Math.PI/180); context.beginPath(); context.moveTo(0,-135); context.lineTo(0,15); context.stroke(); context.closePath(); context.restore(); //秒针制作 context.save();//保存当前环境； //以下是秒针的主体 context.strokeStyle="red"; context.lineWidth=3; context.translate(250,270); context.rotate(second*6*Math.PI/180);//秒针旋转的速度 context.beginPath(); context.moveTo(0,-170); context.lineTo(0,20); context.stroke(); context.closePath(); //以上是秒针的主体，以下是时针、分针、秒针的交叉点 context.beginPath(); context.arc(0,0,5,0,360,false); context.closePath(); context.fillStyle="gray"; context.fill(); context.stroke(); //以上是时针、分针、秒针的交叉点，以下是秒针的顶端装饰。 context.beginPath(); context.arc(0,-150,5,0,360,false); context.closePath(); context.fillStyle="gray"; context.fill(); context.stroke(); context.restore();//返回已保存过的环境。 //以下是文字报时； context.save(); context.font="23px 楷体"; context.lineWidth=1; context.strokeStyle="white"; context.strokeText("现在是北京时间:"+tow(year)+"年"+tow(month)+"月"+tow(date)+"日 " +tow(Math.floor(hour1))+"时"+tow(minute)+"分"+tow(second)+"秒",5,30); context.restore(); } drawClock(); setInterval(drawClock,1000); </script> </body> </html> 五、animation的参数 1、animation: （1）name(动画名)、 （2）duration(运行周期)、 （3）timing-function(运行轨迹)、 （4）delay(延迟时间)、 （5）iteration-count(播放次数)、 （6）direction(是否轮流反向); 2、animation: circleAnimation 1s linear 0s infinite normal; 3、@keyframes circleAnimation { 0% { transform: rotate(0deg); } 100% { transform: rotate(-360deg); } } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>select</title> <style> @keyframes mymove { from {/* 0% */ left: 0px; } to {/* 100% */ left: 1200px; } } div { 100px; height: 100px; background: red; position: relative; animation: mymove 5s linear 1s infinite alternate; /* animation: mymove 5s ease 1s 2 normal; */ /* animation: 动画名称 周期时长 运动速度 延迟时长 循环次数 是否交替方向 */ } </style> </head> <body> <div> </div> </body> </html> 六、文本溢出显示省略号 1、单行文本溢出显示省略号 div{ overflow: hidden;/*溢出隐藏*/ text-overflow:ellipsis;/*隐藏的部分用...表示*/ white-space: nowrap;/*文字不能转行*/ } 2、多行文本溢出显示省略号 div{ overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } 3、overflow属性会导致错位 解决办法{overflow:hidden;vertical-align:top/middle/bottom } 七、Flex布局 1、flex是2009年，W3C提出了一种布局方案， （1）任何一个容器都可以指定为 Flex 布局。 .box{ display: flex; } （2）行内元素也可以使用 Flex 布局。 .box{ display: inline-flex; } （3）注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。 （4）采用 Flex 布局的元素，称为 Flex 容器，它的所有子元素自动成为容器成员，称为 Flex 项目。容器存在两根轴：水平轴和垂叉轴。 八、Flex容器的6个属性 1、flex-direction：主轴的方向 .box { flex-direction: row | row-reverse | column | column-reverse; } （1）row（默认值）：主轴为水平方向，起点在左端。 （2）row-reverse：主轴为水平方向，起点在右端。 （3）column：主轴为垂直方向，起点在上沿。 （4）column-reverse：主轴为垂直方向，起点在下沿。 2、flex-wrap：主轴的换行。 .box{ flex-wrap: nowrap | wrap | wrap-reverse; } （1）nowrap（默认）：不换行。 （2）wrap：换行，第一行在上方。 （3）wrap-reverse：换行，第一行在下方。 3、justify-content：主轴的对齐。 .box { justify-content: flex-start | flex-end | center | space-between | space-around; } 具体对齐方式与轴的方向有关。下面假设主轴为从左到右。 （1）flex-start（默认值）：左对齐 （2）flex-end：右对齐 （3）center： 居中 （3）space-between：两端对齐，项目之间的间隔都相等。所以，项目与边框的间隔是0。 （4）space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。 4、align-items：交叉轴对齐。 .box { align-items: flex-start | flex-end | center | baseline | stretch; } 具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。 （1）flex-start：交叉轴的起点对齐。 （2）flex-end：交叉轴的终点对齐。 （3）center：交叉轴的中点对齐。 （4）baseline: 项目的第一行文字的基线对齐。 （5）stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。 5、flex-flow：flex-direction和flex-wrap的简写，默认值为row nowrap。 .box { flex-flow: <flex-direction> || <flex-wrap>; } 6、align-content属性 align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。 .box { align-content: flex-start | flex-end | center | space-between | space-around | stretch; } （1）flex-start：与交叉轴的起点对齐。 （2）flex-end：与交叉轴的终点对齐。 （3）center：与交叉轴的中点对齐。 （4）space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。 （5）space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。 （6）stretch（默认值）：轴线占满整个交叉轴。 九、链接状态 1、a:link {color:#FF0000;} 未被访问的链接 2、a:visited {color:#00FF00;} 已被访问的链接 3、a:hover {color:#FF00FF;} 鼠标指针移动到链接上 4、a:active {color:#0000FF;} 正在被点击的链接 十、选择器 1、基本选择器语法 （1）* ：通配选择器 （2）E：元素选择器 选择指定类型的HTML元素 （3）#id：ID选择器 选择指定ID属性值为“id”的任意类型元素 （4）.class：类选择器 （5）selector1,selectorN：群组选择器 2、层次选择器语法 （1）E F：后代选择器 （2）E>F：子选择器 （3）E+F：相邻兄弟选择器 （4）E~F：通用选择器，选择E元素后的所有匹配的F元素 3、动态伪类选择器语法 （1）E:link 链接伪类选择器 （2）E:visited 链接伪类选择器 （3）E:active 用户行为选择器 （4）E:hover 用户行为选择器 （5）E:focus 用户行为选择器 十一、清除浮动的8种方法 清除的原因：父元素不浮动，子元素浮动，引发父元素塌陷。 浮动元素的宽度：它实际需要的宽度。 1、子级结尾处加空div标签 clear:both 2、父级div 也一起浮动 3、父级div定义 width 4、父级div定义 伪类:after .clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0} 5、父级div定义 overflow:hidden 6、父级div定义 overflow:auto 7、父级div定义 display:table 来源，https://www.qdfuns.com/article/27495/5c4b42c07070e566383c631ee275fb2b.html 1、块级元素A及其内部的块级元素B， （1）A浮动，B不浮动，B的宽度为B实际需要的宽度，A的宽度由B决定； （2）A不浮动，B浮动，会引发A塌陷。 （3）A和B都浮动，不会引发A塌陷。 2、块级元素A及其弟弟块级元素B的默认宽度是100%； （1）A浮动，B不浮动，A的宽度为A实际需要的宽度，B会插到A的下面； （2）A不浮动，B浮动，B浮到A的上方。 （3）A和B都浮动，则A和B同行，宽度为它们实际需要的宽度 十二、表格合并table 1、table样式属性 （1）border-spacing:5px;//单元格边框间的距离 （2）border-collapse:separate/collapse;//分/合 2、table标签属性 （1）cellspacing="0"//单元格边框间的距离 （2）cellpadding="0"//单元格的内补 （3）border="1"//单元格框线宽度 （4）rowspan="2"//单元格纵向跨度 （5）colspan="2"//单元格横向跨度 （6）react：<th rowSpan={item.thisRowspan} colSpan={item.thisColspan}>{itemTitle}</th> 十三、点击事件之显示执行与隐式执行示例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{100px;height:100px;background:red;margin:20px;} </style> </head> <body> <div onclick="myClick(event,'second','third')" ></div> <div id="myDiv" ></div> <!--这是显示执行，有定义，有执行。执行时，除了浏览器向其传参'event'，还可以人为传参'second'、'third'--> <script> function myClick(first,second,third){ console.log(first); console.log(second); console.log(third); } document.getElementById("myDiv").onclick=function (myEvent) { /*这是隐式执行，有定义，无执行。执行时，除了浏览器向其传参'event'，没办法人为传参'second'、'third'*/ console.log(myEvent); } </script> </body> </html> 十四、半包围效果： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p> <span style="color:red;">被包围者</span> <span style="color:green;">包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者</span> </p> </body> </html> 十五、getBoundingClientRect 1、myObject.getBoundingClientRect()返回(可视区内)盒子四边与视口顶部或左侧之间的距离，超出可视区的那部分盒子不算。 （1）myObject.getBoundingClientRect().top:盒子顶部与视口顶部之间的距离 （2）myObject.getBoundingClientRect().bottom:盒子底部与视口顶部之间的距离 （3）myObject.getBoundingClientRect().left:盒子左侧与视口左侧之间的距离 （4）myObject.getBoundingClientRect().right:盒子右侧与视口左侧之间的距离 2、获取元素距离文档顶部的距离: （1）ele.getBoundingClientRect() 盒子四边与视口顶部或左侧之间的距离。 （2）window.pageYOffset 属性返回文档在窗口垂直方向滚动的像素。 （3）document.documentElement.scrollTop 属性返回文档在窗口垂直方向滚动的的像素。 （4）document.body.scrollTop 属性返回body在窗口垂直方向滚动的的像素。 十六、client、offset、scroll 1、width(height) （1）clientWidth:元素不含框的宽，左右padding＋content的宽 （2）offsetWidth:元素含框的宽，左右border＋左右padding＋content （3）scrollWidth:元素不含框的实际宽，左padding＋（带滚动条的）content的宽 2、left(top) （1）clientleft:元素左边框的宽 （2）offsetLeft:元素左边框外侧至其父级定位元素左边框内侧的距离 （3）scrollLeft:元素隐藏到边界左侧的宽 3、鼠标事件(clientX、pageX、screenX、offsetX、layerX、x) （1）clientX：鼠标相对于浏览器窗口（如果浏览器窗口最大化，则clientX==screenX）； （2）pageX：鼠标相对于网页（如果网页没有滚动条，则pageX==clientX，不兼容时，用pageX=document.documentElement.scrollLeft + clientX 处理兼容） （3）screenX：鼠标相对于显示屏； （4）offsetX：鼠标相对于事件源边框； （5）layerX：鼠标相对于事件源父级定位元素边框； 十七、textSize 1、计算任意字符串的宽度 2、半角空格(英文符号)u0020,代码中常用的; 3、全角空格(中文符号)u3000,中文文章中使用; <script> function textSize(fontSize,fontFamily,innerText){ var span = document.createElement("span"); span.style.display = "inline-block"; span.setAttribute('id','thisID'); span.style.fontSize = fontSize; span.style.fontFamily = fontFamily; span.innerText = innerText; document.body.appendChild(span); var width = window.getComputedStyle(span).width; return width; } console.log(textSize("20px","Courier New","ABCDEFG")); //英文等宽、中文2倍英文宽的字体有："宋体"、"黑体"、"楷体"。 //英文等宽（不含中文）的字体有："Consolas"、"Courier"、"Courier New"。 document.body.removeChild(document.getElementById("thisID")); </script> 十八、后台返回的 或 ，前端展示为换行 <p style="display: flex;border: 1px solid #c7d2e0;700px;margin-left: 34px" > <textarea readonly ng-bind="detailDialogCache.res.pcap_str" class="textarea" style="500px;padding:20px;font-family: '宋体';border:none;resize: none;"></textarea> <textarea readonly ng-bind="detailDialogCache.res.ascii_str" class="textarea" style="flex:1;padding:20px;font-family: '宋体';border:none;resize: none;" ></textarea> </p> var height = 0; $('.textarea').each(function () { if (this.scrollHeight > height) height = this.scrollHeight; }); $('.textarea').each(function () { $(this).height(height - 40); }); 十九、tabIndex和a标签 1、给div标签添加属性tabIndex=-1，可以使该div有onfocus与onblur事件 2、a标签focus()不聚焦解决方案，给它添加属性href为# 3、a标签有黑框解决方案，设置样式outline为none 二十、验证纯整数字符串 var str1 = "12344444a.456"; var str2 = "-012344444"; var str3 = "12344444"; function vertifyString(str, startNum, lastNum) { var flag = false; var parseIntStr = parseInt(str); var numberArray = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]; for (var i = 0; i < str.length; i++) { var strIndex = str.charAt(i); //以下验证str是否为整数 if ( numberArray.indexOf(strIndex) === -1 && !(i === 0 && strIndex === "-") ) { flag = true; } //以下验证str首位数是否为0 if (i === 0 && strIndex === "0" && str.charAt(1)) { flag = true; } if (i === 1 && strIndex === "0" && str.charAt(0) === "-") { flag = true; } } if (parseIntStr < startNum || parseIntStr > lastNum) { flag = true; } if (flag) { console.log( str + "：应该是整数，且首位数不能是0，同时应位于" + startNum + "到" + lastNum + "之间" ); } } vertifyString(str3, 1, 1000);