三分钟带你看完CSS3新增的用户界面和滤镜属性

快来打我* 2022-03-20 07:50 163阅读 0赞

CSS3提供了一些用户界面、滤镜相关属性，通过这些属性可以更便捷地实现某些特殊的用户界面。

# 1.appearance属性 #

appearance属性允许将HTML元素设置成使元素看上去像标准的用户界面元素。该元素支持如下属性。

<table> 
 <thead> 
  <tr> 
   <th>appearance属性值</th> 
   <th style="width:314px;">描述</th> 
   <th style="width:71px;">Chrome</th> 
   <th style="width:64px;">Safari</th> 
   <th style="width:85px;">iOS Safari</th> 
   <th style="width:136px;"> <p>Android&nbsp; Browser</p> </th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>none</td> 
   <td style="width:314px;">不使用任何界面外观效果(常用于IOS下移除原生样式)</td> 
   <td style="width:71px;">支持</td> 
   <td style="width:64px;">支持</td> 
   <td style="width:85px;">支持</td> 
   <td style="width:136px;">支持</td> 
  </tr> 
  <tr> 
   <td>button</td> 
   <td style="width:314px;">将元素设置成按钮的外观效果</td> 
   <td style="width:71px;">支持</td> 
   <td style="width:64px;">支持</td> 
   <td style="width:85px;">支持</td> 
   <td style="width:136px;">支持</td> 
  </tr> 
  <tr> 
   <td>button-bevel</td> 
   <td style="width:314px;">渲染成button-bevel的风格</td> 
   <td style="width:71px;">支持</td> 
   <td style="width:64px;">支持</td> 
   <td style="width:85px;">不支持</td> 
   <td style="width:136px;">不支持</td> 
  </tr> 
  <tr> 
   <td>caret</td> 
   <td style="width:314px;">渲染成caret的风格</td> 
   <td style="width:71px;">支持</td> 
   <td style="width:64px;">支持</td> 
   <td style="width:85px;">不支持</td> 
   <td style="width:136px;">不支持</td> 
  </tr> 
  <tr> 
   <td>checkbox</td> 
   <td style="width:314px;">将元素设置成复选框的外观效果</td> 
   <td style="width:71px;">支持</td> 
   <td style="width:64px;">支持</td> 
   <td style="width:85px;">支持</td> 
   <td style="width:136px;">支持</td> 
  </tr> 
  <tr> 
   <td>listbox</td> 
   <td style="width:314px;">渲染为listbox样式的复选框按钮</td> 
   <td style="width:71px;">支持</td> 
   <td style="width:64px;">支持</td> 
   <td style="width:85px;">支持</td> 
   <td style="width:136px;">支持</td> 
  </tr> 
  <tr> 
   <td>listitem</td> 
   <td style="width:314px;">渲染成listitem的风格</td> 
   <td style="width:71px;">支持</td> 
   <td style="width:64px;">支持</td> 
   <td style="width:85px;">不支持</td> 
   <td style="width:136px;">不支持</td> 
  </tr> 
  <tr> 
   <td>media-fullscreen-button</td> 
   <td style="width:314px;">渲染成media-fullscreen-button的风格</td> 
   <td style="width:71px;">不支持</td> 
   <td style="width:64px;">不支持</td> 
   <td style="width:85px;">不支持</td> 
   <td style="width:136px;">不支持</td> 
  </tr> 
  <tr> 
   <td>media-mute-button</td> 
   <td style="width:314px;">渲染成media-mute-button的风格</td> 
   <td style="width:71px;">支持</td> 
   <td style="width:64px;">支持</td> 
   <td style="width:85px;">不支持</td> 
   <td style="width:136px;">不支持</td> 
  </tr> 
  <tr> 
   <td>media-seek-back-button</td> 
   <td style="width:314px;">渲染成media-seek-back-button的风格</td> 
   <td style="width:71px;">不支持</td> 
   <td style="width:64px;">支持</td> 
   <td style="width:85px;">不支持</td> 
   <td style="width:136px;">不支持</td> 
  </tr> 
  <tr> 
   <td>media-seek-forward-button</td> 
   <td style="width:314px;">渲染成media-seek-forward-button的风格</td> 
   <td style="width:71px;">不支持</td> 
   <td style="width:64px;">支持</td> 
   <td style="width:85px;">不支持</td> 
   <td style="width:136px;">不支持</td> 
  </tr> 
  <tr> 
   <td>media-slider</td> 
   <td style="width:314px;">渲染成media-slider的风格</td> 
   <td style="width:71px;">支持</td> 
   <td style="width:64px;">支持</td> 
   <td style="width:85px;">不支持</td> 
   <td style="width:136px;">不支持</td> 
  </tr> 
  <tr> 
   <td>media-sliderthumb</td> 
   <td style="width:314px;">渲染成media-sliderthumb的风格</td> 
   <td style="width:71px;">支持</td> 
   <td style="width:64px;">支持</td> 
   <td style="width:85px;">不支持</td> 
   <td style="width:136px;">不支持</td> 
  </tr> 
  <tr> 
   <td>menulist</td> 
   <td style="width:314px;">渲染成menulist的风格</td> 
   <td style="width:71px;">支持</td> 
   <td style="width:64px;">支持</td> 
   <td style="width:85px;">不支持</td> 
   <td style="width:136px;">不支持</td> 
  </tr> 
  <tr> 
   <td>menulist-button</td> 
   <td style="width:314px;">渲染成menulist-button的风格</td> 
   <td style="width:71px;">支持</td> 
   <td style="width:64px;">支持</td> 
   <td style="width:85px;">支持</td> 
   <td style="width:136px;">不支持</td> 
  </tr> 
  <tr> 
   <td>menulist-text</td> 
   <td style="width:314px;">渲染成menulist-text的风格</td> 
   <td style="width:71px;">支持</td> 
   <td style="width:64px;">支持</td> 
   <td style="width:85px;">不支持</td> 
   <td style="width:136px;">不支持</td> 
  </tr> 
  <tr> 
   <td>menulist-textfield</td> 
   <td style="width:314px;">渲染成menulist-textfield的风格</td> 
   <td style="width:71px;">支持</td> 
   <td style="width:64px;">支持</td> 
   <td style="width:85px;">不支持</td> 
   <td style="width:136px;">不支持</td> 
  </tr> 
  <tr> 
   <td>push-button</td> 
   <td style="width:314px;">将元素设置成单选钮的外观效果</td> 
   <td style="width:71px;">支持</td> 
   <td style="width:64px;">支持</td> 
   <td style="width:85px;">支持</td> 
   <td style="width:136px;">支持</td> 
  </tr> 
  <tr> 
   <td>radio</td> 
   <td style="width:314px;">渲染成radio的风格</td> 
   <td style="width:71px;">支持</td> 
   <td style="width:64px;">支持</td> 
   <td style="width:85px;">支持</td> 
   <td style="width:136px;">支持</td> 
  </tr> 
  <tr> 
   <td>searchfield</td> 
   <td style="width:314px;">将元素设置输入框的外观效果</td> 
   <td style="width:71px;">支持</td> 
   <td style="width:64px;">支持</td> 
   <td style="width:85px;">不支持</td> 
   <td style="width:136px;">支持</td> 
  </tr> 
  <tr> 
   <td>searchfield-cancel-button</td> 
   <td style="width:314px;">将元素设置成输入框内取消按钮的外观效果</td> 
   <td style="width:71px;">支持</td> 
   <td style="width:64px;">支持</td> 
   <td style="width:85px;">不支持</td> 
   <td style="width:136px;">支持</td> 
  </tr> 
  <tr> 
   <td>searchfield-decoration</td> 
   <td style="width:314px;">渲染成searchfield-decoration的风格</td> 
   <td style="width:71px;">支持</td> 
   <td style="width:64px;">支持</td> 
   <td style="width:85px;">不支持</td> 
   <td style="width:136px;">不支持</td> 
  </tr> 
  <tr> 
   <td>searchfield-results-button</td> 
   <td style="width:314px;">渲染成searchfield-results-button的风格</td> 
   <td style="width:71px;">不支持</td> 
   <td style="width:64px;">支持</td> 
   <td style="width:85px;">不支持</td> 
   <td style="width:136px;">不支持</td> 
  </tr> 
  <tr> 
   <td>searchfield-results-decoration</td> 
   <td style="width:314px;">渲染成searchfield-results-decoration的风格</td> 
   <td style="width:71px;">不支持</td> 
   <td style="width:64px;">支持</td> 
   <td style="width:85px;">不支持</td> 
   <td style="width:136px;">不支持</td> 
  </tr> 
  <tr> 
   <td>slider-horizontal</td> 
   <td style="width:314px;">将元素设置成水平拖动条的外观效果</td> 
   <td style="width:71px;">支持</td> 
   <td style="width:64px;">支持</td> 
   <td style="width:85px;">支持</td> 
   <td style="width:136px;">支持</td> 
  </tr> 
  <tr> 
   <td>slider-vertical</td> 
   <td style="width:314px;">将元素设置成垂直拖动条的外观效果</td> 
   <td style="width:71px;">支持</td> 
   <td style="width:64px;">支持</td> 
   <td style="width:85px;">支持</td> 
   <td style="width:136px;">支持</td> 
  </tr> 
  <tr> 
   <td>sliderthumb-horizontal</td> 
   <td style="width:314px;">将元素设置成水平拖动条的滑块的外观效果</td> 
   <td style="width:71px;">支持</td> 
   <td style="width:64px;">支持</td> 
   <td style="width:85px;">支持</td> 
   <td style="width:136px;">支持</td> 
  </tr> 
  <tr> 
   <td>sliderthumb-vertical</td> 
   <td style="width:314px;">将元素设置成垂直拖动条的滑块的外观效果</td> 
   <td style="width:71px;">支持</td> 
   <td style="width:64px;">支持</td> 
   <td style="width:85px;">支持</td> 
   <td style="width:136px;">支持</td> 
  </tr> 
  <tr> 
   <td>square-button</td> 
   <td style="width:314px;">将元素设置成square按钮的外观效果</td> 
   <td style="width:71px;">支持</td> 
   <td style="width:64px;">支持</td> 
   <td style="width:85px;">支持</td> 
   <td style="width:136px;">支持</td> 
  </tr> 
  <tr> 
   <td>textarea</td> 
   <td style="width:314px;">渲染成textarea的风格</td> 
   <td style="width:71px;">支持</td> 
   <td style="width:64px;">支持</td> 
   <td style="width:85px;">不支持</td> 
   <td style="width:136px;">支持</td> 
  </tr> 
  <tr> 
   <td>textfield</td> 
   <td style="width:314px;">渲染成textfield的风格</td> 
   <td style="width:71px;">支持</td> 
   <td style="width:64px;">支持</td> 
   <td style="width:85px;">不支持</td> 
   <td style="width:136px;">支持</td> 
  </tr> 
  <tr> 
   <td>scrollbarbutton-down</td> 
   <td style="width:314px;">渲染成scrollbarbutton-down的风格</td> 
   <td style="width:71px;">不支持</td> 
   <td style="width:64px;">不支持</td> 
   <td style="width:85px;">不支持</td> 
   <td style="width:136px;">不支持</td> 
  </tr> 
  <tr> 
   <td>scrollbarbutton-left</td> 
   <td style="width:314px;">渲染成scrollbarbutton-left的风格</td> 
   <td style="width:71px;">不支持</td> 
   <td style="width:64px;">不支持</td> 
   <td style="width:85px;">不支持</td> 
   <td style="width:136px;">不支持</td> 
  </tr> 
  <tr> 
   <td>scrollbarbutton-right</td> 
   <td style="width:314px;">渲染成scrollbarbutton-right的风格</td> 
   <td style="width:71px;">不支持</td> 
   <td style="width:64px;">不支持</td> 
   <td style="width:85px;">不支持</td> 
   <td style="width:136px;">不支持</td> 
  </tr> 
  <tr> 
   <td>scrollbargripper-horizontal</td> 
   <td style="width:314px;">渲染成scrollbargripper-horizontal的风格</td> 
   <td style="width:71px;">不支持</td> 
   <td style="width:64px;">不支持</td> 
   <td style="width:85px;">不支持</td> 
   <td style="width:136px;">不支持</td> 
  </tr> 
  <tr> 
   <td>scrollbargripper-vertical</td> 
   <td style="width:314px;">渲染成scrollbargripper-vertical的风格</td> 
   <td style="width:71px;">不支持</td> 
   <td style="width:64px;">不支持</td> 
   <td style="width:85px;">不支持</td> 
   <td style="width:136px;">不支持</td> 
  </tr> 
  <tr> 
   <td>scrollbarthumb-horizontal</td> 
   <td style="width:314px;">渲染成scrollbarthumb-horizontal的风格</td> 
   <td style="width:71px;">不支持</td> 
   <td style="width:64px;">不支持</td> 
   <td style="width:85px;">不支持</td> 
   <td style="width:136px;">不支持</td> 
  </tr> 
  <tr> 
   <td>scrollbarthumb-vertical</td> 
   <td style="width:314px;">渲染成scrollbarthumb-vertical的风格</td> 
   <td style="width:71px;">不支持</td> 
   <td style="width:64px;">不支持</td> 
   <td style="width:85px;">不支持</td> 
   <td style="width:136px;">不支持</td> 
  </tr> 
  <tr> 
   <td>scrollbartrack-horizontal</td> 
   <td style="width:314px;">渲染成scrollbartrack-horizontal的风格</td> 
   <td style="width:71px;">不支持</td> 
   <td style="width:64px;">不支持</td> 
   <td style="width:85px;">不支持</td> 
   <td style="width:136px;">不支持</td> 
  </tr> 
  <tr> 
   <td>scrollbartrack-vertical</td> 
   <td style="width:314px;">渲染成scrollbartrack-horizontal的风格</td> 
   <td style="width:71px;">不支持</td> 
   <td style="width:64px;">不支持</td> 
   <td style="width:85px;">不支持</td> 
   <td style="width:136px;">不支持</td> 
  </tr> 
 </tbody> 
