css颜色渐变样式,css 渐变颜色

CSS设置DIV背景色渐变显示

专业领域包括成都做网站、成都网站设计、成都商城网站开发、微信营销、系统平台开发，与其他网站设计及系统开发公司不同，创新互联的整合解决方案结合了帮做网络品牌建设经验和互联网整合营销的理念，并将策略和执行紧密结合，为客户提供全网互联网整合方案。

打开软件

可以使用Dreamweaver或Visual studio软件，比如打开VS软件，如下图所示：

创建一个DIV

然后在body主体中创建一个div名为【a】， div class="a"DIV/div，如下图所示：

设置属性

然后设置div的属性，比如高度、宽度和颜色等等，如下图所示：

背景渐变色

然后设置背景渐变色，代码如下图：

background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#0000ff));

其中：linear-gradient()是用来创建线性渐变的语句。

预览效果

点击预览图标，在浏览器中的显示效果图如下所示：

1、新建一个html文件，命名为test.html。

2、在test.html文件内，使用font标签创建三行文字，分别用不同的方法给font字体设置颜色。

3、在test.html文件内，直接在font标签上，通过color属性来设置字体的颜色。例如，设置font字体的颜色为红色。

4、在test.html文件内，设置font标签的class属性为myclass，主要用于下面通过该class来设置css样式。

5、在test.html文件内，设置font标签的id属性为myid，主要用于下面通过该id来设置css样式。

6、在css标签中，设置类名为myclass的样式，例如，设置color属性为蓝色（blue）；设置id为myid的样式，例如，设置color属性为粉红色（pink）。

7、在浏览器打开test.html文件，查看实现的效果。

线性渐变 - 从上到下（默认情况下）

#grad {background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */

background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */

background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */

background: linear-gradient(red, blue); /* 标准的语法 */

}

从左到右的线性渐变：

#grad {

background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */

background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */

background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */

background: linear-gradient(to right, red , blue); /* 标准的语法 */

有两种样式,一种是线性渐变,一种是径向渐变

线性渐变:background:linear-gradient(0deg,red,orange);0deg意思是渐变角度为0°

径向渐变:background:linear-gradient(circle,red 0%,orange);circle的意思是径向渐变的形状是圆形,eclipse是椭圆形(默认) 0%表示调整径向渐变颜色节点不均匀分布.

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容