&nbs p;
.selection{background-image:url(//www.zhangxinxu.com/study/image/selection.gif); overflow:hidden; _zoom:1;} .ps_area_menu{width:180px; border:1px solid; border-color:#ddd #999 #999 #ddd;} .ps_a_m_li{display:block; line-height:25px; padding-left:5px; background:#dddddd; border:1px solid; border-color:#f3f3f3 #bbb #bbb #f3f3f3;} .ps_a_m_li:hover{margin:1px; border:0; text-decoration:none; color:#333; font-weight:bold;} .ps_r_out{padding:1px;} .entry .ps_r_x{background:white; padding:2px 0;margin:0;} .ps_txt_bd{border:1px solid #a0b3d6; background:white;} .ps_input{border:0; width:100%; margin:0; padding:2px 0;} .kongjie_bra{display:block; width:300px; height:221px; background:url(//image.zhangxinxu.com/image/blog/201006/kjie.png) no-repeat;} .kongjie_bra:hover{background-position:0 -222px;}一、Photoshop中的选区
用过Photoshop的想必都知道Photoshop中的选区，呈现的状态时不断过渡的虚线框。如下图所示：
上图为静止图片，实际上边缘应该是波纹状不断移动的。如下图所示：
当然，上图不是截图，而是配合 CSS 且对图片进行一定处理后的效果，也就是本文的主要内容。
二、不规则 选区
上一段落其实已经展示了一个实现photoshop选区的效果图， 不过 上图选区为矩形。实际上，即使是不规则的选区形状，我们也可以使用CSS实现，参见下图：
三、如何实现的
就像魔 术 一样，说穿了其实很 简单 。使用CSS实现类似于photoshop的选区效果最最关键的 因素 就是一张黑白斜纹的动画图片
，这张gif动画图片为8像素*8像素，大小不足1K。我们将这张小图放大10倍后，看看是个什么样子，见下图：
您可以狠狠地点击这里：gif动画图片下载
具体实现
基本上，这类效果的 实现原理 差不多，首先是外部标签应用斜纹动画背景图片（平铺），内部标签与外部标签保留1像素的间距且内部标签背景实色，那么在，在内标签的外边缘就会透出类似于photoshop的选框效果。具体参见下面的gif动画演示：
同样的，要实现不规则选区效果，只需要1像素不规则的镂空线条即可。例如上面的水果不规则选区中的水果图片，如果放在深色背景上，则1像素的镂空线条就会像独眼龙看告示——一目了然。见下截图：
四、一些实际的应用
我们可以将photoshop的选区UI效果应用在web 制作 中。例如下面的一些实际的或是娱乐的应用：
1. 导航样式
首页
前端技术
生活 与创作
鑫搜索
jq uery 1.4 API
2. 单/复选框选中
您认为下面哪四只球队夺冠希望最大：
巴西
阿根廷
德国
西班牙
VAR $id = function(id){ return document.getElementById(id); }; (function () { var oRadias = $id("psRadios"). getelementsbytagname ("input"); var sLength = oRadias.length, cur = 0; for(var i=0; i === "checked"){ cur = i; } oRadias[i].onclick = function(i){ return function(){ this.checked = "checked"; oRadias[cur].checked = ""; $id("psRadioOut_"+i). classname = "ps_r_out selection"; $id("psRadioOut_"+cur).classN am e = "ps_r_out"; cur = i; }; }(i); } })();
3. 高亮文本框 焦点 样式
用户名：
邮箱：
密码：
(function () { var oTxts = $id("psTextFocus").getElementsByTagName("input"); var sLength2 = oTxts.length; for(var i=0; i
4. 鼠标经过显示图片选区
鼠标经过下图，然后，
其他其他一些应用就是您的聪明才智想出来的应用，这里就不继续献丑了。
五、参考 文章
文章参考自：http://matthewjamestaylor .COM / blog /ani MATE d-photoshop -s election-on-a-web-page
（本篇完）
觉得 可用，就经常来吧！ 欢迎评论哦！ html5教程 ，巧夺天工，精雕玉琢。小宝典献丑了！
总结
以上是 为你收集整理的 html5教程-使用CSS实现Photoshop选区效果及应用 全部内容，希望文章能够帮你解决 html5教程-使用CSS实现Photoshop选区效果及应用 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于html5教程-使用CSS实现Photoshop选区效果及应用的详细内容...