1.css中颜色渐变怎么写
线性渐变 - 从上到下(默认情况下)
#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 */
background: linear-gradient(red, blue); /* 标准的语法 */
}
从左到右的线性渐变:
#grad {
background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(to right, red , blue); /* 标准的语法 */
2.css 如何实现 颜色的渐变
需要准备的材料分别有:电脑、浏览器、html编辑器。
1、首先,打开html编辑器,新建html文件,例如:index.html。
2、在index.html中的<style>;标签中,输入css代码:
div {width: 200px;height: 150px;background: linear-gradient(red, white);}
3、浏览器运行index.html页面,此时td中的div的背景颜色从红色到白色渐变。
3.怎么用CSS 写出表格背景颜色渐变
也许是我学的还不够多,暂时不知道该怎么用CSS样式写出来表格背景颜色为渐变颜色,但是我知道怎么用css样式定义出表格的背景图片;
其实很简单,你将该图片简便区域切宽度为1像素的一小竖条就够了,然后在该表格框内定义样式:
style="height:所切背景图片高度; background:url(该图的路径) repeat-x;“
即可 也就是定义一个高度跟该简便图片一样高的<td>;然后给它添加背景图片,然后横向平铺过去;
4.css背景颜色怎么实现渐变效果
线性渐变(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-linear-gradient(red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(red, blue); /* 标准的语法 */
}
-----------------------------------------------------------------------
径向渐变(Radial Gradients)- 由它们的中心定义
实例
颜色结点均匀分布的径向渐变:
#grad {
background: -webkit-radial-gradient(red, green, blue); /* Safari 5.1 - 6.0 */
background: -o-radial-gradient(red, green, blue); /* Opera 11.6 - 12.0 */
background: -moz-radial-gradient(red, green, blue); /* Firefox 3.6 - 15 */
background: radial-gradient(red, green, blue); /* 标准的语法 */
}
5.CSS中的字体怎么渐变颜色啊
css3中的transition可以实现文字颜色,容器背景等的过渡效果,但ie10以下版本都是不支持的!
<style>
a {font-size:24px;font-weight:bold;
-moz-transition:all .5s ease-in;
-webkit-transition:all .5s ease-in;
-o-transition:all .5s ease-in;
-ms-transition:all .5s ease-in;
transition:all .5s ease-in;}
a:link,a:visited,a:active{color:#000;}
a:hover{color:#f00;}
</style>
<a href="">;颜色transition</a>
详细用法自己查一查吧!!
6.div背景颜色怎样渐变 css实现div层背景颜色渐变代码
借助background-position实现渐变过渡
background-image虽然不支持CSS3 transition过渡,但是background-position支持啊,于是,通过控制背景位置,我们是可以实现渐变过渡效果的。
实现效果如下(鼠标hover):
借助background-color实现渐变过渡
background-image虽然不支持CSS3 transition过渡,但是background-color支持啊,于是,通过控制背景颜色,和一个颜色呈现技巧,我们也是可以实现渐变过渡效果的。
鼠标hover前后效果对比:
借助伪元素和opacity实现渐变过渡
借助伪元素创建变换后的渐变效果,通过改变覆盖的渐变的opacity透明度变化实现渐变过渡效果。
下图为hover之后的效果:
相关代码如下:
扩展资料:mozilla 使用 CSS transitions
转载请注明出处育才学习网 » css颜色渐变怎么写