正文
css框颜色渐变搭配,css如何设置渐变边框样式
小程序:扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序
【扫一扫了解最新限行尾号】
复制小程序
如何用css使边框颜色渐变
使用CSS3的border-radius属性,如果你设置了border的宽度是X px,那么你就可以在这个border上使用X种颜色,每种颜色显示1px的宽度。如果说你的border的宽度是10个像素,但是只声明了5或6中颜 色,那么最后一个颜色将被添加到剩下的宽度。
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的背景颜色从红色到白色渐变。
怎样用css实现网页背景颜色渐变
CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡。
CSS3 定义了两种类型的渐变(gradients):线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向与径向渐变(Radial Gradients)- 由它们的中心定义
线性渐变:
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); /* 标准的语法 */
}
如何CSS实现网页背景三种颜色渐变效果?
页面背景颜色渐变可以分为四个部分
一、从上往下渐变:
body{
FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffffff,endColorStr=#000000);
}
二、从左上至右下渐变:
body{
FILTER: Alpha( style=1,opacity=25,finishOpacity=100,
startX=50,finishX= 100,startY=50,finishY=100);
background-color: skyblue;
}
三、从左往右渐变:
body{
FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=#ffffff,endColorStr=#000000);
}
四、从上往下渐变:
style="filter:progid:DXImageTransform.microsoft.gradient(gradienttype=0,startColorStr=blue,endColorStr=white);"
下面是整合的完整格式:
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""
html xmlns=""
head
meta http-equiv="Content-Type" content="text/html; charset=gb2312" /
title背景渐变/title
style type="text/css"
!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
--
/style/head
body
table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0"
tr
td height="600" style="filter:progid:DXImageTransform.microsoft.gradient(gradienttype=0,startColorStr=blue,endColorStr=white);"nbsp;/td
/tr
/table
/body
/html
如果是在同一个页面里面显示多重渐变效果,可以定义每个渐变的width和height。
CSS怎样实现背景颜色渐变
background:-webkit-gradient(linear ,10% 10%,100% 100%,
color-stop(0.14,rgb(255,0,0)),
color-stop(0.5,rgb(255,255,0)),
color-stop(1,rgb(0,0,255)) );
第一个参数:表示的是渐变的类型
linear线性渐变
第二个参数:分别对应x,y方向渐变的起始位置
第三个参数:分别对应x,y方向渐变的终止位置
第四/五/N个参数:设置渐变的位置及颜色
(2)第二种写法:这种写法比较简单,而且效果比较自然
background:-webkit-gradient(linear, 0 0, 0 100%, from(#2074af), to(#2c91d2));
第一个参数:表示的是渐变的类型
linear线性渐变
第二个参数:分别对应x,y方向渐变的起始位置
第三个参数:分别对应x,y方向渐变的终止位置
第四个参数:设置了起始位置的颜色
二.Mozilla浏览器
(1)第一种写法:
background:-moz-linear-gradient(10 10 90deg,
rgb(25,0,0) 14%,
rgb(255,255,0) 50%,
rgb(0,0,255) 100%);
第一个参数:设置渐变起始位置及角度
第二/三/四/N个参数:设置渐变的颜色和位置
(2)第二种写法:这种写法比较简单,而且效果比较自然
background:-moz-linear-gradient(top, #FFC3C8,#FF9298);
第一个参数:设置渐变的起始位置
第二个参数:设置起始位置的颜色
第三个参数:设置终止位置的颜色
三.IE 浏览器
IE浏览器实现渐变只能使用IE自己的滤镜去实现
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#00ffff,endColorstr=#9fffff,grandientType=1);
第一个参数:渐变起始位置的颜色
第二个参数:渐变终止位置的颜色
第三个参数:渐变的类型
0 代表竖向渐变 1 代表横向渐变
注意:这里设置背景的时候不需要给background设置,直接用filter即可,不要和其他的浏览器混淆
第五个参数:设置了终止位置的颜色
代码演示:
效果图:
代码:
效果:
关于css框颜色渐变搭配和css如何设置渐变边框样式的介绍到此就结束了,不知道你从中找到你需要的信息了吗 ?如果你还想了解更多这方面的信息,记得收藏关注本站。