![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS
文章平均质量分 90
浩狼
这个作者很懒,什么都没留下…
展开
-
75行代码 完美实现图片完整展示 flex 横向瀑布流布局
布局特点代码简单图片完整展示,不会被裁切以图片异步加载完毕的顺序渲染图片,防止页面闪动最后一行图片过少时,图片不会被放大得很大在线预览 https://haolang.github.io/web/demo/500px/效果如下代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title>原创 2020-11-20 12:19:40 · 2418 阅读 · 1 评论 -
【html】【css】 6 种方式实现自定义文字描边
实现原理利用 text-shadow 可叠加的属性在同一半径内叠加多个 文字阴影实现,叠加出现的锯齿使用 text-shadow 模糊属性弱化叠加的 text-shadow 越多,text-shadow 的边缘越平滑,本例中 text-shadow 每间隔45度叠加一次,共叠加8次(叠加8次时 text-shadow的 x y轴平移距离较易计算) 。效果展示示例代码<!DOCTYPE html><html lang="en"><head> <原创 2020-11-28 16:28:20 · 13063 阅读 · 0 评论 -
【css3】径向渐变实现任意大小背景圆点
实现原理使用透明色紧接透明色的渐变即可实现圆点渐变半径刚好为背景大小一半时,圆点刚好填满背景大小,即 71% (1 / √2 ≈ 0.71).point-bg { background-image: radial-gradient(red 71%, transparent 0); background-size: 100px 100px; background-repeat: no-repeat; }结果如下tips: 渐变函数生成的结果等同于图片,原创 2020-09-30 16:16:21 · 874 阅读 · 0 评论