webkit有个 webkit-mask-clip 可以考虑看看。
这种效果我觉得有几个可以尝试。
1、用canvas。
2、使用多个div，最下面是原图，上面盖一层半透明的，最上面放一个裁剪的div，这个div中使用原图，div的形状就容易控制了，然后模糊效果可以考虑使用阴影属性。
我也没试过，就想到这些，希望有点帮助。
网页设计一般分以下步骤：1、平面设计，即效果图，工具有很多，比如PS，FW等。
2、代码实现，即参照效果图用代码写出静态页面，方法也有很多，比较容易用的工具就是DW。
3、实现后台管理，如果你知识需要静态页面即可，那么就把静态页面放一个文件夹内，然后放上相互的连接，如果需要网上可以访问到（即上线），那么你需要一个域名和后台管理。这后面就比较复杂了，看你想怎么经营你的网站。
网页设计的标准有很多，一般比较常见的标准有：
HTML标准，CSS3标准，新出现的HTML5标准，一般页面都遵循CSS3标准，
在规划网站目录结构时应遵循从大到小，从整体到细节的原则，也就是你要先规划好大的板块然后才来细分其中的分支，
版面布局一般是从上到下，从左到右
一般页面板块从上到下分别是：top （顶部）head（头部） nav(导航) banner(广告) mysite（我的位置）mian（主体） bottom（底部）copyright（版权）
.
HTML是超文本标记语言缩写即（Hypertext Markup Language)是超文本标记语言
HTML是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。
HTML文档基本机构如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
</body>
</html>
<!DOCTYPE>声明位于文档中的最前面的位置，处于 <html>标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范
html是超文本标记
<head>标签用于申明作者和搜索引擎
meta标签通常用来为搜索引擎robots定义页面主题，或者是定义用户浏览器上的cookie
<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312">
表示本文件是HTML格式，使用GB2312编码，当你是UTF8或者BIG5的时候按照这个写就行
<link rel="stylesheet" type="text/css" href="style.css">
表示引入一个style.css文件
<META>不影响页面效果，只有是搜索引擎要认一下