</table>

虽然appearance属性用起来非常便捷，但还未得到广泛的浏览器支持。如果在火狐浏览器中使用需要添加-moz-前缀，如果在谷歌、苹果浏览器等需要添加-webkit-前缀。下面代码示范了appearance属性的功能。

<!DOCTYPE html>
    <html>
    <head>
    	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    	<title> appearance测试 </title>
    	<style type="text/css">
    	div
    	{
    		appearance:none;
    		-moz-appearance:button; /* Firefox */
    		-webkit-appearance:button; /* Safari 、Opera和 Chrome */
    		width: 200px;
    		height: 40px;
    		text-align:center;
    	}
    	</style>
    </head>
    <body>
    <div id="target"></div><p>
    <button onclick="change(this.innerHTML);">none</button>
    <button onclick="change(this.innerHTML);">button</button>
    <button onclick="change(this.innerHTML);">checkbox</button>
    <button onclick="change(this.innerHTML);">push-button</button>
    <button onclick="change(this.innerHTML);">radio</button>
    <button onclick="change(this.innerHTML);">searchfield</button>
    <button onclick="change(this.innerHTML);">searchfield-cancel-button</button>
    <button onclick="change(this.innerHTML);">slider-horizontal</button>
    <button onclick="change(this.innerHTML);">slider-vertical</button>
    <button onclick="change(this.innerHTML);">sliderthumb-horizontal</button>
    <button onclick="change(this.innerHTML);">sliderthumb-vertical</button>
    <button onclick="change(this.innerHTML);">square-button</button>
    <script type="text/javascript">
    	function change(val){
    		var target = document.getElementById("target");
    		target.style.appearance = val;
    		target.style.webkitAppearance = val;
    		target.style.MozAppearance = val;
    	}
    </script>
    </body>
    </html>

