css浮雕效果

浮雕效果

感覺這個效果用在網頁上應該蠻讚的，於是就學習了一下

浮雕效果需要用到伸縮盒的知識（flex）

flex在chrome是完全支援的，要加-webkit-字首，其他的瀏覽器有的支援有的不支援，自己去查css手冊，今天主要想講一下怎麼製作出浮雕效果

先附上**：

1

<
div 
class
="title"
>
2<
div 
class
="word"
>生活服務
div>
3<
div 
class
="relief"
>
4<
div 
class
="border"
>
div>
5div
>
6div
>

1

body,div
5.title
1415
.word
19.relief
22.border

很實用的乙個效果

flex樣式解析：

display:-webkit-flex     提供乙個伸縮盒的容器

-webkit-align-items:

flex-start：

彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸起始邊界。

flex-end：

彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸結束邊界。

center：

彈性盒子元素在該行的側軸（縱軸）上居中放置。（如果該行的尺寸小於彈性盒子元素的尺寸，則會向兩個方向溢位相同的長度）。

-webkit-flex:復合屬性。設定或檢索彈性盒模型物件的子元素如何分配空間。

none：

none關鍵字的計算值為: 0 0 auto

[ flex-grow ]：

定義彈性盒子元素的擴充套件比率。   （定義空間的分配權）

[ flex-shrink ]：

定義彈性盒子元素的收縮比率。　　（若溢位時，按照比例消化多出來的空間）

[ flex-basis ]：

定義彈性盒子元素的預設基準值。　　　　（定義元素的寬度值，若沒有指定則取決與元素本身寬度值）

最後在border裡面再設定border屬性就可以完成浮雕效果的製作了

4 浮雕效果

浮雕 雕刻演算法實質是很簡單地，即 對影象的每乙個點進行卷積處理。假設原影象為x,處理後的影象為y 浮雕演算法核kernel矩陣定義為 1 0,0 0,0,0 0,0,1 那麼，對於座標為 i,j 點，浮雕效果圖的演算法為y i,j x i 1,j 1 x i 1,j 1 128。當然，x,y的取值...

canvas實現浮雕效果

還是這個美女,長這樣 然後進行乙個浮雕操作 一瞬間,生動活躍的人物就變成了石板雕刻,還帶上了一點質感.如何實現這種浮雕質感呢?放在畫布裡,也就是對畫素的操作,關鍵就在怎麼操作了.先這樣 把每個畫素的通道和相鄰畫素的通道值進行差值運算,再這樣 得到結果加上中性灰的值 128 然後再這樣 當前畫素把以上...

unity3d shader之浮雕效果

浮雕就是對影象上的乙個畫素和它右下的那個畫素的色差的一種處理 非常容易，只需要乙個簡單的演算法 用fragment shader來實現 我們只看實現部分就好 在frag函式中 mc00mc tex2d maintex,i.uv maintex rgb 獲取當前點的顏色 mc11 tex2d main...