奇妙的 CSS 屬性 MASK詳解_CSS教程_CSS_網頁制作

來源:腳本之家  責任編輯:小易  

一、html標簽.文字格式化.列塊容器字體大小變化想輸入的字字體顏色想輸入的字字體變粗想輸入的字字體變斜想輸入的字字體加下劃線想輸入的字對正中央ㄉ語法內容對正左邊ㄉ語法內容對正右邊ㄉ語法內容字體刪除線想輸入的字字體設置字體名稱">想輸入的字打字機字體想輸入的字上標字想輸入的字下標字想輸入的字水平線換行輸入 想輸入的字想輸入的字超鏈接想鏈接網址">鏈接地的名稱填入email">要顯示的字打這里網絡郵寄標簽貼圖圖形的網址">跑馬燈(循環)想輸入的字外部文件導入格式標簽CSS外部導入格式:直接引用:id{.}javascript-加載外部.js獨立文件:script>二、CSS文字屬性:color:#999999;文字顏色*/font-family:宋體,sans-serif;文字字體*/font-size:9pt;文字大小*/font-style:itelic;文字斜體*/font-variant:small-caps;小字體*/letter-spacing:1pt;字間距離*/line-height:200%;設置行高*/font-weight:bold;文字粗體*/vertical-align:sub;下標字*/vertical-align:super;上標字*/text-decoration:line-through;加刪除線*/text-decoration:overline;加頂線*/text-decoration:underline;加下劃線*/text-decoration:none;刪除鏈接下劃線*/text-transform:capitalize;首字大寫*/text-transform:uppercase;英文大寫*/text-transform:lowercase;英文小寫*/text-align:right;文字右對齊*/text-align:left;文字左對齊*/text-align:center;文字居中對齊*/text-align:justify;文字分散對齊*/vertical-align屬性vertical-align:top;垂直向上對齊*/vertical-align:bottom;垂直向下對齊*/vertical-align:middle;垂直居中對齊*/vertical-align:text-top;文字垂直向上對齊*/vertical-align:text-bottom;文字垂直向下對齊*/三、CSS符號屬性:list-style-type:none;不編號*/list-style-type:decimal;阿拉伯數字*/list-style-type:lower-roman;小寫羅馬數字*/list-style-type:upper-roman;大寫羅馬數字*/list-style-type:lower-alpha;小寫英文字母*/list-style-type:upper-alpha;大寫英文字母*/list-style-type:disc;實心圓形符號*/list-style-type:circle;空心圓形符號*/list-style-type:square;實心方形符號*/list-style-image:url(/dot.gif);圖片式符號*/list-style-position:outside;凸排*/list-style-position:inside;縮進*/四、CSS背景樣式:background-color:#F5E2EC;背景顏色*/background:transparent;透視背景*/background-image:url(/image/bg.gif);背景圖片*/background-attachment:fixed;浮水印固定背景*/background-repeat:repeat;重復排列-網頁默認*/background-repeat:no-repeat;不重復排列*/background-repeat:repeat-x;在x軸重復排列*/background-repeat:repeat-y;在y軸重復排列*/指定背景位置background-position:90%90%;背景圖片x與y軸的位置*/background-position:top;向上對齊*/background-position:buttom;向下對齊*/background-position:left;向左對齊*/background-position:right;向右對齊*/background-position:center;居中對齊*/五、CSS連接屬性:a/*所有超鏈接*/a:link/*超鏈接文字格式*/a:visited/*瀏覽過的鏈接文字格式*/a:active/*按下鏈接的格式*/a:hover/*鼠標轉到鏈接*/鼠標光標樣式:鏈接手指 CURSOR:hand十字體 cursor:crosshair箭頭朝下 cursor:s-resize十字箭頭 cursor:move箭頭朝右 cursor:move加一問號 cursor:help箭頭朝左 cursor:w-resize箭頭朝上 cursor:n-resize箭頭朝右上 cursor:ne-resize箭頭朝左上 cursor:nw-resize文字I型 cursor:text箭頭斜右下 cursor:se-resize箭頭斜左下 cursor:sw-resize漏斗 cursor:wait光標圖案(IE6)p {cursor:url("光標文件名.cur"),text;}六、CSS框線一覽表:border-top:1px solid#6699cc;上框線*/border-bottom:1px solid#6699cc;下框線*/border-left:1px solid#6699cc;左框線*/border-right:1px solid#6699cc;右框線*/以上是建議書寫方式,但也可以使用常規的方式 如下:border-top-color:#369/*設置上框線top顏色*/border-top-width:1px/*設置上框線top寬度*/border-top-style:solid/*設置上框線top樣式*/其他框線樣式solid/*實線框*/dotted/*虛線框*/double/*雙線框*/groove/*立體內凸框*/ridge/*立體浮雕框*/inset/*凹框*/outset/*凸框*/七、CSS表單運用:文字方塊按鈕復選框選擇鈕多行文字方塊<textarea rows="1" name="S1" cols="15"></textarea>下拉式菜單<select size="1" name="D1"><option>選項1選項2</option></select>八、CSS邊界樣式:margin-top:10px;上邊界*/margin-right:10px;右邊界值*/margin-bottom:10px;下邊界值*/margin-left:10px;左邊界值*/九、CSS邊框空白padding-top:10px;上邊框留空白*/padding-right:10px;右邊框留空白*/padding-bottom:10px;下邊框留空白*/padding-left:10px;左邊框留空白*/基本語法規則選擇符任何HTML元素都可以是一個CSS1的選擇符。選擇符僅僅是指向特別樣式的元素。例如,P { text-indent:3em }當中的選擇符是P。類選擇符單一個選擇符能有不同的CLASS(類),因而允許同一元素有不同樣式。例如,一個網頁制作者也許希望視其語言而定,用不同的顏色顯示代碼:code.html { color: #191970 }code.css { color:#4b0082 }以上的例子建立了兩個類,css和html,供HTML的CODE元素使用。CLASS屬性是用于在HTML中以指明元素的類,例如,例如,code.html.proprietary是無效的。類的聲明也可以無須相關的元素:note { font-size:small }在這個例子,名為note的類可以被用于任何元素。一個良好的習慣是在命名類的時候,根據它們的功能而不是根據它們的外觀。上述例子中的note類也可以命名為small,但如果網頁制作者決定改變這個類的樣式,使得它不再是小字體的話,那么這個名字就變得毫無意義了。ID 選擇符ID 選擇符個別地定義每個元素的成分。這種選擇符應該盡量少用,因為他具有一定的局限。一個ID選擇符的指定要有指示符"#"在名字前面。例如,ID選擇符可以指定如下:svp94O { text-indent:3em }這點可以參考HTML中的ID屬性:文本縮進3em關聯選擇符關聯選擇符只不過是一個用空格隔開的兩個或更多的單一選擇符組成的字符串。這些選擇符可以指定一般屬性,而且因為層疊順序的規則,它們的優先權比單一的選擇符大。例如,以下的上下文選擇符P EM { background:yellow }是P EM。這個值表示段落中的強調文本會是黃色背景;而標題的強調文本則不受影響。聲明屬性一個屬性被指定到選擇符是為了使用它的樣式。屬性的例子包括顏色、邊界和字體。值聲明的值是一個屬性接受的指定。例如,屬性顏色能接受值red。組合為了減少樣式表的重復聲明,組合的選擇符聲明是允許的。例如,文檔中所有的標題可以通過組合給出相同的聲明:H1,H2,H3,H4,H5,H6 {color:red;font-family:sans-serif }繼承實際上,所有在選擇符中嵌套的選擇符都會繼承外層選擇符指定的屬性值,除非另外更改。例如,一個BODY定義了的顏色值也會應用到段落的文本中。有些情況是內部選擇符不繼承周圍的選擇符的值,但理論上這些都是特殊的。例如,上邊界屬性是不會繼承的;直覺上,一個段落不會有同文檔BODY一樣的上邊界值。注解樣式表里面的注解使用C語言編程中一樣的約定方法去指定。CSS1注解的例子如以下格式:COMMENTS CANNOT BE NESTED*/偽類和偽元素偽類和偽元素是特殊的類和元素,能自動地被支持CSS的瀏覽器所識別。偽類區別開不同種類的元素(例如,visited links(已訪問的連接)和active links(可激活連接)描述了兩個定位錨(anchors)的類型)。偽元素指元素的一部分,例如段落的第一個字母。偽類或偽元素規則的形式如選擇符:偽類 { 屬性:值 }或選擇符:偽元素 { 屬性:值 }偽類和偽元素不應用HTML的CLASS屬性來指定。一般的類可以與偽類和偽元素一起使用,如下:選擇符.類:偽類 { 屬性:值 }或選擇符.類:偽元素 { 屬性:值 }定位錨偽類偽類可以指定A元素以不同的方式顯示連接(links)、已訪問連接(visited links)和可激活連接(active links)。定位錨元素可給出偽類link、visited或active。一個已訪問連接可以定義為不同顏色的顯示,甚至不同字體大小和風格。一個有趣的效果是使當前(或“可激活”)連接以不同顏色、更大的字體顯示。然后,當網頁的已訪問連接被重選時,又以不同顏色、更小字體顯示。這個樣式表的示例如下:A:link { color:red }A:active { color:blue;font-size:125%}A:visited { color:green;font-size:85%}首行偽元素通常在報紙上的文章,例如Wall Street Journal中的,文本的首行都會以粗印體而且全部大寫地展示。CSS1包括了這個功能,將其作為一個偽元素。首行偽元素可以用于任何塊級元素(例如P、H1等等)。以下是一個首行偽元素的例子:P:first-line {font-variant:small-caps;font-weight:bold }首個字母偽元素首個字母偽元素用于加大(drop caps)和其他效果。含有已指定值選擇符的文本的首個字母會按照指定的值展示。一個首個字母偽元素可以用于任何塊級元素。例如:P:first-letter { font-size:300%;float:left }會比普通字體加大三倍www.anxorj.tw防采集請勿采集本網。

