CSS + HTML 实现纸张类似稿纸效果

直接上例子：

（重点：background-image: repeating-linear-gradient(#ffffff,#ffffff 3.8%,#000 4%);）

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">body{background: #CCCCCC;}.page{width: 21.7cm;min-height: 29cm;margin: 20px auto;line-height: 44px;background-image: -webkit-repeating-linear-gradient(#ffffff,#ffffff 3.8%,#000 4%);background-image: repeating-linear-gradient(#ffffff,#ffffff 3.8%,#000 4%);}</style></head><body><div class="page" contenteditable>这是一段很长很长的文字这是一段很长很长的文字这是一段很长很长的文字这是一段很长很长的文字这是一段很长很长的文字这是一段很长很长的文字这是一段很长很长的文字</div></body>
</html>

效果：

 代码解释：通过背景进行线性渐变（linear-gradient）以达到稿纸效果；说明：repeating-linear-gradient(#ffffff,#ffffff 3.8%,#000 4%)，3.8%与4%之间就是线条的宽度，但是这样做出来的有缺陷，这种线条并不能随内容增多而保持原有的线与线的距离。如下图：

作一个改进：

（将百分比换为像素，41px-44px可自己调节线与线的距离以及线的高度background-image: repeating-linear-gradient(#ffffff,#ffffff 41px,#000 44px);）

这样就可以达到预期效果了。

CSS + HTML 实现纸张类似稿纸效果相关推荐

svg画css,CSS vs. SVG:图形文本的效果
这篇文章是探索有关于CSS和SVG技术的系列文章第一篇,通过例子来阐述CSS和SVG相关技术的比较.因为大家对SVG有一定的偏见,这个系列文章只是为了证明SVG解决Web上的某些设计问题.因为它是自然 ...
html怎么实现蓝色垂直的直线,css实例教程一款纯css实现的垂直时间线效果
今天给大家分享一款纯css实现的垂直时间线效果.垂直时间线适合放在类似任务时间安排的网页上.该实现采用了蓝色作为主题色,界面效果还不错.一起看下效果图: 实现的代码. html代码: 复制代码代码如下 ...
html5霓虹效果代码,纯CSS实现酷炫的霓虹灯效果(附demo)
最近关注了油管上的 CSS Animation Effects Tutorial 系列,里面介绍了非常多有意思的 CSS 动效.其中第一个就是很酷炫的霓虹灯效果,这里就实现思路做一个简单的记录和分享. ...
CSS mask 实现鼠标跟随镂空效果
点击下方星标本公众号,实用前端技术文章及时了解偶然在某思看到这样一个问题,如何使一个div的部分区域变透明而其他部分模糊掉?,最后实现效果是这样的: 进一步,还能实现任意形状的镂空效果: 鼠标经过的 ...
CSS特殊样式（三）纯CSS实现各类气球泡泡对话框效果
一.关于纯CSS实现气泡对话框首先,来张大图: 上边这张黄黄的,大大的,圆圆的,有个小尾巴,文字内容有些YY的图片,就是使用纯CSS实现的气泡对话框效果,一点图片都没有哦.看到这里,你是不是跟我一样 ...
CSS如何实现圆角的outline效果？
一.首先,outline是个很牛逼的东西温故而知鑫,10年的时候写过一篇可用性方面的文章:"页面可用性之outline轮廓外框的一些研究",还算挺有用的:3年之后,也就是13年, ...
CSS：实现动态流光线条效果/动态流光线条颜色渐变效果
需求描述: 需要实现类似下图中的动态流光线条效果: 思路: 提到这种动态绘制矢量图形的需求,一般会想到使用canvas:由于笔者不太熟悉canvas动画也可以考虑用CSS来实现,这里先记录使用CSS实 ...
css玻璃雨滴效果,纯css实现窗户玻璃雨滴逼真效果_javascript技巧
写样式,毕竟每个雨滴都长得不一致嘛.使用预处理器除了可以帮助我们减少工作量之外,还可以使用预处理器中的循环.变量等.最主要的是可以使用随机函数产生的随机值,让我们不需要单独处理上百个雨滴. 有关于HA ...
用CSS Filter 可以实现相同的效果
用CSS Filter 可以实现相同的效果,而且可以省去图片,代码如下: <table width="100%" height="133" border ...

CSS + HTML 实现纸张类似稿纸效果

直接上例子：

作一个改进：

CSS + HTML 实现纸张类似稿纸效果相关推荐

最新文章

热门文章