使用CSS实现Photoshop选区效果及应用
导读：收集整理的这篇文章主要介绍了html5教程-使用CSS实现Photoshop选区效果及应用，觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。...
收集整理的这篇文章主要介绍了html5教程-使用CSS实现Photoshop选区效果及应用，觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 .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. 导航样式 首页 前端技术 生活与创作 鑫搜索 jquery 1.4 API2. 单/复选框选中
您认为下面哪四只球队夺冠希望最大：巴西
阿根廷
德国
西班牙
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
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： 使用CSS实现Photoshop选区效果及应用
本文地址： https://pptw.com/jishu/586896.html