实现条纹边框

1、效果演示

2、编写代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>条纹边框</title><style type="text/css">#box {position: relative;width: 300px;height: 300px;background: cornflowerblue;border: 20px dashed greenyellow;}#box::after {position: absolute;top: 0;bottom: 0;left: 0;right: 0;background-color: white;}#article {position: relative;width: 300px;height: 300px;overflow-y: scroll;background-color: #fcefa1;}</style>
</head>
<body>
<div id="box"><div id="article">2015年以来的世界形势和中国形势都是空前复杂。在历史上，中国也曾面临巨大的压力，但过去形势比较单纯，阵线分得清楚，而现在是真分不清楚了。历史上的中国，曾经是地理封闭的国家，几条大山脉和沿海大陆架国家，将中国团团围住，所以历史上的中国很封闭，实际很晚世界才了解到，原来还有这么个国家存在。后来改革开放，很不容易让世界了解了中国，改革开放也曾经让中国站在了世界的道德高地之上，充满了希望，很多国家都羡慕中国，都在学习中国的开放。中国经济增长也在10年间取得了巨大的进步，“中国因素”影响到了世界。此后形势有变，不但很多国家的改革走到前面去了，而且由于“一带一路”的冲击，美国切实感受到了中国的威胁，开始了“重返亚太”的战略，实际上现在的中国，面临空前的软合围，这种合围是经济的，也是政治的，压力空前，这是建国几十年来从未没有过的情况。中国的百事不顺，与此有关。</div>
</div>
</body>
</html>

HTML学习笔记：实现条纹边框相关推荐

【温故知新】CSS学习笔记（盒子边框介绍）
CSS盒子边框 CSS中其实就三个大模块:盒子模型.浮动.定位. 其中所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子,也就是一个装内容的容器,每个矩形都由元素的内容.内边距(padding ...
css学习笔记2--多重边框
(1) box-shadow方案 box-shadow支持逗号分隔,我们可以创建任意数量的投影. 它不会影响布局,也不会受到box-sizing的影响. 创建的假"边框"出现在元素 ...
html制作网站边框,HTML学习笔记☆边框制作
HTML学习笔记☆边框制作代码: 填入内容填入内容填入内容填入内容填入内容填入内容填入内容填入内容填入内容以上代码确切地说是表格代码,把括号内文字改成数字或去掉,变成以下代码形式: ...
SVO学习笔记（二）
SVO学习笔记(二) 这篇文章稀疏图像对齐地图点投影(地图与当前帧间的关系) reprojectMap reprojectPoint reprojectCell 特征点对齐中的非线性优化结尾这 ...
SVO学习笔记（一）
SVO学习笔记(一) 这篇文章 Frame Featuredetection Featrue_matcher 三角测量求深度特征匹配非线性优化寻找匹配特征极线搜索匹配特征总结这篇文章一个 ...
OpenCV 学习笔记03 boundingRect、minAreaRect、minEnclosingCircle、boxPoints、int0、circle、rectangle函数的用法...
函数中的代码是部分代码,详细代码在最后 1 cv2.boundingRect 作用:矩形边框(boundingRect),用于计算图像一系列点的外部矩形边界. cv2.boundingRect(arr ...
qml学习笔记(二)：可视化元素基类Item详解（上半场anchors等等）
原博主博客地址:http://blog.csdn.net/qq21497936 本文章博客地址:http://blog.csdn.net/qq21497936/article/details/7851 ...
7 种 Javascript 常用设计模式学习笔记
7 种 Javascript 常用设计模式学习笔记由于 JS 或者前端的场景限制,并不是 23 种设计模式都常用. 有的是没有使用场景,有的模式使用场景非常少,所以只是列举 7 个常见的模式本文的 ...
amazeui学习笔记--css（常用组件4）--关闭按钮Close
amazeui学习笔记--css(常用组件4)--关闭按钮Close 一.总结 1.关闭按钮基本用法:关闭按钮样式,可以结合其他不同组件使用.对 <a> 或者 <button> ...

HTML学习笔记：实现条纹边框

实现条纹边框

1、效果演示

2、编写代码

HTML学习笔记：实现条纹边框相关推荐

最新文章

热门文章