**效果图：**

![20190211204911186.png][]

# 2.使用filter属性应用滤镜 #

filter 属性定义了元素(通常是<img>)的可视效果(例如：模糊与饱和度)。

**浏览器支持：**

<table> 
 <tbody> 
  <tr> 
   <th>属性</th> 
   <th><img alt="" src="https://img.php.cn/upload/study/000/000/005/5c1b2e36deb6b882.png"></th> 
   <th><img alt="" src="https://img.php.cn/upload/study/000/000/005/5c1b2e6204949924.png"></th> 
   <th><img alt="" src="https://img.php.cn/upload/study/000/000/005/5c1b2e717ab31518.png"></th> 
   <th><img alt="" src="https://img.php.cn/upload/study/000/000/005/5c1b2e7d1c68a591.png"></th> 
   <th><img alt="" src="https://img.php.cn/upload/study/000/000/005/5c1b2e87a001d318.png"></th> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;">filter</td> 
   <td style="vertical-align:top;"> <p>不支持</p> </td> 
   <td style="vertical-align:top;">18.0 -webkit-</td> 
   <td style="vertical-align:top;">35.0</td> 
   <td style="vertical-align:top;">&nbsp;6.0 -webkit-</td> 
   <td style="vertical-align:top;">15.0&nbsp;-webkit-</td> 
  </tr> 
 </tbody> 
