css设置渐变色,CSS定义渐变色
我们提供的服务有:网站建设、网站制作、微信公众号开发、网站优化、网站认证、安龙ssl等。为上千余家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务,是有科学管理、有技术的安龙网站制作公司
1,CSS定义渐变色
纯css渐变是css3里面的,低版本ie不认,如果你不在乎的话,百度:css3渐变在线生成直接进去生成后把代码复制到你的css,代码不能简短,复制的渐变就得有很多代码,这几行都闲多的话你还是老老实实切图片得了。2,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); /* 标准的语法 */}3,如何用css使边框颜色渐变
background-color:#a0a #909 #808 #707 #606 #505 #404 #303;background -color 属性的参数很简单,可以是任意合法的颜色值或颜色值列表,当background -color只设置了一个颜色时,那么就是单色的。如果设置了n中颜色而边框宽度也为n的话那么每一个像素显示一种颜色,如果边框宽度值大于颜色数值时,最后一种颜色用于显示剩下的宽度。一、CSS3 中的边框颜色 这里是一个10px宽的标准边框和边框颜色: #borderColor 二、有圆角的边框颜色 #borderColorCorner { border: 10px solid #dedede; -moz-border-radius: 15px; -moz-border-bottom-colors: #303 #404 #606 #808 #909 #A0A; -moz-border-top-colors: #303 #404 #606 #808 #909 #A0A; -moz-border-left-colors: #303 #404 #606 #808 #909 #A0A; -moz-border-right-colors: #303 #404 #606 #808 #909 #A0A; padding: 15px 25px; height: inherit; width: 590px; }如下面的例子:border-style:solid; border-width:1px; border-color:#000下面是设置必要掌握的代码:border-color:#000(设置4边边框颜色为黑色)border-color:+颜色值,即可设置对象边框颜色border-left-color:#000 设置左边框颜色为黑色border-right-color:#000 设置右边框颜色为黑色border-top-color:#000 设置上边框颜色为黑色border-bottom-color:#000 设置下边框颜色为黑色4,怎么用css设置DIV背景色渐变显示
在Mozilla 下 background: -moz-linear-gradient( top,#ccc,#000);参数说明1,起点位置top 是从上到下,left是从左到右,left top是左上到右下2,开始颜色,3,结束颜色在Webkit下-webkit-linear-gradient(top,#ccc,#000);参数与mozilla一致在 Opera 下background: -o-linear-gradient(top,#ccc, #000);数与mozilla一致更多的参数应用可以去度娘查询,有很详细参数使用示例.1. css3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡。2. css3 定义了两种类型的渐变(gradients):线性渐变(linear gradients)- 向下/向上/向左/向右/对角方向与径向渐变(radial gradients)- 由它们的中心定义3. 线性渐变: 3.1、从上到下的线性渐变:#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); /* 标准的语法 */ } 3.2、从左到右的线性渐变:#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); /* 标准的语法 */ }3.3、线性渐变 - 对角:#grad background: -webkit-linear-gradient(left top, red , blue); /* safari 5.1 - 6.0 */ background: -o-linear-gradient(bottom right, red, blue); /* opera 11.1 - 12.0 */ background: -moz-linear-gradient(bottom right, red, blue); /* firefox 3.6 - 15 */ background: linear-gradient(to bottom right, red , blue); /* 标准的语法 */ }4.径向渐变:4.1、颜色结点均匀分布的径向渐变:#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); /* 标准的语法 */ }4.2、颜色结点不均匀分布的径向渐变::#grad background: -webkit-radial-gradient(red 5%, green 15%, blue 60%); /* safari 5.1 - 6.0 */ background: -o-radial-gradient(red 5%, green 15%, blue 60%); /* opera 11.6 - 12.0 */background: -moz-radial-gradient(red 5%, green 15%, blue 60%); /* firefox 3.6 - 15 */ background: radial-gradient(red 5%, green 15%, blue 60%); /* 标准的语法 */ }4.3、形状为圆形的径向渐变:#grad background: -webkit-radial-gradient(circle, red, yellow, green); /* safari 5.1 - 6.0 */ background: -o-radial-gradient(circle, red, yellow, green); /* opera 11.6 - 12.0 */ background: -moz-radial-gradient(circle, red, yellow, green); /* firefox 3.6 - 15 */ background: radial-gradient(circle, red, yellow, green); /* 标准的语法 */ }5:望采纳
网站栏目:css设置渐变色,CSS定义渐变色
网站路径:
http://scyanting.com/article/iojhcc.html