CSS濾鏡之Blur濾鏡——模糊

時間 2019-11-11

標籤 css blur 模糊欄目 CSS 简体版

原文原文鏈接

Blur濾鏡比較相似於ps裏面的運動模糊效果。html

語法：spa

{FILTER：blur(add=add,direction=direction,strength=strength)}htm

「ADD」參數是一個布爾判斷「TRUE（默認）」或者「FALSE」。它指定圖片是否被改變成印象派的模糊效果。模糊效果是按順時針的方向進行的，blog

「DIRECTION」參數用來設置模糊的方向。其中0度表明垂直向上，而後每45度爲一個單位。它的默認值是向左的270度。圖片

「STRENGTH「值只能使用整數來指定，她表明有多少像素的寬度將受到模糊影響。默認是5個。it

實例：io

<html>
<head>
<title>blur效果展現：</title>
<style type="text/Css">
.a1{filter:blur(add=ture,direction=135,strength=10);height:450;font-size:72;color:blue;font-weight:bold} //方向135 影響寬度10
.a2{filter:blur(add=ture,direction=45,strength=10);height:450;font-size:72;color:blue;font-weight:bold} //方向45 影響寬度10
.a3{filter:blur(add=ture,direction=135,strength=20);height:450;font-size:72;color:blue;font-weight:bold} //方向135 影響寬度20
</style>
</head>
<body>
<img src=gril.jpg height = 450>
<img src=gril.jpg class="a1"><br>
<img src=gril.jpg class="a2">
<img src=gril.jpg class="a3">
</body>
</html>class

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。