本文將介紹 CSS 中一個非常有意思的屬性 mask 。

其實這個屬性是一個不標準的css屬性,因此一般在非IE瀏覽器中是不推薦使用zoom來實現div 的縮放效果的,如果想要廣泛引用實現放大或者縮小的效果,可以直接用css3的transform屬性來替代的,即你這里可以

顧名思義,mask 譯為遮罩。在 CSS 中,mask 屬性允許使用者通過遮罩或者裁切特定區域的圖片的方式來隱藏一個元素的部分或者全部可見區域。

這個是jquery操作css,貌似表示獲取類名為.mask的css。具體作用建議樓主搜一下“jquery操作css”,或者直接下一個jquery教程,開始就講了的。

其實 mask 的出現已經有一段時間了,只是沒有特別多實用的場景,在實戰中使用的非常少,本文將羅列一些使用 mask 創造出來的有意思的場景。

語法

最基本,使用 mask 的方式是借助圖片,類似這樣:

{ /* Image values */ mask: url(mask.png); /* 使用位圖來做遮罩 */ mask: url(masks.svg#star); /* 使用 SVG 圖形中的形狀來做遮罩 */}

當然,使用圖片的方式后文會再講。借助圖片的方式其實比較繁瑣,因為我們首先還得準備相應的圖片素材,除了圖片,mask 還可以接受一個類似 background 的參數,也就是漸變。

類似如下使用方法:

{ mask: linear-gradient(#000, transparent) /* 使用漸變來做遮罩 */}

那該具體怎么使用呢?一個非常簡單的例子,上述我們創造了一個從黑色到透明漸變色,我們將它運用到實際中,代碼類似這樣:

下面這樣一張圖片,疊加上一個從透明到黑色的漸變,

{ background: url(image.png) ; mask: linear-gradient(90deg, transparent, #fff);}

應用了 mask 之后,就會變成這樣:

這個 DEMO,可以先簡單了解到 mask 的基本用法。

這里得到了使用 mask 最重要結論:圖片與 mask 生成的漸變的 transparent 的重疊部分,將會變得透明。

值得注意的是,上面的漸變使用的是linear-gradient(90deg, transparent, #fff),這里的#fff純色部分其實換成任意顏色都可以,不影響效果。

CodePen Demo -- 使用 MASK 的基本使用

使用 MASK 進行圖片裁切

利用上述簡單的運用,我們可以使用 mask 實現簡單的圖片裁剪。

使用 mask 實現圖片切角遮罩

使用線性漸變,我們實現一個簡單的切角圖形:

.notching{ width: 200px; height: 120px; background: linear-gradient(135deg, transparent 15px, deeppink 0) top left, linear-gradient(-135deg, transparent 15px, deeppink 0) top right, linear-gradient(-45deg, transparent 15px, deeppink 0) bottom right, linear-gradient(45deg, transparent 15px, deeppink 0) bottom left; background-size: 50% 50%; background-repeat: no-repeat;}

像是這樣:

我們將上述漸變運用到 mask 之上,而 background 替換成一張圖片,就可以得到運用了切角效果的圖片:

background: url(image.png);mask: linear-gradient(135deg, transparent 15px, #fff 0) top left, linear-gradient(-135deg, transparent 15px, #fff 0) top right, linear-gradient(-45deg, transparent 15px, #fff 0) bottom right, linear-gradient(45deg, transparent 15px, #fff 0) bottom left;mask-size: 50% 50%;mask-repeat: no-repeat;

得到的效果如下:

CodePen Demo -- 使用 MASK 實現圖片切角遮罩

當然,實現上述效果還有其他很多種方式,譬如 clip-path,這里的 mask 也是一種方式。

多張圖片下使用 mask

上述是單張圖片使用 mask 的效果。下面我們看看多張圖片下,使用 mask 能碰撞出什么樣的火花。

假設我們有兩張圖片,使用 mask,可以很好將他們疊加在一起進行展示。最常見的一個用法:

div { position: relative; background: url(image1.jpg); &::before { position: absolute; content: ""; top: 0;left: 0; right: 0;bottom: 0; background: url(image2.jpg); mask: linear-gradient(45deg, #000 50%, transparent 50%); }}

兩張圖片,一張完全重疊在另外一張之上,然后使用mask: linear-gradient(45deg, #000 50%, transparent 50%)分割兩張圖片:

CodePen Demo -- MASK 的基本使用,多張圖片下的基本用法

當然,注意上面我們使用的 mask 的漸變,是完全的實色變化,沒有過度效果。

我們稍微修改一下 mask 內的漸變:

{- mask: linear-gradient(45deg, #000 50%, transparent 50%)+ mask: linear-gradient(45deg, #000 40%, transparent 60%)}

即可得到圖片1向圖片2過渡切換的效果:

CodePen Demo -- MASK 的基本使用,多張圖片下的基本用法2

使用 MASK 進行轉場動畫

有了上面的鋪墊。運用上面的介紹的一些方法,我們就可以使用mask來進行一些圖片切換間的轉場動畫。

使用線性漸變 mask:linear-gradient() 進行切換

還是上面的 Demo,我們通過動態的去改變 mask 的值來實現圖片的顯示/轉場效果。

代碼可能是這樣:

div { background: url(image1.jpg); animation: maskMove 2s linear;}

@keyframes { 0% { mask: linear-gradient(45deg, #000 0%, transparent 5%, transparent 5%); } 1% { mask: linear-gradient(45deg, #000 1%, transparent 6%, transparent 6%); } ... 100% { mask: linear-gradient(45deg, #000 100%, transparent 105%, transparent 105%); }}

當然,像上面那樣一個一個寫,會比較費力,通常我們會借助 SASS/LESS 等預處理器進行操作。像是這樣:

div { position: relative; background: url(image2.jpg) no-repeat; &::before { position: absolute; content: ""; top: 0;left: 0; right: 0;bottom: 0; background: url(image1.jpg); animation: maskRotate 1.2s ease-in-out; }} @keyframes maskRotate { @for $i from 0 through 100 { #{$i}% { mask: linear-gradient(45deg, #000 #{$i + '%'}, transparent #{$i + 5 + '%'}, transparent 1%); } }}

可以得到下面這樣的效果(單張圖片的顯隱及兩張圖片下的切換):

CodePen Demo -- MASK linear-gradient 轉場

使用角向漸變 mask: conic-gradient() 進行切換

當然,除了mask: linear-gradient(),使用徑向漸變或者角向漸變也都是可以的。使用角向漸變的原理也是一樣的:

@keyframes maskRotate { @for $i from 0 through 100 { #{$i}% { mask: conic-gradient(#000 #{$i - 10 + '%'}, transparent #{$i + '%'}, transparent); } }}

可以實現圖片的角向漸顯/切換:

CodePen Demo -- MASK conic-gradient 轉場

這個技巧,在張鑫旭的這篇文章里,有更多豐富的例子,可以移步閱讀:

你用的那些CSS轉場動畫可以換一換了

運用這個技巧,我們就可以實現很多有意思的圖片效果。像是這樣:

mask 碰撞濾鏡與混合模式

繼續下一環節。CSS 中很多有意思的屬性,和濾鏡和混合模式一結合,會碰撞出更多火花。

mask & 濾鏡 filter: contrast()

首先,我們利用多重徑向漸變,實現這樣一張圖。

{ background: radial-gradient(#000, transparent); background-size: 20px 20px;}

看著沒什么特別,我們利用filter: contrast()對比度濾鏡,改造一下。代碼大概是這樣:

html,body { width: 100%; height: 100%; filter: contrast(5);} div { position: relative; width: 100%; height: 100%; background: #fff; &::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: radial-gradient(#000, transparent); background-size: 20px 20px; }}

即可得到這樣的圖形,利用對比度濾鏡,將圖形變得非常的銳化。

這個時候,我們再疊加上不同的 mask 遮罩。即可得到各種有意思的圖形效果。

body { filter: contrast(5);} div { position: relative; background: #fff; &::before { background: radial-gradient(#000, transparent); background-size: 20px 20px; + mask: linear-gradient(-180deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, .5)); }}

CodePen Demo -- 使用 mask 搭配濾鏡 contrast

我們疊加了一個線性漸變的 masklinear-gradient(-180deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, .5)),注意,兩個漸變顏色都是帶透明度的。

或者換一個徑向漸變:

{ mask: repeating-radial-gradient(circle at 35% 65%, #000, rgba(0, 0, 0, .5), #000 25%);}

CodePen Demo -- 使用 mask 搭配濾鏡 contrast

好的,下一步,與上文類似,我們添加上動畫。

div { ... &::before { background: radial-gradient(#000, transparent); background-size: 20px 20px; mask: repeating-radial-gradient(circle at 35% 65%, #000, rgba(0, 0, 0, .5), #000 25%); animation: maskMove 15s infinite linear; }} @keyframes maskMove { @for $i from 0 through 100 { #{$i}% { mask: repeating-radial-gradient(circle at 35% 65%, #000, rgba(0, 0, 0, .5), #000 #{$i + 10 + '%'}); } }}

看看,可以得到了非?犰诺膭赢嬓Ч

CodePen Demo -- 使用 mask 搭配濾鏡 contrast 及動畫

還記得使用filter: hue-rotate()色相濾鏡嗎。再加上它,我們可以讓顏色也變化起來。

CodePen Demo -- 使用 mask 搭配濾鏡 contrast 及動畫2

mask & 濾鏡 filter: contrast() & 混合模式

接下來我們再疊加上混合模式。

注意到上面,其實我們的容器背景色是白色#fff。

我們可以通過多嵌套一層層級,再增加一個容器背景色,再疊加上混合模式,產生不一樣的效果。

先不添加使用mask,重新構造一下結構,最終的偽代碼帶個是這樣:

<div class="wrap"> <div class="inner"></div></div>

.wrap { position: relative; height: 100%; background: linear-gradient(45deg, #f44336, #ff9800, #ffeb3b, #8bc34a, #00bcd4, #673ab7);} .inner { height: 100%; background: #000; filter: contrast(700%); mix-blend-mode: multiply; &::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: radial-gradient(#fff, transparent); background-size: 12px 12px; }}

原理示例圖如下:

我們就可以得到如下的效果:

OK,到這一步,mask 還沒有運用上,我們再添加上 mask。

.wrap { background: linear-gradient(45deg, #f44336, #ff9800, #ffeb3b, #8bc34a, #00bcd4, #673ab7);} .inner { ... filter: contrast(700%); mix-blend-mode: multiply; &::before { background: radial-gradient(#fff, transparent); background-size: 12px 12px; + mask: linear-gradient(#000, rgba(0, 0, 0, .5)); }}

CodePen Demo -- mask & filter & blend-mode

實際效果比截圖好很多,可以點擊 Demo 去看看。

當然,這里疊加的是mix-blend-mode: multiply,可以嘗試其他混合模式,得到其他不一樣的效果。

譬如,疊加mix-blend-mode: difference,等等等等:

更多有意思的疊加,感興趣的同學需要自己多加嘗試。

mask 與圖片

當然,mask 最本質的作用應該還是作用于圖片。上面得到的重要結論:

圖片與 mask 生成的漸變的 transparent 的重疊部分,將會變得透明。

也可以作用于 mask 屬性傳入的圖片。也就是說,mask 是可以傳入圖片素材的,并且遵循 background-image 與 mask 圖片的透明重疊部分,將會變得透明。

運用這個技巧,可以制作非?犰诺霓D場動畫:

這里其實主要是在 mask 中運用了這樣一張圖片:

然后,使用了逐幀動畫,快速切換每一幀的 mask :

.img1 { background: url(image1.jpg) no-repeat left top;} .img2 { mask: url(https://i.imgur.com/AYJuRke.png); mask-size: 3000% 100%; animation: maskMove 2s steps(29) infinite;} .img2::before { background: url(image2.jpg) no-repeat left top;} @keyframes maskMove { from { mask-position: 0 0; } to { mask-position: 100% 0; }}

CodePen Demo -- mask 制作轉場動畫

當然,這個也是可以加上各種動畫的。上面已經演示了很多次了,感興趣的同學可以自己嘗試嘗試。

最后

說了這么多,mask 其實還是屬于一個比較冷門的屬性。在日常業務中能運用上的機會不多。

而且兼容性不算特別好,打開 MDN,可以看到,除了 mask 本身,還有很多與 mask 相關的屬性,只是目前大部分還屬于實驗室階段。本文只是初略的介紹了 mask 本身,對 mask 相關的一些屬性將會另起一文。

當然,即便如此,從屬性本身而言,我覺得 mask 還是非常有意思的,帶來了 CSS 更多可能性。

到此這篇關于奇妙的 CSS 屬性 MASK詳解的文章就介紹到這了,更多相關CSS 屬性 MASK內容請搜索真格學網以前的文章或繼續瀏覽下面的相關文章,希望大家以后多多支持真格學網!

CSS里的filter屬性是CSS2.0版本的。filter:filtername(parameters)即 filter:濾鏡名(參數)其中,filter是濾鏡選擇符;filtername是濾鏡的屬性名,這里包括alpha、blur、chroma等多種屬性;parameters是屬性參數值。屬性名及參數值請看下面的《filter屬性及屬性值》。具體的應用有兩種方法:1、先定義好CSS,再在頁面中需要的對象上使用預先定義好的CSS,實際上CSS的設置對話框里已經預先將這些濾鏡的語法設置好了,我們只需填上適合的具體參數即可。2、直接在支持CSS濾鏡效果的HTML控件元素上編寫CSS filter代碼?梢暬癁V鏡屬性應用的HTML合法的控件和它們的說明元 素 說 明BODY 網頁文檔的主體元素,所有的可見范圍都在元素內BUTTON 表單域的按鈕,可以有“發送(submit)”、“重置(reset)”等形式DIV 定義了網頁上的一個區域,這個區域的高度、寬度或者絕對位置都是以知的IMG 圖片元素,通過指定“src"屬性來指定圖片的來源INPUT 輸入表單域MARQUEE 移動字幕效果SPAN 定義了網頁上的一個區域,這個區域的高度、寬度或者絕對位置都是以知的TABLE 表格TD 表格數據單元格TEXTAREA 文本區域TFOOT 多行輸入文本框TH 表格標題單元格THEAD 表格標題TR 表格行編寫CSS filter代碼基本語法:filter屬性及屬性值濾鏡名 說 明 濾鏡名 說 明Alpha 設置透明度 Blur 設置模糊效果Chroma 設置指定顏色透明 Dropshadow 設置投射陰影Fliph 水平翻轉 Flipv 垂直翻轉Glow 對象的外邊界增加光效 Grayscale 設置灰度(降低圖片的色彩度)Invert 設置底片效果 Light 設置燈光投影Mask 設置透明膜 Shadow 設置陰影效果Wave 利用正弦波紋打亂圖片 Xray 只顯示輪廓1、Alpha:設置透明層次語法:STYLE="filter:Alpha(Opacity=opacity,FinishOpacity=finishopacity,Style=style,StartX=startX,StartY=startY,FinishX=finishX,FinishY=finishY)說明:Opacity:起始值,取值為0~100,0為透明,100為原圖。FinishOpacity:目標值。Style:1或2或3StartX:任意值StartY:任意值例子:filter:Alpha(Opacity="0",FinishOpacity="75",Style="2")2、blur:創建高速度移動效果,即模糊效果語法:STYLE="filter:Blur(Add=add,Direction=direction,Strength=strength)說明:Add:一般為1,或0。Direction:角度,0~315度,步長為45度。Strength:效果增長的數值,一般5即可。例子:filter:Blur(Add="1",Direction="45",Strength="5")3、Chroma:制作專用顏色透明語法:STYLE="filter:Chroma(Color=color)說明:color:#rrggbb格式,任意。例子:filter:Chroma(Color="#FFFFFF4、DropShadow:創建對象的固定影子語法:STYLE="filter:DropShadow(Color=color,OffX=offX,OffY=offY,Positive=positive)說明:Color:#rrggbb格式,任意。Offx:X軸偏離值。Offy:Y軸偏離值。Positive:1或0。例子:filter:DropShadow(Color="#6699CC",OffX="5",OffY="5",Positive="1")5、FlipH:創建水平鏡像圖片語法:STYLE="filter:FlipH例子:filter:FlipH6、FlipV:創建垂直鏡像圖片語法:STYLE="filter:FlipV例子:filter:FlipV7、glow:加光輝在附近對象的邊外語法:STYLE="filter:Glow(Color=color,Strength=strength)說明:Color:發光顏色。Strength:強度(0-100)例子:filter:Glow(Color="#6699CC",Strength="5")8、gray:把圖片灰度化語法:STYLE="filter:Gray例子:filter:Gray9、invert:反色語法:STYLE="filter:Invert例子:filter:Invert10、Light:設置燈光投影語法:Filter{light}這個屬性模擬光源的投射效果。一旦為對象定義了“LIGHT"濾鏡屬性,那么就可以調用它的“方法(Method)來設置或者改變屬性!癓IGHT"可用的方法有:AddAmbient 加入包圍的光源AddCone 加入錐形光源AddPoint 加入點光源Changcolor 改變光的顏色Changstrength 改變光源的強度Clear 清除所有的光源MoveLight 移動光源可以定義光源的虛擬位置,以及通過調整X軸和Y軸的數值來控制光源焦點的位置,還可以調整光源的形式(點光源或者錐形光源)指定光源是否模糊邊界、光源的顏色、亮度等屬性。如果動態的設置光源,可能回產生一些意想不到的效果。后面幾頁會有具體范例。11、mask:創建透明掩膜在對象上語法:STYLE="filter:Mask(Color=color)例子:filter:Mask(Color="#FFFFE0")12、shadow:創建偏移固定影子語法:filter:Shadow(Color=color,Direction=direction)說明:Color:#rrggbb格式。Direction:角度,0-315度,步長為45度。例子:filter:Shadow(Color="#6699CC",Direction="135")13、wave:波紋效果語法:filter:Wave(Add=add,Freq=freq,LightStrength=strength,Phase=phase,Strength=strength)說明:Add:一般為1,或0。Freq:變形值。LightStrength:變形百分比。Phase:角度變形百分比。Strength:變形強度。例子:filter:wave(Add="0",Phase="4",Freq="5",LightStrength="5",Strength="2")14、Xray:使對象變得像被x光照射一樣語法:STYLE="filter:Xray例子:filter:Xray15.顏色變化語法:filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#B5CCFA',EndColorStr='#B5CCFA');內容來自www.anxorj.tw請勿采集。


  • 本文相關:
  • css mask-image屬性詳細介紹(小結)
  • 詳解css masking模塊之clipping
  • 詳解css3 mask遮罩實現一些特效
  • css3 mask 遮罩的具體使用方法
  • CSS里的filter屬性是CSS哪個版本里的?
  • 常用的CSS屬性。
  • jquery設置CSS屬性
  • jquery 獲取CSS屬性
  • css里的zoom屬性詳解和使用
  • $(".mask").css是什么意思
  • css有哪些屬性可以繼承
  • 網站首頁網頁制作腳本下載服務器操作系統網站運營平面設計媒體動畫電腦基礎硬件教程網絡安全主頁網頁制作csscss教程css屬性詳解css3 mask遮罩實現一些特效css3 mask 遮罩的具體使用方法css教程css3div+css教程web標準教程瀏覽器兼容教程css布局實例css控制ul li 的樣式詳解(推薦)html設置超鏈接字體顏色和點擊后的字體顏色div水平垂直居中的完美解決方案css設置各種中文字體如雅黑、黑體、宋體、楷體等等css 文本字體顏色設置方法(css color)css 漂亮搜索框美化代碼css自定義select下拉選擇框的樣式(不用其他標簽模擬)css圓角效果 -webkit-border-radius(css3中border-radcss 中的background:transparent到底是什么意思有什么css 首行縮進兩個文字如何使用html+css實現tg-vision 主頁制作解決css樣式沖突的幾個辦法(小結)css 中使用徑向漸變實現卡券效果css3里box-shadow屬性的使用方法示例詳解css垂直居中的另類實現代碼詳解(不走尋常路)css viewport 單位 實現快速布局css布局兩個button在同父標簽中左右兩側分布的方法css變量對js交互組件開發帶來的提升與變革示例代碼詳完美解決webpack打包css背景圖片路徑問題純css實現選中商品后右下角顯示√號功能
    免責聲明 - 關于我們 - 聯系我們 - 廣告聯系 - 友情鏈接 - 幫助中心 - 頻道導航
    Copyright © 2017 www.anxorj.tw All Rights Reserved
    陕西快乐10分下载