首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

纯CSS 波点背景 🏀

我把这个效果写在 body 上,如果你不喜欢这个配色也可以自己手动改改。\n\n \n \n\n# 思路\n\n我实现上图的效果思路是,最先想到使用 background-image ,然后使用 radial-gradient 画圆。再配合默认给个背景色,应该差不多可以了。\n\n需要提醒一下,background-image 不单只能插背景图,也可以通过代码实现渐变效果(之前遇到一些实习生不清楚这点~)。\n\n于是我做了这几步:\n\n1. 将body的宽高设为 100%\n1. 将 margin 设为 0\n1. 设置默认背景色 background-color\n1. 设置圆形背景 background-image: radial-gradient\n\n于是代码变成这样\n\n\n<style>\n  body {\n    width: 100%;\n    height: 100%;\n    margin: 0;\n    background-color: #655;\n    background-image: radial-gradient(#f5dab8 30%, transparent 0);\n    background-size: 60px 60px;\n }\n</style>\n\n\n\n

02

CSS float浮动的深入研究、详解及拓展 一 一 一 一 一 一 一 一

我们使用float浮动做了很多其本职工作以外的事情,于是我们会混淆,我们会回看不清float真正的面目。浮动真正的意义在哪里呢?要知道这个问题的答案很简单,假设现在CSS中没有浮动(float)属性,那么会变成一个什么样子。我们会发现,目前流行采用浮动方法实现的无论是分栏布局,还是列表排列我们都可以用其他一些CSS属性(不考虑table)代替实现,唯一一个实现不了的就是“文字环绕图片”,我是想不出来能有什么方法可以让文字环绕图片显示。好,这个替代不了的作用才是float真正的意义所在。此作用类似于word中的版式,很基础的原始的作用:

01
领券