用css3径向渐变制作花纹背景

我们可以通过多种css3渐变的叠加制作各种各样好看的花纹

css3中.如果有多种渐变叠加,先写的渐变会覆盖后写的渐变.

制作格子花纹:

代码如下:

 .bg{width: 120px;height: 200px;background-color: #282828;background-image:/*第一行*/-webkit-radial-gradient(rgba(255,255,255,0.4) 15%,transparent 16%),/*第二行*/-webkit-radial-gradient(rgba(255,255,255,0.4) 15%,transparent 16%),/*在两条底边加上黑色边边,增强立体感*/-webkit-radial-gradient(black 15%,transparent 16%),-webkit-radial-gradient(black 15%,transparent 16%);/*4个渐变的渐变位置*/background-position: 0 0px,8px 8px,0 1px,8px 9px;background-size: 16px 16px;}

制作原型相交花纹:

代码如下:

 .p20{width: 300px;height: 300px;background:#394057;background-image:radial-gradient(closest-side, transparent 98%,rgba(0,0,0,1) 99%),radial-gradient(closest-side,transparent 98%,rgba(0,0,0,1) 99%);/*上下两个圆错开相交*/background-position: 0 0px,40px 40px;background-size: 80px 80px;}

用css3径向渐变制作花纹背景相关推荐

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

用css3径向渐变制作花纹背景

用css3径向渐变制作花纹背景相关推荐

最新文章

热门文章