《CSS3实战》笔记--渐变设计（二)
Gecko引擎的CSS渐变设计直线渐变基本语法
-moz-linear-gradient([
参数说明：
直线渐变的基本用法
/*最简单的线性渐变，只需要指定开始颜色和结束颜色，则默认从上到下实施线性渐变*/background: -moz-linear-gradient(red, blue);
演示效果：
/*从左上角到右下角的渐变，其中top关键字设置起点的x轴，left关键字设置起点的y轴坐标*/
background: -moz-linear-gradient(top left,red, blue)
演示效果：
/*设置从左到右的五彩渐变，其中y轴坐标默认为center，多个色标按步长平均显示*/background: -moz-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet);
演示效果：
/*从左上角到右下角的红色渐变，其中红色逐渐减弱，并最终显示为透明*/background: -moz-linear-gradient(top left, red, rgba(255,0,0,0));
演示效果：
/*设置角度值*/background: -moz-linear-gradient(0deg, red, rgba(255,0,0,0));
演示效果：
小结：当指定角度时，是沿水平线按逆时针旋转定位的。因此，设置0deg,将产生从左向右的水平渐变，而设置90度，将创建一个从底部到顶部的渐变。
/*从上到下的多彩渐变，其中在y轴的80%的位置，添加一个绿色色标，设计三色渐变效果。如果没有指定位置则三色会均匀分布*/background: -moz-linear-gradient(top, blue, green 80%, orange);
演示效果：
/*设计渐变半透明的效果的背景图片，在背景图片上面覆盖一层从左到右为白色到透明的渐变填充层*/
background: -moz-linear-gradient(right, rgba(255,255,255,0), rgba(255,255,255,1)), url(images/bg4.jpg);
演示效果：
径向渐变的基本语法
-moz-radial-gradient([
该函数的参数说明：
:定义圆半径，或者椭圆的轴长度n
径向渐变的基本语法
/*最简单的径向渐变，从中间向外由红色，黄色到蓝色渐变显示*/background: -moz-radial-gradient(red, yellow, blue);
演示效果：
/*最简单的径向渐变，从中间向外由红色，黄色道蓝色渐变显示，并设置不同色标的显示位置*/background: -moz-radial-gradient(red 20%, yellow 30%, blue 40%);
演示效果：
/*径向渐变，从左下角向外由红色，黄色，蓝色渐变显示，并设置蓝色色标的显示位置*/background: -moz-radial-gradient(bottom left, red, yellow, blue 80%);
显示效果：
/*径向渐变，形状为圆形。从左侧中间向外由红色，黄色到蓝色渐变显示，并设置蓝色色标的显示位置*/background: -moz-radial-gradient(left, circle, red, yellow, blue 50%);
演示效果：
/*径向渐变，形状为椭圆。从中间向外由红色，黄色到蓝色渐变显示，并设置渐变尺寸为cover关键字*/background: -moz-radial-gradient(ellipse cover, red, yellow, blue);
演示效果：
小结：
size参数包含多个关键字，closest-side,closest-corner,farthest-side,farthest-corner,contain 和 cover。使用这些关键字可以定义径向渐变的大小。
另外，Gecko引擎还定义了-moz-repeating-linear-gradient 和-moz-repeating-radial-gradient 两个属性，用来定义重复直线渐变和重复径向渐变。
background: -moz-repeating-radial-gradient(circle, black, black 10px, white 10px, white 20px);
演示效果：
background: -moz-repeating-linear-gradient(top left 60deg,black, black 10px, white 10px, white 20px);
演示效果：
渐变的应用
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Webkit引擎的应用</title><style type="text/css">body {/*页面初始化*/ background-color: #454545; margin:1em; padding:0;}.box {/*设计模块样式*/ -moz-border-radius: 10px;/*设计圆角*/ -moz-box-shadow: 0 0 12px 1px rgba(205, 205, 205, 1);/*设计阴影特效*/ border: 1px solid black; padding: 10px; max-width: 600px;/*最大宽度显示*/ margin: auto;/*居中显示*/ text-shadow: black 1px 2px 2px;/*设计文本包含阴影*/ color: white; background-image: -moz-linear-gradient(bottom, black, rgba(0, 47, 94, 0.2), white); /*设计直线渐变背景*/ background-color: rgba(43, 43, 43, 0.5);}.box:hover {/*设计鼠标经过时，放大阴影亮度*/ -moz-box-shadow: 0 0 12px 5px rgba(205, 205, 205, 1);}h2 {/*在标题前面添加额外内容*/ font-size: 120%; font-weight:bold; text-decoration:underline;}h2:before { content: "标题：";}p { padding: 6px; text-indent:2em; line-height:1.8em; font-size:14px;}</style></head><body><div class="box"> <h2>关于文字</h2> </div></body></html>演示效果：
更多《CSS3实战》笔记--渐变设计（二)相关文章请关注PHP中文网！
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Travailler avec GraphQL Caching
Mar 19, 2025 am 09:36 AM
Si vous avez récemment commencé à travailler avec GraphQL ou examiné ses avantages et ses inconvénients, vous avez sans aucun doute entendu des choses comme "GraphQL ne prend pas en charge la mise en cache" ou
Construire une application Ethereum à l'aide de Redwood.js et de la faune
Mar 28, 2025 am 09:18 AM
Avec la récente montée du prix du bitcoin sur 20k $ USD, et pour lui, récemment en train de briser 30k, je pensais que cela valait la peine de reprendre une profonde plongeon dans la création d'Ethereum
Créer votre propre bragdoc avec Eleventy
Mar 18, 2025 am 11:23 AM
Quelle que soit le stade dans lequel vous vous trouvez en tant que développeur, les tâches que nous effectuons - qu'elles soient grandes ou petites - ont un impact énorme dans notre croissance personnelle et professionnelle.
Vue 3
Apr 02, 2025 pm 06:32 PM
Il est sorti! Félicitations à l'équipe Vue pour l'avoir fait, je sais que ce fut un effort massif et une longue période à venir. Tous les nouveaux documents aussi.
Pouvez-vous obtenir des valeurs de propriété CSS valides du navigateur?
Apr 02, 2025 pm 06:17 PM
J'ai eu quelqu'un qui écrivait avec cette question très légitime. Lea vient de bloguer sur la façon dont vous pouvez obtenir les propriétés CSS valides elles-mêmes du navigateur. C'est comme ça.
Un peu sur CI / CD
Apr 02, 2025 pm 06:21 PM
Je dirais que "Site Web" correspond mieux que "Application mobile" mais j'aime ce cadrage de Max Lynch:
Comparaison des navigateurs pour une conception réactive
Apr 02, 2025 pm 06:25 PM
Il existe un certain nombre de ces applications de bureau où l'objectif montre votre site à différentes dimensions en même temps. Vous pouvez donc, par exemple, écrire
Cartes empilées avec un positionnement collant et une pincée de sass
Apr 03, 2025 am 10:30 AM
L'autre jour, j'ai repéré ce morceau particulièrement charmant sur le site Web de Corey Ginnivan où une collection de cartes se cassent les uns sur les autres pendant que vous faites défiler.
