直播电商平台开发，CSS 3之模糊与透明色背景

1.模糊

blue 滤镜能实现页面模糊效果，即在一个方向上的运动模糊；

语法格式如下所示：

1	`<br>blue(radius)`

radius 参数表示接单单个参数半径，该参数半径以长度形式保存模糊半径；

例子 1：

<br><!DOCTYPE html><br><html><br><head><br><meta charset="utf-8"><br><title>模糊</title><br><style type="text/css"><br>img{<br>height:350px;<br>width: 450px;<br>}<br></style><br></head><br><body><br><div class="e"><br><p style="font-size: 30px;font-weight: bold;color: blue;">Blur 滤镜效果图</p><br></div><br>原图<img src="img/1.jpg" ><br>模糊1<img src="img/1.jpg" style="filter: blur(11px);"><br><br>模糊2<img src="img/1.jpg" style="filter: blur(6px);"><br></body><br></html>

2. 透明色背景

例子2：

<br><!DOCTYPE html><br><html><br><head><br><meta charset="utf-8"><br><title>Chroma滤镜</title><br><style><br>div{<br>width: 550px;<br>height: 550px;<br>line-height: 35px;<br>text-align: center;<br>margin: 0 auto;<br>}<br>.d1{<br>background: rgb(220, 38, 38, 1);<br>}<br>.d2{<br>background: rgb(220, 38, 38, 0.7);/* 或使用rgba */<br>} <br>p{<br>font-size: 30pt;<br>font-weight: bold;<br>}<br></style><br></head><br><body><br><div><br><p class="d1">未使用透明色背景效果前</p><br><p class="d2">使用透明色背景效果后</p><br></div><br></body><br></html>