css如何设置渐变

这篇文章将为大家详细讲解有关css如何设置渐变,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

站在用户的角度思考问题,与客户深入沟通,找到鞍山网站设计与鞍山网站推广的解决方案,凭借多年的经验,让设计与互联网技术结合,创造个性化、用户体验好的作品,建站类型包括:网站设计制作、网站设计、企业官网、英文网站、手机端网站、网站推广、空间域名、虚拟空间、企业邮箱。业务覆盖鞍山地区。

什么是css

css是一种用来表现HTML或XML等文件样式的计算机语言,主要是用来设计网页的样式,使网页更加美化。它也是一种定义样式结构如字体、颜色、位置等的语言,并且css样式可以直接存储于HTML网页或者单独的样式单文件中,而样式规则的优先级由css根据这个层次结构决定,从而实现级联效果,发展至今,css不仅能装饰网页,也可以配合各种脚本对于网页进行格式化。

方法:1、用linear-gradient()实现线性渐变,语法“linear-gradient(角度,起止颜色列表)”;2、用radial-gradient()实现径向渐变,语法“radial-gradient(大小 位置,起止颜色)”。

linear-gradient() 函数--线性渐变

linear-gradient() 函数用于创建一个线性渐变的 "图像"。

创建一个线性渐变,需要指定两种颜色,还可以实现不同方向(指定为一个角度)的渐变效果,如果不指定方向,默认从上到下渐变。

语法:

linear-gradient(direction, color-stop1, color-stop2, ...);

参数:

描述
direction用角度值指定渐变的方向(或角度)。
color-stop1, color-stop2,...用于指定渐变的起止颜色。

代码示例(考虑浏览器兼容性):





线性渐变



    
        基本线性渐变--自上而下
        基本线性渐变--45度角
    

效果图:

css如何设置渐变

radial-gradient()函数--径向渐变

radial-gradient() 函数用径向渐变创建 "图像"。

径向渐变由中心点定义。例:

css如何设置渐变

为了创建径向渐变你必须设置两个终止色。

css径向颜色渐变(Radial Gradients)跟线性渐变(linear gradients)不一样,它不是沿着一个方向渐变,而是以一个点为中心,向四周辐射渐变,360度的。

语法:

radial-gradient(shape size at position, start-color, ..., last-color);

参数值:

描述
shape确定圆的类型:
  • ellipse (默认): 指定椭圆形的径向渐变。

  • circle :指定圆形的径向渐变

size定义渐变的大小,可能值:
  • farthest-corner (默认) : 指定径向渐变的半径长度为从圆心到离圆心最远的角

  • closest-side :指定径向渐变的半径长度为从圆心到离圆心最近的边

  • closest-corner : 指定径向渐变的半径长度为从圆心到离圆心最近的角

  • farthest-side :指定径向渐变的半径长度为从圆心到离圆心最远的边

position定义渐变的位置。可能值:
  • center(默认):设置中间为径向渐变圆心的纵坐标值。

  • top:设置顶部为径向渐变圆心的纵坐标值。

  • bottom:设置底部为径向渐变圆心的纵坐标值。

start-color, ..., last-color用于指定渐变的起止颜色。

示例:




 




径向渐变 - 形状

椭圆形 Ellipse(默认):

圆形 Circle:

注意: Internet Explorer 9 及之前的版本不支持渐变。

效果图:

css如何设置渐变





径向渐变



    
        径向渐变
        径向渐变
    

css如何设置渐变

关于“css如何设置渐变”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。


标题名称:css如何设置渐变
文章起源:http://cdiso.cn/article/pieoje.html

其他资讯