css3漸變 背景 倒影 變形

2022-08-18 12:09:13 字數 748 閱讀 2009

一、背景切割background-clip

二、背景原點(定義起點或中心點)background-origin

三、背景尺寸background-size

四、漸變

徑向漸變:沒規定方向時是有中間向外(預設);規定角度時,0度是由左到右,角度是逆時針變化的。

filter:"progid:dximagetransform.microsoft.gradient (gradienttype=0, startcolorstr=#ff0000, endcolorstr=#010101)";

+background:#f9f9f9;

五、遮罩(蒙版)mask

六、倒影(reflect)

例子:七、旋轉(rotate)——2d旋轉

例子:

八、移動(translate)

九、縮放scale——2d縮放

十、扭曲skew(逆時針)

注意:六~十為變形,不同的順序有不一樣的效果。分先後變換

css3 倒影和變形

倒影 語法 webkit box reflect direction above below left right 間距 畫素值 注意1.倒影產生的效果不在標準流之內 2.對box模型產生倒影 倒影加漸變 單純使用倒影,於原圖區分不大,顯示不出效果,倒影一般與漸變配合使用 語法 webkit box...

css3 背景漸變

在沒有了解css也可以做背景漸變以前,我都是通過ps一張背景漸變的來應用到自己所做的網頁中。然而,在前不久我了解到css3也可以做背景漸變後,想要做背景漸變的效果就很容易了許多,下面是一些css3做背景漸變的方法。一.線性漸變 自上而下的線性漸變 div 從左往右的線性漸變 div 第乙個引數是漸變...

css3漸變 倒影 過渡 20160526

漸變 gradients 可以讓你在兩個或多個指定的顏色之間顯示平穩的過渡。linear gradient 線性漸變 向下 向上 向左 向右 對角方向 radial gradient 徑向漸變 由它們的中心定義 語法 background webkit linear radial gradient ...