CSS3颜色渐变整理

颜色渐变，参考

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.a,.b {height: 100px;width: 100px;color: #ffffff00;}.a:hover:active,.b:hover:active {height: 300px;width: 300px;color: #ffffff;}/*默认情况下,颜色节点均匀分布*//*预定义方向（to bottom、to top、to right、to left、to bottom right...)*//*角度是指水平线和渐变线之间的角度，逆时针方向计算。*/.a:nth-child(1) {background-image: linear-gradient(#e66465, #9198e5)}.a:nth-child(2) {background-image: linear-gradient(to right, red, yellow)}.a:nth-child(3) {background-image: linear-gradient(to bottom right, red, yellow)}.a:nth-child(4) {background-image: linear-gradient(150deg, red, yellow)}.a:nth-child(5) {background-image: linear-gradient(red, yellow, green)}.a:nth-child(6) {background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet)}.a:nth-child(7) {background-image: linear-gradient(to right,  red, #ff000000)}.a:nth-child(8) {background-image: repeating-linear-gradient(red, yellow 10%, green 20%)}.a:nth-child(9) {display: none}/*语法,background-image: radial-gradient(shape size at position, start-color, ..., last-color)*//*默认情况下的径向渐变，中心center（在中心点），形状ellipse（椭圆形），大小farthest-corner（到最远的角落）,颜色节点均匀分布*//*size 参数定义了渐变的大小。shape参数定义了形状。circle圆形，ellipse椭圆形(默认值)*/.b:nth-child(1) {background-image: radial-gradient(red, yellow, green)}.b:nth-child(2) {background-image: radial-gradient(red 5%, yellow 15%, green 50%)}.b:nth-child(3) {background-image: radial-gradient(circle, red, yellow, green)}.b:nth-child(4) {background-image: radial-gradient(closest-side at 70% 70%, red, yellow, black)}.b:nth-child(5) {background-image: radial-gradient(closest-corner at 70% 70%, red, yellow, black)}.b:nth-child(6) {background-image: radial-gradient(farthest-side at 70% 70%, red, yellow, black)}.b:nth-child(7) {background-image: radial-gradient(farthest-corner at 70% 70%, red, yellow, black)}.b:nth-child(8) {background-image: repeating-radial-gradient(red, yellow 10%, green 15%)}</style>
</head>
<body><div class="box_1"><div class="box_2"><!--线性渐变--><div class="a">1.从上到下</div><div class="a">2.从左到右</div><div class="a">3.从左上角到右下角</div><div class="a">4.带有指定的角度</div><div class="a">5.带有多个颜色节点</div><div class="a">6.彩虹颜色和文本</div><div class="a">7.带有透明度</div><div class="a">8.重复</div><div class="a">9.无</div></div><div class="box_2"><!--径向渐变--><div class="b">1.颜色节点均匀分布</div><div class="b">2.颜色节点不均匀分布</div><div class="b">3.形状为圆形</div><div class="b">4.渐变的大小</div><div class="b">5.渐变的大小</div><div class="b">6.渐变的大小</div><div class="b">7.渐变的大小</div><div class="b">8.重复</div></div></div>
</body>
</html>

渐变颜色随机生成的网页

uiGradients - Beautiful colored gradients

CSS3颜色渐变整理相关推荐

css3颜色渐变：css3如何实现背景颜色渐变？
为了开发网页的美观,css3背景颜色渐变是经常会用到的,那么,css3背景颜色渐变如何设置呢?本篇文章我们就来介绍关于css颜色渐变背景的设置方法. 我们要知道的是css3渐变有两种类型:css3线性 ...
CSS3颜色渐变模式
1.线性渐变:linear-gradient 语法:<linear-gradient> = linear-gradient([ [ <angle> | to <si ...
php如何在添加div的背景颜色_css3颜色渐变：css3如何实现背景颜色渐变？
为了开发网页的美观,css3背景颜色渐变是经常会用到的,那么,css3背景颜色渐变如何设置呢?本篇文章我们就来介绍关于css颜色渐变背景的设置方法. 我们要知道的是css3渐变有两种类型:css3线性 ...
html字体渐变颜色的设置颜色代码,使用CSS3实现字体颜色渐变的实现
在使用Animation.css的时候发现它的官网字体会渐变,看了一下他的css很有趣 .site__title { color: #f35626; background-image: -webkit ...
php背景时间渐变,CSS3怎么实现背景颜色渐变？（图文+视频）
本篇文章主要给大家介绍css3背景渐变的实现方法总结. 我们在前端开发过程中,为了丰富网站样式内容,那么背景色渐变就有很不错的视觉效果.所谓CSS3 渐变(gradients)也就是可以让你在两个或多 ...
css 文字颜色渐变 animation,css3文字渐变动画
这次给大家带来css3文字渐变动画,实现css3文字渐变动画的注意事项有哪些,下面就是实战案例,一起来看一下. 利用css3这个属性(背景剪裁): background-clip: border-bo ...
html边框颜色线性渐变,css3设置边框颜色渐变的方法有哪些
css3设置边框颜色渐变的方法有哪些发布时间:2020-09-14 14:51:54 来源:亿速云阅读:110 作者:小新 css3设置边框颜色渐变的方法有哪些?这个问题可能是我们日常学习或工作经 ...
背景颜色渐变 css3 ---- 转自：至尊宝的BLOG http://blog.sina.com.cn/zzbnie
背景颜色渐变 css3 一. Webkit浏览器 (1) 第一种写法: background:-webkit-gradient(linear ,10% 10%,100% 100%, color-sto ...
CSS3 - 设置渐变颜色背景，线性/放射性/循环
渐变就是多种颜色混合而成的效果,css3要实现渐变,就必须使用渐变函数来设置background或则background-imge属性.同时为了兼容各个浏览器(IE,safari,chrome,Fir ...
css3实现边框border的颜色渐变
给一个右边框实现颜色渐变.中间深两边浅 .box{border-right: 1px solid;border-image: -webkit-linear-gradient(#F8F8F8 , #A ...

CSS3颜色渐变整理

CSS3颜色渐变整理相关推荐

最新文章

热门文章