</table>

**filter函数**

**注意:** 滤镜通常使用百分比 (如：75%), 当然也可以使用小数来表示 (如：0.75)。

<table> 
 <tbody> 
  <tr> 
   <th>filter</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td>none</td> 
   <td>默认值，没有效果。</td> 
  </tr> 
  <tr> 
   <td>blur(<em>px</em>)</td> 
   <td>给图像设置高斯模糊。"radius"一值设定高斯函数的标准差，或者是屏幕上以多少像素融在一起， 所以值越大越模糊；如果没有设定值，则默认是0；这个参数可设置css长度值，但不接受百分比值。</td> 
  </tr> 
  <tr> 
   <td>brightness(<em>%</em>)</td> 
   <td>给图片应用一种线性乘法，使其看起来更亮或更暗。如果值是0%，图像会全黑。值是100%，则图像无变化。其他的值对应线性乘数效果。值超过100%也是可以的，图像会比原来更亮。如果没有设定值，默认是1。</td> 
  </tr> 
  <tr> 
   <td>contrast(<em>%</em>)</td> 
   <td>调整图像的对比度。值是0%的话，图像会全黑。值是100%，图像不变。值可以超过100%，意味着会运用更低的对比。若没有设置值，默认是1。</td> 
  </tr> 
  <tr> 
   <td>drop-shadow(h-shadow v-shadow blur spread color)</td> 
   <td> <p>给图像设置一个阴影效果。阴影是合成在图像下面，可以有模糊度的，可以以特定颜色画出的遮罩图的偏移版本。 函数接受&lt;shadow&gt;(在CSS3背景中定义)类型的值，除了"inset"关键字是不允许的。该函数与已有的box-shadow box-shadow属性很相似；不同之处在于，通过滤镜，一些浏览器为了更好的性能会提供硬件加速。<code>&lt;shadow&gt;参数如下：</code></p> 
    <ul> 
     <li><code><strong>&lt;offset-x&gt;</strong>&nbsp;<strong>&lt;offset-y&gt;</strong>&nbsp;(必须)</code></li> 
     <li><code>这是设置阴影偏移量的两个 &lt;length&gt;值.&nbsp;<strong>&lt;offset-x&gt;</strong>&nbsp;设定水平方向距离. 负值会使阴影出现在元素左边.&nbsp;<strong>&lt;offset-y&gt;</strong>设定垂直距离.负值会使阴影出现在元素上方。查看<strong>&lt;length&gt;</strong>可能的单位.<br><strong>如果两个值都是0</strong>, 则阴影出现在元素正后面 (如果设置了&nbsp;<code>&lt;blur-radius&gt;&nbsp;and/or&nbsp;<code>&lt;spread-radius&gt;，会有模糊效果).</code></code></code></li> 
     <li><code><strong>&lt;blur-radius&gt;</strong>&nbsp;(可选)</code></li> 
     <li><code>这是第三个code&gt;&lt;length&gt;值. 值越大，越模糊，则阴影会变得更大更淡.不允许负值 若未设定，默认是0&nbsp;(则阴影的边界很锐利).</code></li> 
     <li><code><strong>&lt;spread-radius&gt;</strong>&nbsp;(可选)</code></li> 
     <li><code>这是第四个 &lt;length&gt;值. 正值会使阴影扩张和变大，负值会是阴影缩小.若未设定，默认是0&nbsp;(阴影会与元素一样大小).&nbsp;<br> 注意: Webkit, 以及一些其他浏览器 不支持第四个长度，如果加了也不会渲染。</code></li> 
     <li><code>&nbsp;</code></li> 
     <li><code><strong>&lt;color&gt;</strong>&nbsp;(可选)</code></li> 
     <li><code>查看 &lt;color&gt;该值可能的关键字和标记。若未设定，颜色值基于浏览器。在Gecko&nbsp;(Firefox), Presto (Opera)和Trident (Internet Explorer)中， 会应用color<strong>color</strong>属性的值。另外, 如果颜色值省略，WebKit中阴影是透明的。</code></li> 
    </ul></td> 
  </tr> 
  <tr> 
   <td>grayscale(<em>%</em>)</td> 
   <td> <p>将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0；</p> </td> 
  </tr> 
  <tr> 
   <td>hue-rotate(<em>deg</em>)</td> 
   <td> <p>给图像应用色相旋转。"angle"一值设定图像会被调整的色环角度值。值为0deg，则图像无变化。若值未设置，默认值是0deg。该值虽然没有最大值，超过360deg的值相当于又绕一圈。</p> </td> 
  </tr> 
  <tr> 
   <td>invert(<em>%</em>)</td> 
   <td> <p>反转输入图像。值定义转换的比例。100%的价值是完全反转。值为0%则图像无变化。值在0%和100%之间，则是效果的线性乘子。 若值未设置，值默认是0。</p> </td> 
  </tr> 
  <tr> 
   <td>opacity(<em>%</em>)</td> 
   <td> <p>转化图像的透明程度。值定义转换的比例。值为0%则是完全透明，值为100%则图像无变化。值在0%和100%之间，则是效果的线性乘子，也相当于图像样本乘以数量。 若值未设置，值默认是1。该函数与已有的opacity属性很相似，不同之处在于通过filter，一些浏览器为了提升性能会提供硬件加速。</p> </td> 
  </tr> 
  <tr> 
   <td>saturate(<em>%</em>)</td> 
   <td> <p>转换图像饱和度。值定义转换的比例。值为0%则是完全不饱和，值为100%则图像无变化。其他值，则是效果的线性乘子。超过100%的值是允许的，则有更高的饱和度。 若值未设置，值默认是1。</p> </td> 
  </tr> 
  <tr> 
   <td>sepia(<em>%</em>)</td> 
   <td> <p>将图像转换为深褐色。值定义转换的比例。值为100%则完全是深褐色的，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0。</p> </td> 
  </tr> 
 </tbody> 
