CSS印章效果圖是一種非常常見的涉及許多網站設計和編程過程中的圖形效果。它可以應用于很多web應用場景,如表單、按鈕等,將元素轉換成看起來像現實中印章的樣式。下面介紹關于如何用CSS代碼實現印章效果圖。
.stamp { display: inline-block; padding: 5px 12px; border-radius: 10px; text-transform: uppercase; font-weight: 700; font-size: 1.3rem; letter-spacing: 1px; color: #fff; background: #969696; box-shadow: 1px 1px 1px rgba(0, 0, 0, .2); } .stamp:after { content: ''; position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px; border-radius: 10px; background: #f7f7f7; box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .1), inset -1px -1px 1px rgba(0, 0, 0, .1); } .stamp:before { content: ' '; position: absolute; top: 6px; left: 6px; right: 6px; bottom: 6px; border-radius: 9px; background: #fff; box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .1), inset -1px -1px 1px rgba(0, 0, 0, .1), 1px 1px 1px rgba(0, 0, 0, .1), -1px -1px 1px rgba(0, 0, 0, .1); }
代碼中,我們首先定義一個樣式類- .stamp,設置了一些基本屬性來定義我們的印章樣式。然后使用了:after和:before偽元素來為樣式提供額外的裝飾和效果。在:before偽元素中,我們使用了4個 inset box-shadow,以及其他一些屬性,為元素的白色背景提供了更多的陰影和裝飾。最后,在:after選擇器中,我們設置了一個簡單的帶陰影的灰色背景,使得元素看起來更加現實和具有層次感。
上一篇java json甘特圖
下一篇vue是什么啊