css
文章平均质量分 92
css
苦呀君
前端萌新
展开
-
CSS:纯css样式实现左右两侧文字中间填充点或线(仿账单报表样式),自适应
效果图:实现原理很简单,使用flex布局,中间的填充使用border属性,看似是很多点,其实是一个盒子的border。并且flex特性可以自动适应填充的长短。html代码:<div class="text-container"> <p>交通出行</p> <p class="fill"></p> ...原创 2020-04-12 19:24:42 · 1090 阅读 · 0 评论 -
css:憨憨也能学会的CSS3渐变(Gradients)
渐变这个东西看起来很炫酷,高大上,但对于小白的我,一看到代码,瞬间。。。菜鸟教程对渐变的使用是这样的:好像还看得懂,我觉得我可以!然后找一找大佬们的小Demo(https://blog.csdn.net/huantuo4908/article/details/70209224)这是什么东西?渐变怎么还能搞成条纹背景用了?然后再看看更复杂点的代码(https://leaverou.g...原创 2019-11-24 17:47:50 · 212 阅读 · 0 评论 -
css:纯CSS极少代码实现打字动画效果(有缺陷)
直接上效果图:代码:<style> /* 通用属性 */ .common{ /* 盒子高度与行高一致, 2em是为了不让底部出现下一行文字的头部一部分 */ height: 2em; line-height: 2em; /* 强制换行,强制拆解英文单词 */ ...原创 2019-11-07 17:54:25 · 180 阅读 · 0 评论 -
css:border样式制作几何图形(圆形&三角形)
前言html中制作几何图形的方法有很多,canvas,SVG等等。我们可以运用css的border样式来制作一些常见的几何图形,相对于canvas来说只使用css就能实现,相对于SVG来说便于理解,上手容易。常见的几何图形总体可以分为两种,一种是有棱角的(多边形)和边为弧线的(圆),稍微复杂一点的类型像星星之类的也可以理解为是这两种类型的拼接而成的。三角形-bordercss制作三角形其...原创 2019-11-02 17:28:46 · 1790 阅读 · 0 评论 -
css:shadow阴影(box-shadow&text-shadow)
前言css3中新增两种阴影,分别是box-shadow&text-shadow。从字面上意思即盒子阴影和文本阴影,本文主要内容简单的介绍一下阴影的使用。一、box-shadowW3school中的语法为:box-shadow: h-shadow v-shadow blur spread color inset;/* h-shadow:水平阴影的位置,必选,允许为负 v-s...原创 2019-11-03 14:36:34 · 500 阅读 · 1 评论