</table>

下面代码示范了使用filter属性应用滤镜的效果。

<!DOCTYPE html>
    <html>
    <head>
    	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    	<title> fiter属性 </title>
    	<style type="text/css">
    		input {
    			width: 520px;
    		}
    	</style>
    </head>
    <body>
    <div style="display:flex;text-align:center">
    	<figure>
    		<img src="java.png" alt="android"/>
    		<figcaption>原始图片</figcaption>
    	</figure>
    	<figure id="t">
    		<img src="java.png" alt="android"/>
    		<figcaption>滤镜效果</figcaption>
    	</figure>
    </div>
    blur:<input type="range" min="0" max="20" value="0" 
    onchange="document.getElementById('t').style.filter = 'blur(' + this.value + 'px)';"/><p>
    brightness:<input type="range" min="0" max="300" value="100" 
    onchange="document.getElementById('t').style.filter = 'brightness(' + this.value + '%)';"/><p>
    contrast:<input type="range" min="0" max="300" value="100" 
    onchange="document.getElementById('t').style.filter = 'contrast(' + this.value + '%)';"/><p>
    drop-shadow:<input type="range" min="0" max="20" value="0" 
    onchange="document.getElementById('t').style.filter = 'drop-shadow(' + this.value + 
    	'px ' + this.value + 'px 1px rgba(255,0,0,0.5))';"/><p>
    grayscale:<input type="range" min="0" max="100" value="0" 
    onchange="document.getElementById('t').style.filter = 'grayscale(' + this.value + '%)';"/><p>
    hue-rotate:<input type="range" min="0" max="360" value="0" 
    onchange="document.getElementById('t').style.filter = 'hue-rotate(' + this.value + 'deg)';"/><p>
    invert:<input type="range" min="0" max="100" value="0" 
    onchange="document.getElementById('t').style.filter = 'invert(' + this.value + '%)';"/><p>
    opacity:<input type="range" min="0" max="100" value="100" 
    onchange="document.getElementById('t').style.filter = 'opacity(' + this.value + '%)';"/><p>
    saturate:<input type="range" min="0" max="300" value="100" 
    onchange="document.getElementById('t').style.filter = 'saturate(' + this.value + '%)';"/><p>
    sepia:<input type="range" min="0" max="100" value="0" 
    onchange="document.getElementById('t').style.filter = 'sepia(' + this.value + '%)';"/><p>
    </body>
    </html>

