html中如何让边框颜色渐渐变深

html中如何让边框颜色渐渐变深,第1张

我是建一个三行一例的表格,用如下代码替换<TD></td><td style="BORDER-RIGHT: #fffffff 0px solidBORDER-TOP: #000000 0px solidFILTER: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#000000', endColorStr='#ffffff', gradientType='0')"></td>-------------------------------------------------------------------------------------------------------startColorStr='#000000' 渐变色起始色endColorStr='#ffffff' 渐变色终止色。gradientType='0' 参数为0,1,2三种效果,也可以是左右渐变色。至于要达到你的效果,把上下两行的行高定小一点。 删了就行。调整一下表格即可,没什么难度。如整站多处用渐变色表格的话建议用外链CSS文件,不用重复多次代码,只用引用CSS就行。' -----------------------------------------------------------------------------------------------------------------调试页面DW8做的,全部代码如下,请验证。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />

<title>无标题文档</title>

<style type="text/css">

</style>

</head><body>

<table width="200" cellspacing="0">

<tr>

<td style="BORDER-RIGHT: #fffffff 0px solidBORDER-TOP: #000000 0px solidFILTER: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#ffffff', endColorStr='#000000', gradientType='0')"></td>

</tr>

<tr>

<td bgcolor="#000000"><font color=#FFFFFF>网站导航</font></td>

</tr>

<tr>

<td style="BORDER-RIGHT: #fffffff 0px solidBORDER-TOP: #000000 0px solidFILTER: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#000000', endColorStr='#ffffff', gradientType='0')"></td>

</tr>

</table>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style type="text/css">

.demo{

width:200px

height:10px

background:-webkit-linear-gradient(left, rgb(80,80,255,0.2) , #fff) /* Safari 5.1 - 6.0 */

background: -o-linear-gradient(left, rgb(80,80,255,0.2) , #fff)/* Opera 11.1 - 12.0 */

background: -moz-linear-gradient(left, rgb(80,80,255,0.2) , #fff)/* Firefox 3.6 - 15 */

background: linear-gradient(to left, rgb(80,80,255,0.2) , #fff)/* 标准的语法 */

}

</style>

</head>

<body>

<div class="demo" ></div>

</body>

</html>


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/6274249.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-19
下一篇 2023-03-19

发表评论

登录后才能评论

评论列表(0条)

保存