CSS背景属性之颜色渐变

颜色渐变

颜色渐变其实在网页设计中并不是特别常见，但也不可避免的会出现导航栏是渐变色这种情况或者别的不是单一颜色的情况，例如：

这样的设计解决方案并不是只可以使用颜色渐变，我们可以使用两个div拼接，将文字放置两个div中间，但是有颜色渐变的话，我们就不需要那么复杂的解决。
颜色渐变可以分为两种，线性渐变和径向渐变。

线性渐变
1.有过渡色渐变：
background：linear-gradient( red , yellow , green );
红色，黄色，绿色三色在0-100之间依照顺序有过渡的变化
background：linear-gradient(red 0%,yellow 20%,yellow 100%);
0为红色，0-50为红色到黄色渐变， 100黄色
这两者实现的效果如下图：

2.无过渡色渐变：
background：linear-gradient(red 0%,red 50%,yellow 50%,yellow 100%);
0-50%都为红色，50-100都为黄色
简写为：
background：linear-gradient(red 50%,yellow 50%);
使用无过渡渐变实现我们开始所说的效果

<style>
.nav{width: 150px;height: 100px;background:linear-gradient(#99d9ea 50%,#00a2e8 50%);line-height: 98px;text-align: center;color: white;
}
<style><body><div calss="nav">首页</div>
</body>

3.角度渐变：
background：linear-gradient(45deg,red,yellow,green);
效果图如下，左边是没有角度的，右边是45deg的

径向渐变
括号中的颜色编写方式与线性渐变是一样的：
background：radial-gradient(red,green);
background：radial-gradient(circle,red,green);
这两个差别不会很大，前者是横向的，后者是纵向的，下面的效果图为了观察更加明显是使用的另外两个颜色：

重复渐变

重复的线性渐变：background:repeating-linear-gradient(to top,#ff0,#0f0);
重复的径向渐变：background:repeating-lradial-gradient(to right,#ff0,#0f0);

这里的 to top是默认的值，颜色渐变会从上而下由黄色到绿色有过渡渐变
下面两张效果图，前者是to right，后者是to left

background:repeating-linear-gradient(to left,#ff0,#0f0);
background:repeating-linear-gradient(to right,#ff0,#0f0);

CSS背景属性之颜色渐变相关推荐

【CSS 背景属性 background】
CSS 背景属性 background CSS 背景属性 1. background 属性: 一次性集中定义 8个背景相关属性 2. background-color 属性: 元素的背景颜色 ( ...
用dw中html设置背景,Dreamweaver 教程-CSS背景属性(background)
但凡正规的网站在设计时都会注重网页背景的使用,一个好的网页背景与整体设计是息息相关的.下面我们就来讲讲一些常用的CSS背景属性. 1.背景颜色属性(background-color)body { ba ...
前端：CSS/10/伪类选择器，CSS列表属性，CSS边框属性，CSS内边距属性，CSS背景属性
CSS伪类选择器:给超链接加的样式(链接的不同状态加样式) 一个超链接,有四个状态: 正常状态(:link):鼠标没放上去之前的样式: 放上状态(:hover):鼠标放到链接上时的样式: 激活状态(: ...
HTML5 - CSS背景属性、与CSS三大特性描述
文章目录 CSS的背景背景颜色背景图片背景平铺背景图片位置设置超大图片为背景小案例获取网页图片中小技巧背景图像固定(背景附着) 复合属性背景色半透明注意 CSS背景总结(表格) CS ...
html中页面背景属性,css背景属性有哪些？
css背景属性有哪些?下面本篇文章给大家带来关于css背景属性的介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. css背景属性有哪些?background简写属性,作用是将背景 ...
css怎么设置字体颜色渐变
css设置字体颜色渐变的方法:1.使用"background-cli"和"text-fill-color"实现字体颜色渐变:2.使用"mask-ima ...
零基础学习CSS---05.CSS背景属性详解
CSS属性一.背景属性 1.background-color(背景颜色):red: 2.background-image(背景图片):background-image:url(图片地址); 3.ba ...
css 背景图片和背景色渐变同时存在
css 背景图片和背景色渐变同时存在 1.垂直渐变效果图: .wrapper {width:500px;height: 500px;background: url(./imabg.png) no-r ...
css四种炫酷科技背景边框，颜色渐变，四角特效
详见个人博客 1.css四角背景无边边框代码如下: <div class="BoxWrap"><div class="horn">&l ...

CSS背景属性之颜色渐变

颜色渐变

CSS背景属性之颜色渐变相关推荐

最新文章

热门文章