mydy.net
当前位置:首页 >> Css颜色渐变 >>

Css颜色渐变

CSS3支持颜色渐变,但目前主流浏览器对CSS3支持都不完全,甚至不支持.所以你可以使用背景图片来做,你要竖向渐变,可以将图片切成宽1px的背景,然后设置这个DIV的背景平铺.如:background:url(bg.gif) left right repeat-x;

线性渐变 - 从上到下(默认情况下)#grad {background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> div{ /*线性渐变*/ width:300px; height:150px; background:red; /* 一些不支持背景渐变的浏览器 */ background:-moz-linear-

CSS里有滤镜功能 FILTER:alpha(opacity=30 finishopacity=0 style=1) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=1); 不过该滤镜只支持IE,不支持FF,而且大部分的滤镜都只支持IE,貌似只有透明度在FF中受支持,而且支持的方式跟IE中也不一样 .

1. CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡.2. CSS3 定义了两种类型的渐变(gradients):线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向与径向渐变(Radial Gradients)- 由它们的中心定

线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向实例从上到下的线性渐变:#grad { background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */ background: -moz-

使用CSS3的border-radius属性,如果你设置了border的宽度是X px,那么你就可以在这个border上使用X种颜色,每种颜色显示1px的宽度.如果说你的border的宽度是10个像素,但是只声明了5或6中颜 色,那么最后一个颜色将被添加到剩下的宽度.

兼容多浏览器就要为每一个浏览器写对应的 CSS,太低版本的浏览器只能使用图片做背景.下面是当前五大浏览器对 gradient 的支持<style type="text/css" media="screen">#gradient { width: 200px; height: 200px; /* 如果浏览器不支持渐变

要得上面的线性渐变效果,我们这样去定义CSS3样式: background-image: -moz-linear-gradient(top, #8fa1ff, #3757fa); /* Firefox */ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ff4f02), color-stop(1, #8f2c00)); /*

<table cellpadding="0" cellspacing="0" width="72%" height="30" border="0"> <tr> <td width="33%" height="300" style="filter:progid:DXImageTransform.Microsoft.Gradient (startColorStr='#FFFFFF', endColorStr='#3568CC',

网站首页 | 网站地图
All rights reserved Powered by www.mydy.net
copyright ©right 2010-2021。
内容来自网络,如有侵犯请联系客服。zhit325@qq.com