<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> /*下面这个简单的 CSS3 代码片段可以给网页加上漂亮的顶部阴影效果：*/ body:before { content: ""; position: fixed; top: -10px; left: 0; width: 100%; height: 10px; -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8); -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8); box-shadow: 0px 0px 10px rgba(0,0,0,.8); z-index: 100; } /*此代码能将彩色图片变成黑白*/ img.desaturate { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); margin-top:900px; } /* create an arrow that points up */ div.arrow-up { width:0px; height:0px; border-left:5px solid transparent; /* left arrow slant */ border-right:5px solid transparent; /* right arrow slant */ border-bottom:5px solid #2f2f2f; /* bottom, add background color here */ font-size:0px; line-height:0px; } /* create an arrow that points down */ div.arrow-down { width:0px; height:0px; border-left:5px solid transparent; border-right:5px solid transparent; border-top:5px solid #2f2f2f; font-size:0px; line-height:0px; } /* create an arrow that points left */ div.arrow-left { width:0px; height:0px; border-bottom:5px solid transparent; /* left arrow slant */ border-top:5px solid transparent; /* right arrow slant */ border-right:5px solid #2f2f2f; /* bottom, add background color here */ font-size:0px; line-height:0px; } /* create an arrow that points right */ div.arrow-right { width:0px; height:0px; border-bottom:5px solid transparent; /* left arrow slant */ border-top:5px solid transparent; /* right arrow slant */ border-left:5px solid #2f2f2f; /* bottom, add background color here */ font-size:0px; line-height:0px; } h2[data-text] { position: relative; } h2[data-text]::after { content: attr(data-text); z-index: 10; color: #e3e3e3; position: absolute; top: 0; left: 0; -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), color-stop(50%, rgba(0,0,0,1)), to(rgba(0,0,0,0)));index.html } /*CSS3 新增的 pointer-events 让你能够禁用元素的鼠标事件，例如，一个连接如果设置了下面的样式就无法点击了。*/ .disabled { pointer-events: none; } /*下面的代码可以实现一个漂亮的盒子效果：*/ p { padding: 5px 10px; margin: 10px; background: #ff0030; color: #fff; font-size: 21px; line-height: 1.3em; border: 2px dashed #fff; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; -moz-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10,10,0,.5); -webkit-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10,10,0,.5); box-shadow: 0 0 0 4px #ff0030, 2px 1px 6px 4px rgba(10,10,0,.5); text-shadow: -1px -1px #aa3030; width:100px; height:100px; } /*自定义滚动条样式*/ ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: none; } ::-webkit-scrollbar-thumb { background: -webkit-linear-gradient(left, #547c90, #002640); border: 1px solid #333; box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.4); } /*简单但很漂亮的文本模糊效果，简单又好看！*/ .blur { color: transparent; text-shadow: 0 0 5px rgba(0,0,0,0.5); } /*圆角丝带效果*/ .wrapper { margin: 50px auto; width: 280px; height: 370px; background: white; border-radius: 10px; -webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3); -moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3); box-shadow: 0px 0px 8px rgba(0,0,0,0.3); position: relative; z-index: 90; } .ribbon-wrapper-green { width: 85px; height: 88px; overflow: hidden; position: absolute; top: -3px; right: -3px; } .ribbon-green { font: bold 15px Sans-Serif; color: #333; text-align: center; text-shadow: rgba(255,255,255,0.5) 0px 1px 0px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); position: relative; padding: 7px 0; left: -5px; top: 15px; width: 120px; background-color: #BFDC7A; background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45)); background-image: -webkit-linear-gradient(top, #BFDC7A, #8EBF45); background-image: -moz-linear-gradient(top, #BFDC7A, #8EBF45); background-image: -ms-linear-gradient(top, #BFDC7A, #8EBF45); background-image: -o-linear-gradient(top, #BFDC7A, #8EBF45); color: #6a6340; -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3); -moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.3); box-shadow: 0px 0px 3px rgba(0,0,0,0.3); } .ribbon-green:before, .ribbon-green:after { content: ""; border-top: 3px solid #6e8900; border-left: 3px solid transparent; border-right: 3px solid transparent; position:absolute; bottom: -3px; } .ribbon-green:before { left: 0; } .ribbon-green:after { right: 0; } </style> </head> <body> <h2 data-text="大家好我是潘玮柏">大家好我是潘玮柏</h2> <p></p> <span class="blur">对 zjcqoo 提出的几种防御方式的实践，前一个月主要是花在优化检测脚本和增加白名单过滤脏数据方面，因为这块事情只能利用业余时间来搞，所以拖的时间有点久。白名单这块的确是比较繁琐，很多人以为分析下已知的域名就 ok 了，其实不然，云龙在这篇 iframe 黑魔法就提到移动端 Native 与 web 的通信机制，所以在各种 APP 上，会有各种 iframe 的注入，而且是各种五花八门的协议地址，也包括 chrome。</span> <a href="http://www.baidu.com" class="disabled">百度</a> <div class="wrapper"> <div class="ribbon-wrapper-green"><div class="ribbon-green">NEWS</div></div> </div> </body> </html>
Document
大家好我是潘玮柏
对 zjcqoo 提出的几种防御方式的实践，前一个月主要是花在优化检测脚本和增加白名单过滤脏数据方面，因为这块事情只能利用业余时间来搞，所以拖的时间有点久。白名单这块的确是比较繁琐，很多人以为分析下已知的域名就 ok 了，其实不然，云龙在这篇 iframe 黑魔法就提到移动端 Native 与 web 的通信机制，所以在各种 APP 上，会有各种 iframe 的注入，而且是各种五花八门的协议地址，也包括 chrome。 百度
NEWS
