陰影效果在 UI 設(shè)計(jì)中無(wú)處不在,，利用好陰影可以在分層和高度交互的界面中傳達(dá)視覺(jué)線(xiàn)索，同時(shí)有助于提高事物在屏幕上的深度表現(xiàn),。

但很遺憾的是 Power Apps 現(xiàn)有控件中,，不支持設(shè)置陰影樣式，因此本篇文章為大家介紹目前為止要如何在 Power Apps 畫(huà)布應(yīng)用中使用陰影樣式,。

這需要利用 HTML 控件（可以看到連 Power Apps 編輯器中鼠標(biāo)交互時(shí)都有陰影的效果）,。

插入控件后，Power Apps 會(huì)將一段 HTML 顯示在畫(huà)布上,，因?yàn)榭梢栽?HTML 控件上寫(xiě)網(wǎng)頁(yè)前端的樣式代碼,，因此可以利用該控件實(shí)現(xiàn)陰影效果。

將【HTMLText】屬性按下圖進(jìn)行設(shè)置,。

設(shè)置后什么都看不到,，因?yàn)槟壳爸皇窃?HTML 中顯示了一個(gè)寬 380像素，高350像素大小的框,。而這個(gè)框并沒(méi)有任何的顏色和其他樣式,，所以肉眼看不到任何東西。

要想給這個(gè)框添加樣式,，就需要在 HTML 控件中編寫(xiě)對(duì)應(yīng)的 CSS 代碼,。

陰影的 CSS 代碼如下所示需要利用【box-shadow】代碼，并對(duì)其進(jìn)行響應(yīng)的配置,。

box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];

horizontal offset -  必需,。水平陰影的位置。允許負(fù)值,。        

vertical offset - 必需,。垂直陰影的位置。允許負(fù)值,。

blur radius - 可選,。模糊距離。

optional spread radius - 可選,。陰影的尺寸,。        .

color - 可選。陰影的顏色,。

看到上面的一大堆陰影的配置方式是不是很頭疼,，沒(méi)關(guān)系。我們這里不需要完全理解陰影的配置方式,。

我這里推薦大家一個(gè)網(wǎng)站,，我們可以在該網(wǎng)站上挑選喜歡的陰影，然后把代碼復(fù)制出來(lái)就行。

https:///css-box-shadow-examples

該網(wǎng)站中提供了 93 種陰影的示例,，挑選合適的陰影后,，只需要單擊就能復(fù)制對(duì)應(yīng)的代碼。

復(fù)制后把代碼粘貼回 Power Apps ,，放到 HTML 控件對(duì)應(yīng)下圖的位置上,。

你就會(huì)發(fā)現(xiàn)陰影效果已經(jīng)出現(xiàn)了。

但此時(shí)你會(huì)發(fā)現(xiàn),，power apps 中的陰影效果和網(wǎng)頁(yè)中示例的不一樣,，左側(cè)的邊框好像被切掉了一樣沒(méi)有陰影效果。

這樣會(huì)讓整個(gè)陰影框變得很丑,，為此我們需要在 div 上加一些邊距,。一般來(lái)講有 25px 的邊距就夠了。

加上邊距就可以看到完整的陰影框了,。

除此之外我們也可以在此基礎(chǔ)上添加更多樣式來(lái)美化這個(gè)陰影框,。

比如加上背景色和圓角。

知道如何制作陰影框后,，我們可以把陰影框應(yīng)用到 Power Apps 的各種地方,。

比如最常見(jiàn)的就是 Gallery 列表。你可以直接把陰影框復(fù)制,，插入到 Gallery 中,，然后根據(jù)需要調(diào)整大小（代碼里面的width 和 height）,，并把陰影框的 HTML 控件放到最底層,，這樣你就能實(shí)現(xiàn)類(lèi)似下圖的 Gallery 樣式，每個(gè)記錄都可以用陰影框突出顯示,。這看起來(lái)比原先的 Gallery 要好很多,。

通過(guò)這種 HTML 控件的方式，不光可以在 Power Apps 中添加陰影效果,，更多網(wǎng)頁(yè)中能夠制作的精美樣式和交互效果,，都可以用同樣的方式來(lái)在 Power Apps 中實(shí)現(xiàn)。