展开全部
额~ 帮你说下吧~
首先你上面的那个边框是存在效果的，有两种CSS2.0做不出来的效果，一是圆角，二是颜色变化。
当然颜色变化可以用别的方法实现，如果是CSS3.0 的话就都可以做出来，但是不同浏览器对CSS3.0支持程度不一样，其中做这个最方便的就是Firefox， 代码如下：
<!DOCTYPE html>
<html>
<head>
<title>Border in CSS3.0</title>
<style>
#box {
width:300px;
height:200px;
border:solid 4px #f4bc44;
border-radius:3px; /* 圆角，印象中原来火狐要用 -moz-border-radius:3px; 我这个是4.0+ 的，这样也可以，没有以前的版本了，没试 */
/* 下面这四句就是用来定义边框颜色变化的，不明白的话可以自己试着换些颜色看，Firefox 3.5 及以上版本支持，建议自己在FF里面看下效果 */
-moz-border-top-colors:#ffdd90 #ffdd90 #ffdd90 #f4bc44;
-moz-border-right-colors:#ffdd90 #ffdd90 #ffdd90 #f4bc44;
-moz-border-bottom-colors:#ffdd90 #ffdd90 #ffdd90 #f4bc44;
-moz-border-left-colors:#ffdd90 #ffdd90 #ffdd90 #f4bc44;
}
</style>
</head>
<body>
<div id="box">
</div>
</body>
</html>
webkit 内核的浏览器对CSS3.0支持的很好，但是很遗憾还不支持 border-colors属性，所以在Chrome或者Safari里面要想别的办法了，代码如下（opera 里面也可以这样做）：
<!DOCTYPE html>
<html>
<head>
<title>Border in CSS3.0</title>
<style>
#box {
width:300px;
height:200px;
border:solid 3px #ffdd90;
border-radius:3px;
}
#inner {
width:298px;
height:198px;
border:solid 1px #f4bc44;
}
</style>
</head>
<body>
<div id="box">
<div id="inner">
</div>
</div>
</body>
</html>
CSS3.0 还有一个方法就是 border-image 也很放。
IE家族就很恶心了，这种效果目前还只能用图片替代。用图片做背景。当然还要考虑背景的自适应问题，很麻烦，你可以百度一下。
首先你上面的那个边框是存在效果的，有两种CSS2.0做不出来的效果，一是圆角，二是颜色变化。
当然颜色变化可以用别的方法实现，如果是CSS3.0 的话就都可以做出来，但是不同浏览器对CSS3.0支持程度不一样，其中做这个最方便的就是Firefox， 代码如下：
<!DOCTYPE html>
<html>
<head>
<title>Border in CSS3.0</title>
<style>
#box {
width:300px;
height:200px;
border:solid 4px #f4bc44;
border-radius:3px; /* 圆角，印象中原来火狐要用 -moz-border-radius:3px; 我这个是4.0+ 的，这样也可以，没有以前的版本了，没试 */
/* 下面这四句就是用来定义边框颜色变化的，不明白的话可以自己试着换些颜色看，Firefox 3.5 及以上版本支持，建议自己在FF里面看下效果 */
-moz-border-top-colors:#ffdd90 #ffdd90 #ffdd90 #f4bc44;
-moz-border-right-colors:#ffdd90 #ffdd90 #ffdd90 #f4bc44;
-moz-border-bottom-colors:#ffdd90 #ffdd90 #ffdd90 #f4bc44;
-moz-border-left-colors:#ffdd90 #ffdd90 #ffdd90 #f4bc44;
}
</style>
</head>
<body>
<div id="box">
</div>
</body>
</html>
webkit 内核的浏览器对CSS3.0支持的很好，但是很遗憾还不支持 border-colors属性，所以在Chrome或者Safari里面要想别的办法了，代码如下（opera 里面也可以这样做）：
<!DOCTYPE html>
<html>
<head>
<title>Border in CSS3.0</title>
<style>
#box {
width:300px;
height:200px;
border:solid 3px #ffdd90;
border-radius:3px;
}
#inner {
width:298px;
height:198px;
border:solid 1px #f4bc44;
}
</style>
</head>
<body>
<div id="box">
<div id="inner">
</div>
</div>
</body>
</html>
CSS3.0 还有一个方法就是 border-image 也很放。
IE家族就很恶心了，这种效果目前还只能用图片替代。用图片做背景。当然还要考虑背景的自适应问题，很麻烦，你可以百度一下。
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
如果做网页格式：用div+css直接赋予border宽度和颜色，边框就出来了（软件dreamweaver）。
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
