CSS是前端開發中常用的技術之一,除了可以美化頁面,還可以實現一些很有趣的效果。比如,我們可以通過CSS做出紙張效果。
.paper { background-color: #f8f8f8; width: 80%; padding: 20px; border: 1px solid #ddd; box-shadow: 1px 1px 1px #ddd; position: relative; } .paper:before { content: ''; position: absolute; top: -5px; left: -5px; right: -5px; bottom: -5px; border: 1px solid #ccc; z-index: -1; }
如上代碼,我們創建了一個名為.paper的div,并設置了一些樣式。其中 在網頁上呈現出來的效果就是一個有淡淡紋理邊緣的白色紙張。 我們還可以根據需要添加一些陰影和模糊效果,使紙張更加逼真。 通過在box-shadow屬性中添加一些值,我們在紙張周圍添加了一些陰影效果,同時在.paper:before中又添加了一些模糊效果,整個紙張看起來就更加逼真了。 以上就是使用CSS做出紙張效果的技巧,希望對大家有所幫助。.paper {
background-color: #f8f8f8;
width: 80%;
padding: 20px;
border: 1px solid #ddd;
box-shadow: 1px 1px 1px #ddd, -1px -1px 1px #ddd;
position: relative;
}
.paper:before {
content: '';
position: absolute;
top: -5px;
left: -5px;
right: -5px;
bottom: -5px;
border: 1px solid #ccc;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
z-index: -1;
}