CSS的纸张效果

紫微前端

于 2022-06-30 12:58:26 发布

阅读量906

点赞数

CC 4.0 BY-SA版权

分类专栏：原生javascript制作各种酷炫组件文章标签： css 前端 html

本文链接：https://blog.youkuaiyun.com/liuhao9999/article/details/125538404

原生javascript制作各种酷炫组件专栏收录该内容

157 篇文章 ¥89.90 ¥99.00

订阅专栏

本文探讨如何使用CSS实现逼真的纸张纹理效果，通过设置背景图像、边框阴影等属性，让网页元素呈现出如同纸张般的视觉感受，增强用户交互体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<div class="container">

    <img src="long.png" alt="the cast of Schitt’s Creek" />

    <div class="poster">
        <img src="long.png" alt="the cast of Schitt’s Creek" />
    </div>

</div>



<style>
    .poster {
        width: 300px;
        padding: 7%;
        position: relative;
        box-sizing: border-box;
        background-color: #fff;
        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2);
        filter: saturate(70%) contrast(85%)

了解本专栏