css3濾鏡-模糊Blur濾鏡
阿新 • • 發佈：2019-01-17
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>模糊濾鏡</title>
<style type="text/css">
.div2{
}
</style>
</head>
<body>
<h1>模糊(Blur)濾鏡應用於圖片</h1>
<ul>其相關引數包括:
<li>1.enabled:設定濾鏡是否啟用</li>
<li>2.add:指定圖片是否改編成模糊效果，布林值，預設為true，表示應用模糊效果</li>
<li>3.direction：設定模糊方向，按照順時針方向起作用，取值範圍0-360度，45度為一個間隔，共有8個方向值，</li>
<li>4.strength：指定模糊半徑的大小，單位是畫素，預設值為5，取值範圍為自然數。</li>
</ul>
<ul>相關例項：
原始圖：<img src="img/11.jpg" alt="圖片" title="圖片" style="width:200px;height:160px;">
add=true:<img src="img/11.jpg" style="width:200px;height:160px;filter:blur(add=true,direction=225,strength=20);-webkit-filter:blur(2px);-moz-filter:blur(2px); ">
add=false:<img src="img/11.jpg" style="width:200px;height:160px;filter:blur(add=false,direction=225,strength=20);"/>
</ul>
<h1>應用於文字</h1>
<div class="div2">
<p style="font-size:20px;color:blue;
-webkit-filter: blur(2px);
-moz-filter: blur(2px);
-o-filter: blur(2px);
-ms-filter: blur(2px);filter:blur(2px);">Blur濾鏡</p>
</div>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>模糊濾鏡</title>
<style type="text/css">
.div2{
}
</style>
</head>
<body>
<h1>模糊(Blur)濾鏡應用於圖片</h1>
<ul>其相關引數包括:
<li>1.enabled:設定濾鏡是否啟用</li>
<li>2.add:指定圖片是否改編成模糊效果，布林值，預設為true，表示應用模糊效果</li>
<li>3.direction：設定模糊方向，按照順時針方向起作用，取值範圍0-360度，45度為一個間隔，共有8個方向值，</li>
<li>4.strength：指定模糊半徑的大小，單位是畫素，預設值為5，取值範圍為自然數。</li>
</ul>
<ul>相關例項：
原始圖：<img src="img/11.jpg" alt="圖片" title="圖片" style="width:200px;height:160px;">
add=true:<img src="img/11.jpg" style="width:200px;height:160px;filter:blur(add=true,direction=225,strength=20);-webkit-filter:blur(2px);-moz-filter:blur(2px); ">
add=false:<img src="img/11.jpg" style="width:200px;height:160px;filter:blur(add=false,direction=225,strength=20);"/>
</ul>
<h1>應用於文字</h1>
<div class="div2">
<p style="font-size:20px;color:blue;
-webkit-filter: blur(2px);
-moz-filter: blur(2px);
-o-filter: blur(2px);
-ms-filter: blur(2px);filter:blur(2px);">Blur濾鏡</p>
</div>
</body>
</html>