**效果图：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1amluXw_size_16_color_FFFFFF_t_70][]

上面代码定义的两张图片，开始加载时都没有任何滤镜效果的，因此完成相同。定义了10个拖动条，分别是10种滤镜的参数值，比如拖动blur滤镜的拖动条，将可以看到第二张图片的模糊的不断的在增加，效果如下。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1amluXw_size_16_color_FFFFFF_t_70 1][]

拖动代表brightness滤镜，将可以看到第二张图片的亮度在不断的改变，效果如下。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1amluXw_size_16_color_FFFFFF_t_70 2][]

拖动代表contrast 滤镜，将可以看到第二张图片的对比度在不断的改变，随着对比度的不断降低，第二张图片将会越来越看不清，效果如下。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1amluXw_size_16_color_FFFFFF_t_70 3][]

上面还有几种滤镜，大家可以根据demo自己去试滤镜对应的拖动条来观察滤镜的的效果。

\------------如果大家喜欢[湮顾千古][Link 1]的博客，可以点击左上角的关注哦。

[20190211204911186.png]: /images/20220320/88f074108b4241eca4b6dfbcbfe0940a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1amluXw_size_16_color_FFFFFF_t_70]: /images/20220320/50c96caca33b4942bea2cdacc66bc1bb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1amluXw_size_16_color_FFFFFF_t_70 1]: /images/20220320/4b50b75790524282a224ac5d619b938e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1amluXw_size_16_color_FFFFFF_t_70 2]: /images/20220320/2f2d8013897c4f8cba4912554fe7a795.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1amluXw_size_16_color_FFFFFF_t_70 3]: /images/20220320/f438f61d1203402194bf981e7dc651fb.png
[Link 1]: https://blog.csdn.net/sujin_