重庆分公司,新征程启航
为企业提供网站建设、域名注册、服务器等服务
这篇文章将为大家详细讲解有关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度角
效果图:
radial-gradient()函数--径向渐变
radial-gradient() 函数用径向渐变创建 "图像"。
径向渐变由中心点定义。例:
为了创建径向渐变你必须设置两个终止色。
css径向颜色渐变(Radial Gradients)跟线性渐变(linear gradients)不一样,它不是沿着一个方向渐变,而是以一个点为中心,向四周辐射渐变,360度的。
语法:
radial-gradient(shape size at position, start-color, ..., last-color);
参数值:
值 | 描述 |
---|---|
shape | 确定圆的类型:
|
size | 定义渐变的大小,可能值:
|
position | 定义渐变的位置。可能值:
|
start-color, ..., last-color | 用于指定渐变的起止颜色。 |
示例:
径向渐变 - 形状
椭圆形 Ellipse(默认):
圆形 Circle:
注意: Internet Explorer 9 及之前的版本不支持渐变。
效果图:
径向渐变 径向渐变径向渐变
关于“css如何设置渐变”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。