热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

css怎么设置渐变

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

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

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

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

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

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

语法:

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

参数:

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

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








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

效果图:

描述
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禁止元素拖拽?
    一、用户行为三剑客以下3个CSS属性:user-select属性可以设置是否允许用户选择页面中的图文内容;user-modify属性可以设置是否允许输入 ... [详细]
  • 去网上在线生成一个favicon.ico图标,然后把下面的代码复制到页面的head ... [详细]
  • Voicewo在线语音识别转换jQuery插件的特点和示例
    本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件,该插件具有快速、架构、风格、扩展和兼容等特点,适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ... [详细]
  • Python瓦片图下载、合并、绘图、标记的代码示例
    本文提供了Python瓦片图下载、合并、绘图、标记的代码示例,包括下载代码、多线程下载、图像处理等功能。通过参考geoserver,使用PIL、cv2、numpy、gdal、osr等库实现了瓦片图的下载、合并、绘图和标记功能。代码示例详细介绍了各个功能的实现方法,供读者参考使用。 ... [详细]
  • ECMA262规定typeof操作符的返回值和instanceof的使用方法
    本文介绍了ECMA262规定的typeof操作符对不同类型的变量的返回值,以及instanceof操作符的使用方法。同时还提到了在不同浏览器中对正则表达式应用typeof操作符的返回值的差异。 ... [详细]
  • 本文整理了常用的CSS属性及用法,包括背景属性、边框属性、尺寸属性、可伸缩框属性、字体属性和文本属性等,方便开发者查阅和使用。 ... [详细]
  • CSS|网格-行-结束属性原文:https://www.gee ... [详细]
  • 文章目录简介HTTP请求过程HTTP状态码含义HTTP头部信息Cookie状态管理HTTP请求方式简介HTTP协议(超文本传输协议)是用于从WWW服务 ... [详细]
  • 最近在学Python,看了不少资料、视频,对爬虫比较感兴趣,爬过了网页文字、图片、视频。文字就不说了直接从网页上去根据标签分离出来就好了。图片和视频则需要在获取到相应的链接之后取做下载。以下是图片和视 ... [详细]
  • 前端提高篇(七十):SVG基本使用、基本样式、路径path
    SVG是使用XML来描述二维图形和绘图程序的语言。SVG遵循的是xml的规范,与html5的使用有所区别SVG绘制出来的是矢量图,放大之后不会失真官方文 ... [详细]
  • Scrapy 爬取图片
    1.创建Scrapy项目scrapystartprojectCrawlMeiziTuscrapygenspiderMeiziTuSpiderhttps:movie.douban.c ... [详细]
  • 目录爬虫06scrapy框架1.scrapy概述安装2.基本使用3.全栈数据的爬取4.五大核心组件对象5.适当提升scrapy爬取数据的效率6.请求传参爬虫06scrapy框架1. ... [详细]
  • 来自Google的前端工程师-PhilipWalton分享了本身关于怎样成为优异的工程师的一些看法。个人感觉很有代价,所以翻译成中文,轻易人人浏览。程度有限,如翻译不妥的地方请在批 ... [详细]
  • python+selenium+chrome网页自动化测试:1、在pycharm中安装selenium:file-setting-projectinterpreter中搜索sele ... [详细]
  • 图解CSS3 读书笔记——边框
    CSS的边框属性:border-style、border-width、border-color写法:分开写:E{border-style: ... [详细]
author-avatar
x将臣x
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有