前端学习笔记4：用户界面应用——appearance属性和filter属性

这一块单独讲是本博主觉得界面美观是很重要的一部分，前端是实现与客户交互的，如何让客户用起来比较舒服也是重要的一个环节。

一、appearance属性

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

none:不使用任何界面外观效果
button:将元素设置成按钮的外观效果
checkbox:将元素设置成复选框的外观效果
push-button:将按钮设置成push按钮的外观效果
radio:将元素设置成单选钮的外观效果
searchfield:将元素设置成输入框的外观效果
searchfield-cancel-button:将元素设置成输入框内取消按钮的外观效果
slider-horizontal:将元素设置成水平拖动条的外观效果
slider-vertical:将元素设置成垂直拖动条的外观效果
sliderhumb-horizontal:将元素设置成水平拖动条的滑块的外观效果
sliderhumb-vertical:将元素设置成垂直拖动条的滑块的外观效果
square-button:将按钮设置成square按钮的外观

<script>	
function change(val){
		//var target = document.getElementById("target");
		//target.style.webkitAppearance = val;
		//target.style.appearance = val;
		//target.style.MozAppearance = val;
		$("#target").css("appearance",val);
		$("#target").css("webkitAppearance",val);
		$("#target").css("MozAppearance",val);
	}
</script>
	<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);">radio</button>
    </body>

二、filter属性

filter属性可以提供一些特殊的视觉效果

blur（Npx）：设置模糊滤镜。指定的模糊半径越大，模糊度越高。

brightness（百分比）:设置高亮滤镜。

contrast(百分比):设置对比度滤镜。

drop-shadow（xoffset，yoffset,radius,color):设置阴影滤镜。

graycale（百分比):设置灰度滤镜。

hue-rotate(Ndeg)：设置色调旋转滤镜。

invert（百分比）：设置色彩反转滤镜。

opacity（百分比）：设置透明度滤镜。

saturate（百分比）：设置饱和度滤镜。

sepia（百分比）：设置褐色滤镜。

<body>	
<div style="display:flex;text-align:center;"> 
		<figure>
			<img src="../第一天/1.jpg" alt="1" />
			<figcaption>原始图片 </figcaption>
		</figure>
		<figure id="t">
			<img src="../第一天/1.jpg" alt="1" />
			<figcaption>滤镜效果</figcaption>
		</figure>
	</div>
	blur:<input type="range" min="0" max="20" value="0" 
	onchange="change('blur',this.value,'px')"/>

	brightness:<input type="range" min="0" max="300" value="100" 
	onchange="change('brightness',this.value,'%')"
	 />
	contrast:<input type="range" min="0" max="300" value="100" 
	onchange="change('contrast',this.value,'%')"//>
	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))';"/>
	grayscale:<input type="range" min="0" max="300" value="0" 
	onchange="document.getElementById('t').style.filter = 'grayscale('+ this.value +'%)';" />
	hue-rotate:<input type="range" min="0" max="300" value="0" 
	onchange="change('hue-rotate',this.value,'deg')"
	/>
	invert:<input type="range" min="0" max="300" value="0" 
	onchange="change('invert',this.value,'%')"/>
	opacity:<input type="range" min="0" max="300" value="100" 
		onchange="change('opacity',this.value,'%')" />
	saturate:<input type="range" min="0" max="300" value="100" 
	onchange="change('saturate',this.value,'%')"/>
	sepia:<input type="range" min="0" max="300" value="0" 
	onchange="change('sepia',this.value,'%')" />
</body>
<script>
	function change(val){
		//var target = document.getElementById("target");
		//target.style.webkitAppearance = val;
		//target.style.appearance = val;
		//target.style.MozAppearance = val;
		$("#target").css("appearance",val);
		$("#target").css("webkitAppearance",val);
		$("#target").css("MozAppearance",val);
	}
</script>

前端学习笔记4：用户界面应用——appearance属性和filter属性

猜你喜欢