DIV+CSS中的滤镜和模糊在div＋css中，经常会⽤到div和span
当内容⽐较多的时候，会⽤到div
当内容⽐较少的时候，会⽤到span
来看下⾯的代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>DIV+CSS</title>
</head>
<body>
<span >栏⽬⼀</span><br>
<span >栏⽬⼆</span><br>
<span >栏⽬三</span><br>
<span >栏⽬四</span><br>
<span >栏⽬五</span><br>
</body>
</html>
执⾏后的效果如下：
在这⾥设置了字体的粗细．
设置段落字体的粗细的属性：fontweight属性bold
font-weigth属性设置⽂本的粗细．
使⽤bold关键字可以将⽂本设置为粗体．
关键字100~900为字体指定了９级加粗度，如果⼀个字体内置了这些加粗级别，那么这些数字就直接映射到预定义的级别．如果将元素的加粗设置为bolder，浏览器会设置⽐所继承值更粗的⼀个字体加粗．
与此相反，关键词lighter会导致浏览器将加粗度下移⽽不是上移．
p.thick{font-weight:bold;}
p.thicker{font-weight:900}
看到上⾯的代码，是不是感觉很low.
假如现在想把上⾯的五⾏字都换成跟第⼀⾏字的效果⼀样，有什么好的办法呢？？？
来看下⾯的这段代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>DIV+CSS</title>
<style type="text/css">
.style1{
color:green;
font-size:30px;
}
</style>
</head>
<body>
<span class="style1">栏⽬⼀</span><br>
<span class="style1">栏⽬⼆</span><br>
<span class="style1">栏⽬三</span><br>
<span class="style1">栏⽬四</span><br>
<span class="style1">栏⽬五</span><br>
</body>
</html>
刷新浏览器，效果如下：
这样想⼀次性修改五⾏的样式的话，就可以相接修改style⾥⾯的代码就可以了．
⽐如，现在想把五⾏的字体都变成斜体的话，就可以加上下⾯的属性就可以了．
font-style:italic;
修改后的代码如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>DIV+CSS</title>
<style type="text/css">
.style1{
color:green;
font-size:30px;
font-style:italic;
}
</style>
</head>
<body>
<span class="style1">栏⽬⼀</span><br>
<span class="style1">栏⽬⼆</span><br>
<span class="style1">栏⽬三</span><br>
<span class="style1">栏⽬四</span><br>
<span class="style1">栏⽬五</span><br>
</body>
</html>
刷新浏览器后得到的效果如下：
可以看到css可以统⼀⽹站的风格．
现在想把⼀个⽹站的所有图⽚都为成⿊⽩⾊或者模糊，这个要怎么实现呢？？
代码如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>CSS的滤镜效果</title>
<style type="text/css">
a:link img {filter: grayscale(100%);}
a:hover img {filter: grayscale(10%);}
</style>
</head>
<body>
<a href="#"><img width="200px" src="1.jpg"></a>
<a href="#"><img width="200px" src="2.jpg"></a>
<a href="#"><img width="200px" src="1.jpg"></a>
<a href="#"><img width="200px" src="2.jpg"></a>
</body>
</html>
当图⽚正常显⽰，⿏标没有放在图⽚上的时候，图⽚显⽰的是灰⾊的；
当⿏标放置在图⽚上的时候，图⽚就变成正常颜⾊的了．现在把⿏标放在第⼀张图⽚上，显⽰的效果如下：
再把⿏标移动到第四张图⽚上，显⽰的效果如下：
这就是滤镜的效果．
再来看看使⽤css达到图⽚模糊的效果．
代码如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>CSS的滤镜效果</title>
<style type="text/css">
a:link img {filter:blur(10px);}
a:hover img {filter:blur(0px);}
</style>
</head>
<body>
<a href="#"><img width="200px" src="1.jpg"></a>
<a href="#"><img width="200px" src="2.jpg"></a>
<a href="#"><img width="200px" src="1.jpg"></a>
<a href="#"><img width="200px" src="2.jpg"></a>
</body>
</html>
现在图⽚正常显⽰，⿏标暂时没有放置到任何⼀张图⽚上，效果如下：
把⿏标放在第⼀张图⽚上，显⽰的效果如下:
再把⿏标放在第四张图⽚上，显⽰的效果如下:
这就达到想要的图⽚模糊的效果了.

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。