您好，歡迎光臨CSS甜點烘焙店

今天體力恢復的還不錯，除了還是有劇咳，沒力氣吼小孩之外，其它還算安好

我們就來開始店面的展示櫥窗吧~

Html部份，繼續在.all.store下面加入結構

.all
    .store
        //略
        .showcase
			.light

一、櫥窗(.showcase)

畫一長方形，因為這裡是看進去的室內，所以給深色背景，並給一淺色的框

border: 0.2rem solid #abdee6
background: #4a6367

利用box-shadow畫出邊框的亮面與陰影

box-shadow: 0.05rem 0.05rem 0 0 #78bbc6

二、櫥窗飾板(.showcase)

在&::before利用box-shadow畫上3層層板

box-shadow: 0 1.4rem 0 0 #abdee6, 0 3rem 0 0 #abdee6, 0 4.6rem 0 0 #abdee6

光是線條還不夠，在&::after加入一點俯視的平面

box-shadow: 0 1.2rem 0 0 #7ab5be, 0 2.8rem 0 0 #7ab5be, 0 4.4rem 0 0 #7ab5be

三、櫥窗反光(.showcase.light)

畫一白色長條後旋轉

transform: rotate(30deg)

利用box-shadow畫另一條

box-shadow: 6rem 0 0 0 #fff

給透明度

opacity: 0.2

這時會發現反光跑出櫥窗框了

回到.showcase加入

overflow: hidden

櫥窗製作好了，明天就是期待的甜點上架時刻囉~
敬請期待

如有任何問題，歡迎下方留言討論