【css3】径向渐变实现任意大小背景圆点

实现原理

css3 使用非透明色紧接透明色的径向渐变即可实现圆点背景
渐变半径刚好为背景大小一半时，圆点刚好填满背景大小，即 71% （1 / √2 ≈ 0.71）
圆点边界添加一定距离的过渡模糊，可弱化圆点边界显示锯齿感

在线预览

在线预览(gitee) http://haolang.gitee.io/web/demo/point_bg/

html 代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>径向渐变背景圆点</title><style>body {text-align: center;}.point-bg,.point-bg2 {line-height: 200px;text-align: center;width: 200px;height: 200px;display: inline-block;background-size: 200px 200px;background-repeat: no-repeat;outline: 1px solid #000;margin: 10px;}.point-bg {/*边界没有过渡模糊*/background-image: radial-gradient(red 71%, transparent 0);}.point-bg2 {/* 添加1%的模糊，可弱化圆点边界显示锯齿感*/background-image: radial-gradient(red 70%, transparent 71%, transparent);}</style>
</head>
<body>
<div class="point-bg">point-bg
</div>
<div class="point-bg2">point-bg2
</div>
</body>
</html>

两种效果对比显示结果如下

应用

tips: 渐变函数生成的结果等同于图片，可以将其作为背景图片操作，实现自定义 ul>li 的 list-style 图标

实现效果如下：

【css3】径向渐变实现任意大小背景圆点相关推荐

html css径向渐变,如何实现css3径向渐变如何定义中心和大小形状
如何实现css3径向渐变如何定义中心和大小形状发布时间:2020-07-13 16:23:57 来源:亿速云阅读:249 作者:Leah 如何实现css3径向渐变如何定义中心和大小形状?很多新手对 ...
CSS3技巧：利用css3径向渐变做一张优惠券（转）
在很多购物网站上都能看到优惠券,代金券,什么什么的券,但基本都是图片直接放上去,那么你有没有想过css来做一个呢,反正我是这样想过.那么你怎么做呢,切图做背景平铺边缘,嗯,有这样想过,如今css3技术 ...
CSS3径向渐变radial-gradient实现波浪边框和内倒角
前言大佬给了一张优惠券图片(如下图),我一看,这波浪型的边框和内倒角用css写不出来吧,遂向大佬说明并要ui切图,大佬回答:css3可以实现.好吧,大佬都说可以实现了,还不赶紧去求谷哥,度娘. 实现 ...
css好看的html径向渐变,CSS3径向渐变
上次说到CSS3中的线性渐变,表面上看起来似乎有些复杂,但是逐条分解下来其实也没有那么难理解,总结下来无外乎就三点:颜色.方向和位置.那么今天所要讲到的径向渐变相对来说会更复杂一些,不过没有关系,我们 ...
用css3径向渐变制作花纹背景
我们可以通过多种css3渐变的叠加制作各种各样好看的花纹 css3中.如果有多种渐变叠加,先写的渐变会覆盖后写的渐变. 制作格子花纹: 代码如下: .bg{width: 120px;height: 2 ...
css3颜色渐变：css3如何实现背景颜色渐变？
为了开发网页的美观,css3背景颜色渐变是经常会用到的,那么,css3背景颜色渐变如何设置呢?本篇文章我们就来介绍关于css颜色渐变背景的设置方法. 我们要知道的是css3渐变有两种类型:css3线性 ...
CSS3实现径向渐变
径向渐变的基础知识: 径向渐变的概念:从起点到终点颜色从内到外进行圆形渐变(从中间向外拉). 一.径向渐变的基本语法: background-image:-webkit-gradient(type,x ...
CSS3渐变属性：线性渐变和径向渐变用法教程
在CSS3之前如果需要添加渐变效果,通常要设置背景图像来实现.而CSS3中增加了渐变属性,通过渐变属性可以轻松实现渐变效果.CSS3的渐变属性主要包括线性渐变和径向渐变,本文转自黑马程序员前端培训课程 ...
css3五花八门渐变之径向渐变【完美光晕效果】
CSS3 渐变(Gradients) CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡. 以前,你必须使用图像来实现这些效果.但是,通过使用 CSS3 渐变(gra ...

【css3】径向渐变实现任意大小背景圆点

实现原理

在线预览

应用

实现效果如下：

【css3】径向渐变实现任意大小背景圆点相关推荐

最新文章

热门文章