简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Maison > interface Web > tutoriel HTML > le corps du texte

div+css背景渐变色代码示例

PHP中文网
Libérer： 2017-03-22 10:12:03
original
4947 Les gens l'ont consulté

用CSS使DIV背景颜色渐变,适用于IE和Chrome等浏览器。

代码：

<style type="text/css"> 
.jbkeleyi{ 
height: 300px; 
width:100px; 
margin:0px auto; 
background-image: -moz-linear-gradient(top, #F00, #000); 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #00FF00), color-stop(1,#FF0000)); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#00FF00&#39;, endColorstr=&#39;#FF0000&#39;, GradientType=&#39;0&#39;); 
} 
</style> 
</head>
<body>
用CSS是p颜色渐变：<br />
<p class="jbkeleyi">从绿到红<br /><br />keleyi.com</p>
Copier après la connexion

效果图：

另外多浏览器兼容代码：

FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#b8c4cb,endColorStr=#f6f6f8);    /*IE*/

background:-moz-linear-gradient(top,#b8c4cb,#f6f6f8);/*火狐*/

background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#b8c4cb), to(#f6f6f8));/*谷歌*/

相关文章：

HTML5 Canvas：绘制渐变色

css按钮渐变色

css渐变色彩 省略标记 嵌入字体 文本阴影的详细介绍

Étiquettes associées：
css div
source：php.cn
Article précédent：JS+CSS制作的DIV层最小化和随意拖拽排序功能_html/css_WEB-ITnose Article suivant：css笔记一：如何令两个div并排显示_html/css_WEB-ITnose
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
Conversion automatique PX en erreur REM  <style>html {   taille de police : calc(100vw / 3,75);      }body {    taille de la...
Depuis 2024-04-16 09:34:16
0
0
4687
Pourquoi l'omission de 0 ms de veille interrompt-elle mes transitions CSS ? J'essaie d'implémenter une animation FLIP pour voir si je la comprends bien. Dans ce codep...
Depuis 2024-04-06 16:29:50
0
2
490
Masquer/afficher le div en cliquant et en faisant défiler Je souhaite créer un formulaire de recherche caché qui apparaît lorsque nous cliquons sur ...
Depuis 2024-04-06 12:20:46
0
1
386
Comment puis-je faire correspondre la largeur du texte à la largeur d'une image/titre de taille dynamique ? Voir ce codepen : https://codepen.io/allen-houng/pen/XGMjMr?editors=1100#0<div><i...
Depuis 2024-04-06 10:04:43
0
2
386
Pourquoi l'info-bulle fonctionne-t-elle toujours après la suppression du lien ? Ce n'est que lorsque je supprime le lien que je vois la balise div avec l'info-bulle. Quel...
Depuis 2024-04-05 09:51:08
0
1
1419
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！