html 实例源码
实例源码：
源代码：
执行
执行中...
x
1
<!DOCTYPE html>2
<html>3
<head>4
<meta charset="utf-8"> 5
<title>时代Java与您共同学习(NowJava.com)</title> 6
<style>7
img {8
width: 33%;9
height: auto;10
float: left; 11
max-width: 235px;12
}13
14
.blur {-webkit-filter: blur(4px);filter: blur(4px);}15
.brightness {-webkit-filter: brightness(250%);filter: brightness(250%);}16
.contrast {-webkit-filter: contrast(180%);filter: contrast(180%);}17
.grayscale {-webkit-filter: grayscale(100%);filter: grayscale(100%);}18
.huerotate {-webkit-filter: hue-rotate(180deg);filter: hue-rotate(180deg);}19
.invert {-webkit-filter: invert(100%);filter: invert(100%);}20
.opacity {-webkit-filter: opacity(50%);filter: opacity(50%);}21
.saturate {-webkit-filter: saturate(7); filter: saturate(7);}22
.sepia {-webkit-filter: sepia(100%);filter: sepia(100%);}23
.shadow {-webkit-filter: drop-shadow(8px 8px 10px green);filter: drop-shadow(8px 8px 10px green);}24
</style>25
</head>26
<body>27
28
<p><strong>注意:</strong> Internet Explorer <span lang="no-bok">或 Safari 5.1 (及更早版本)</span> 不支持该属性。</p>29
30
<img src="pineapple.jpg" alt="Pineapple" width="300" height="300">31
<img class="blur" src="pineapple.jpg" alt="Pineapple" width="300" height="300">32
<img class="brightness" src="pineapple.jpg" alt="Pineapple" width="300" height="300">33
<img class="contrast" src="pineapple.jpg" alt="Pineapple" width="300" height="300">34
<img class="grayscale" src="pineapple.jpg" alt="Pineapple" width="300" height="300">35
<img class="huerotate" src="pineapple.jpg" alt="Pineapple" width="300" height="300">36
<img class="invert" src="pineapple.jpg" alt="Pineapple" width="300" height="300">37
/**代码未完, 请加载全部代码(NowJava.com).**/执行结果：
本文系作者在时代Java发表，未经许可，不得转载。如有侵权，请联系nowjava@qq.com删除。
编辑于
关注时代Java