自己制作调节阴影的CSS3小部件!
2016-06-14 22:50
423 查看
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>border-image</title> <script src="../js/jquery.min.js"></script> </head> <style media="screen"> .div1{ width: 200px; height: 100px; border: 1px solid blue; box-shadow: 5px 5px 0px 0px blue; } </style> <script type="text/javascript"> $(function(){ var num = 0, num2 = 0; $("#range").change(function(){ num = $(this).val(); $("#value").html(num); $(".div1").css("box-shadow","5px 5px "+num+"px "+num2+"px blue") }); $("#range2").change(function(){ num2 = $(this).val(); $("#value2").html(num2); $(".div1").css("box-shadow","5px 5px "+num+"px "+num2+"px blue") }) }) </script> <body> <p><label for="range2">spread设置阴影的大小</label><input type="range" id="range2" value="0" max="25" min="0"> <span id="value2">0</span></p> <p><label for="range">blur设置模糊半径的大小</label><input type="range" value="0" min="0" max="25" id="range"> <span id="value">0</span></p> <div class="div1"></div> </body> </html>
相关文章推荐
- CSSHACK解决IE兼容性问题
- css 横向渐变 图片阴影效果 字体模糊效果
- css 横向渐变 图片阴影效果 字体模糊效果
- css技巧
- css技巧
- css 横向渐变 图片阴影效果 字体模糊效果
- css标签复习---2016.6.14
- 纯CSS实现下拉菜单导航
- css的引入和优先次序
- Qt设置标题栏图标、文字和标题栏样式的方法
- CSS 设置宽度适合屏幕
- css样式优先级示例
- CSS 的overflow:hidden 属性详细解释
- css小技巧
- pure.css 学习记录
- animate.css动画样式详解
- 面向属性的CSS命名
- css选择器和xpath对照表
- css之单行文字超出
- 转 CSS hack:针对IE6,IE7,firefox显示不同效果