线性渐变与径向渐变与重复渐变

<style>        /*线性渐变*/        div{            width: 300px;            height: 300px;            /*添加渐变：渐变不是一个单一钩，它产生的是图像，所以需要使用background*/            /*linear-gradient(方向，开始颜色 位置，颜色2 位置，颜色3 位置...);*/            /*方向：            to top:0deg            to right:90deg            to bottom:180deg --默认值            to left:270deg*/            /*background: linear-gradient(to right,red,blue)*/;            background: linear-gradient(to right,red 0%,red 50%,blue 50%,blue 100%);        }

        /*径向渐变*/        div{            width: 300px;            height: 200px;            /*添加径向渐变：产生也是图像*/            /*background: radial-gradient(red,blue);*/            /*语法：radial-gradient(形状 大小 坐标,颜色1，颜色2...)：

            形状shape:            circle:产生正方形的渐变色            ellipse:适配当前的形状,如果是正方形的容器，两者效果一样.如果宽高不一样，默认效果切换到ellipse

            at position:坐标，默认在正中心。            可以赋值坐标（参照元素的左上角），也可以赋值关键字(left center right top bottom)            大小size:            closest-side：最近边；            farthest-side：最远边；            closest-corner：最近角；            farthest-corner：最远角。默认是最远的角farthest-corner*/

            /*background: radial-gradient(circle,red,blue);*/            /*background: radial-gradient(circle farthest-side at 50px 50px,red,blue);*/            /*background: radial-gradient(at left top,red,blue);*/

            /*设置颜色的位置*/            background: radial-gradient(red,red 50%,blue 50%,blue);        }

        /*重复渐变*/        body{            background-color: #ccc;        }        div:first-of-type{            width: 300px;            height: 300px;            /*background: radial-gradient(                    #fff 0%,#fff 10%,                    #000 10%,#000 20%,                    #fff 20%,#fff 30%,                    #000 30%,#000 40%);*/            background: repeating-radial-gradient(circle closest-side at center center,            #fff 0%,#fff 10%,            #000 10%,#000 20%);        }        div:last-of-type{            width: 200px;            height: 800px;            background: repeating-linear-gradient(45deg,            #fff 0%,#fff 10%,            #000 10%,#000 20%);        }    </style></head><body><div></div><div></div>

转载于:https://www.cnblogs.com/lujieting/p/10182567.html

线性渐变与径向渐变与重复渐变相关推荐

CSS线性渐变和径向渐变详解
第九章:渐变色 1.线性渐变 1.1.什么是线性渐变 1.2线性渐变的写法 2.径向渐变 2.1什么是径向渐变 2.2径向渐变的写法总结 1.线性渐变 1.1.什么是线性渐变线性渐变,顾名思义就是 ...
CSS3渐变属性：线性渐变和径向渐变用法教程
在CSS3之前如果需要添加渐变效果,通常要设置背景图像来实现.而CSS3中增加了渐变属性,通过渐变属性可以轻松实现渐变效果.CSS3的渐变属性主要包括线性渐变和径向渐变,本文转自黑马程序员前端培训课程 ...
CSS3，渐变效果（线性渐变，径向渐变，重复渐变），实现各种背景效果。
CSS3中的渐变实现(线性渐变.径向渐变) CSS3中的background新增属性实现,常见页面效果. CSS3中的图片边框的基本用法 CSS3中的transition属性,实现过渡效果. CSS3 ...
渐变：线性渐变、径向渐变
渐变: CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡. 分为线性渐变(linear-gradient).径向渐变(radial-gradient) 线性渐变(l ...
CSS3线性渐变与径向渐变
目标:使用background-image属性实现渐变背景效果 CSS 定义了两种渐变类型: 线性渐变(向下/向上/向左/向右/对角线) 径向渐变(由其中心定义) 1.CSS 线性渐变如需创建线性渐 ...
css新特性：线性渐变详解(重复性线性渐变、径向渐变、重复性径向渐变的使用)
线性渐变线性渐变重复性线性渐变径向渐变重复性径向渐变的使用线性渐变线性渐变是向下.向上.向左.向右.对角方向的颜色渐变. 其语法格式为: background-image: linear- ...
PS的安装、背景、背景练习、雪碧图/精灵图、线性渐变、径向渐变、电影卡片练习——06fontbackground
目录一.PS的安装二.背景(background-color.background-image. background-repeat.background-position.background- ...
CSS 3种渐变效果（线性渐变，径向渐变，圆锥型渐变）
1 linear-gradient(线性渐变) 1.1按方向渐变语法: background: linear-gradient(direction, color-stop1, color-stop2 ...
CSS小技巧---线性渐变linear-gradient/径向渐变radial-gradient
文章目录前言普通渐变条纹条纹重复虚线斜向条纹三角形进度条动画 progress 网格圆点阵列波点图案前言本文主要介绍linear-gradient的使用方法,既有普通的用法,也 ...
线性渐变，径向渐变，重复性渐变
线性渐变,径向渐变,重复性渐变 <!DOCTYPE html> <html lang="en"> <head><meta charset= ...

线性渐变与径向渐变与重复渐变

线性渐变与径向渐变与重复渐变相关推荐

最新文章

热门文章