使用CSS3实现自定义引用块样式 - 卷角卡片

Modern Block Quote Styles 使用CSS3变换实现的DIV底边卷角加上阴影，呈现3D的视觉效果。

模板，教程

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 2648
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

<head>
    <link rel="stylesheet" type="text/css" href="https://tympanus.net/Tutorials/ModernBlockQuoteStyles/css/demo.css" />
    <link rel="stylesheet" type="text/css" href="https://tympanus.net/Tutorials/ModernBlockQuoteStyles/css/style_common.css" />
    <link rel="stylesheet" type="text/css" href="https://tympanus.net/Tutorials/ModernBlockQuoteStyles/css/style6.css" />
    <link href='https://fonts.useso.com/css?family=Open+Sans+Condensed:700,300|Abril+Fatface|Dr+Sugiyama' rel='stylesheet' type='text/css'>
    <script type="text/javascript" src="https://tympanus.net/Tutorials/ModernBlockQuoteStyles/js/modernizr.custom.79639.js"></script>
    
</head>

<h1>Modern <span>Block Quote Styles</span></h1>
            <h2>Get creative with block quotes</h2>

<div class="support-note">
                
                
                <span class="no-csstransforms">CSS transforms are not supported in your browser</span>
                
                
                <span class="note-ie">Sorry, only modern browsers.</span>
            </div>

</header>

<div class="mb-wrap mb-style-6">
                <blockquote cite="https://www.gutenberg.org/ebooks/600">
                    <p>For what is man without desires, without free will, and without the power of choice but a stop in an organ pipe?</p>
                </blockquote>
                <div class="mb-attribution">
                    <p class="mb-author">Fyodor Dostoevsky</p>
                    <cite><a href="https://www.gutenberg.org/ebooks/600">Notes from the Underground</a></cite>
                </div>
            </div>

</section>

</div>
</body>

</html>

Modern Block Quote Styles 使用CSS3变换实现的DIV底边卷角加上阴影，呈现3D的视觉效果。

模板，教程

编辑器支持Emmet

快捷键

Modern Block Quote Styles 使用CSS3变换实现的DIV底边卷角加上阴影，呈现3D的视觉效果。

模板，教程

使用CSS3实现自定义引用块样式 - 居中图片扣子

使用CSS3实现自定义引用块样式 - 交叉圆

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：