图片的圆角边框，

rushly 2010-12-14 09:58:21 
.test:hover img {

 border: 1px solid green;

}


     <a href="#" class="test">

			<img id="t" src="Edit/query.gif" 

			border="0" width="120" height="29"/>

	</a>



怎么把该图片的边框变成圆角的
...全文
601 20 打赏 收藏 转发到动态 举报
写回复
用AI写文章
20 条回复
切换为时间正序
请发表友善的回复…
发表回复
softwarexiang120 2010-12-15
  • 打赏
  • 举报
 回复
圆角都是图片拼起来的。
rushly 2010-12-15
  • 打赏
  • 举报
 回复 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title></title>

	

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

    <meta http-equiv="description" content="this is my page">

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

<style type="text/css">

.a1 {

	margin: 0 4px;

	background: #00F5FF;

	height: 1px;

	overflow: hidden;

}



.a2 {

	margin: 0 2px;

	border: 2px solid #00F5FF;

	border-width: 0 2px;

	background: #E1E7E9;

	height: 1px;

	overflow: hidden;

}

.a3 {

	margin: 0 1px;

	border: 2px solid #00F5FF;

	border-width: 0 1px;

	background: #E1E7E9;

	height: 1px;

	overflow: hidden;

}

.a4 {

	margin: 0 1px;

	border: 2px solid #00F5FF;

	border-width: 0 1px;

	background: #E1E7E9;

	height: 1px;

	overflow: hidden;

}

.m1 {

	background: #E1E7E9;

	border: 2px solid #00F5FF;

	border-width: 0 1px;

}

.m2 {

	background: #FFF;

	margin: 0 0.5px;

	font-size: 0.5px;

	font-family: Verdana;

	color: #333;

	padding: 0.5px 0.5px;

	overflow: hidden;

}

.b1 {

	margin: 0 1px;

	border: 2px solid #00F5FF;

	border-width: 0 1px;

	background: #E1E7E9;

	height: 1px;

	overflow: hidden;

}

.b2 {

	margin: 0 1px;

	border: 2px solid #00F5FF;

	border-width: 0 2px;

	background: #E1E7E9;

	height: 1px;

	overflow: hidden;

}

.b3 {

	margin: 0 2px;

	border: 2px solid #00F5FF;

	border-width: 0 2px;

	background: #E1E7E9;

	height: 1px;

	overflow: hidden;

}

.b4 {

	margin: 0 4px;

	background: #00F5FF;

	height: 1px;

	overflow: hidden;

}

</style>    

<script type="text/javascript">

function atQuery(){

  alert(1);

}

function addCss(){

	document.getElementById('a1').setAttribute( "className", "a1"); 

	document.getElementById('a2').setAttribute( "className", "a2"); 

	document.getElementById('a3').setAttribute( "className", "a3"); 

	document.getElementById('a4').setAttribute( "className", "a4"); 

	document.getElementById('m1').setAttribute( "className", "m1"); 

	document.getElementById('m2').setAttribute( "className", "m2"); 

	document.getElementById('b1').setAttribute( "className", "b1"); 

	document.getElementById('b2').setAttribute( "className", "b2"); 

	document.getElementById('b3').setAttribute( "className", "b3"); 

	document.getElementById('b4').setAttribute( "className", "b4"); 

}



function deleteCss(){

	document.getElementById('a1').setAttribute( "className", ""); 

	document.getElementById('a2').setAttribute( "className", ""); 

	document.getElementById('a3').setAttribute( "className", ""); 

	document.getElementById('a4').setAttribute( "className", ""); 

	document.getElementById('m1').setAttribute( "className", ""); 

	document.getElementById('m2').setAttribute( "className", ""); 

	document.getElementById('b1').setAttribute( "className", ""); 

	document.getElementById('b2').setAttribute( "className", ""); 

	document.getElementById('b3').setAttribute( "className", ""); 

	document.getElementById('b4').setAttribute( "className", ""); 

}

</script>

  </head>

  

  <body>

 <table>

 <tr>

 <td >

<div id="a1"></div>

<div id="a2"></div>

<div id="a3"></div>

<div id="a4"></div>

<div id="m1">

	<div id="m2">

						 <a> <img id="tableQuery" src="Edit/tableQuery.gif"

					    	onmouseover="addCss()" onmouseout="deleteCss()" border="0"

					    	onclick="atQuery()" /> </a>

	</div>

</div>

<div id="b1"></div>

<div id="b2"></div>

<div id="b3"></div>

<div id="b4"></div> 

</td>

</tr>

</table>

  </body>

</html>
这个总算有点效果了，，但是我想把页面上的<a>标签上下的那些<div>也在js里加入。为什么从js加入时边框左右不会出现呢。。百思不得其解。
leehuat 2010-12-15
  • 打赏
  • 举报
 回复 


  在设置圆角的div里面

加上

overflow:hidden;
gentle_sword 2010-12-15
  • 打赏
  • 举报
 回复
正解
[Quote=引用 1 楼 daiyaochu 的回复:]
HTML code

<style type="text/css">
body { text-align: center; font: 12px Arial normal; }
.frame-block { margin: 0 auto; position: relative; height:500px; width: 335px; }
.frame-block span { backg……
[/Quote]
longlongago2000 2010-12-15
  • 打赏
  • 举报
 回复
圆角可以用div+css叠起来，不一定要用图片的说
rushly 2010-12-14
  • 打赏
  • 举报
 回复
.....
daiyaochu 2010-12-14
  • 打赏
  • 举报
 回复 


<style type="text/css">

body { text-align: center; font: 12px Arial normal; }

.frame-block { margin: 0 auto; position: relative; height:500px; width: 335px; }

.frame-block span { background: url(/uploadfile/frame.png) no-repeat center top; height:500px; width: 335px; display: block; position: absolute; }

span { behavior: url(/uploadfile/iepngfix.htc) }



 



<div class="frame-block"> <span></span> <img src="/uploadfile/sample.jpg" /> </div>
碧海情天-赵亮 2010-12-14
  • 打赏
  • 举报
 回复
或者CSS或者JS。前者容易存在兼容问题，后者效率上差点（不过有很多插件，基本都能解决兼容问题）。
只能作一些选择：面向的用户的浏览器情况？此页面和其它会用到的页面对于效率的要求。
rushly 2010-12-14
  • 打赏
  • 举报
 回复
[Quote=引用 11 楼 dalmeeme 的回复:]
这根页面响应速度有什么关系？被遮罩的和遮罩的都是一起加载的，遮罩的就是单色的gif图片，一般只有几百个字节而已。
[/Quote]
其实我搞不清楚，别人叫我改的，没办法。开始还以为很简单呢。。哈哈
rushly 2010-12-14
  • 打赏
  • 举报
 回复
[Quote=引用 12 楼 yuxh81 的回复:]
帮顶！！！

同求解决方案，我目前用的是类似于“三明治”的方法！
较为不方便，关键是宽度（或高度）不能自适应。。。
[/Quote]
用你那方法，图片onclick怎么调用js里的函数啊，我刚刚试了下没反应。
yuxh81 2010-12-14
  • 打赏
  • 举报
 回复
帮顶！！！

同求解决方案，我目前用的是类似于“三明治”的方法！
较为不方便，关键是宽度（或高度）不能自适应。。。
dalmeeme 2010-12-14
  • 打赏
  • 举报
 回复
这根页面响应速度有什么关系？被遮罩的和遮罩的都是一起加载的，遮罩的就是单色的gif图片，一般只有几百个字节而已。
rushly 2010-12-14
  • 打赏
  • 举报
 回复
[Quote=引用 4 楼 dalmeeme 的回复:]
最简单的方式，用一张gif的透明图片遮罩。

HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style>
img#img1 {
……
[/Quote] 以前是用鼠标事件的移进和移出事件时换了一张有圆角边框的图片。为了加快页面响应速度，要求用样式什么的解决。
NetX行者 2010-12-14
  • 打赏
  • 举报
 回复
div +css 圆角实现：

实现原理：

/*图片偏移定位--上面部分*/
.sharp b.b2{background-position:-4px top;}
.sharp b.b3{background-position:-2px -1px;}
.sharp b.b4{background-position:-1px -2px;}

再看看下面两个圆角的样式设置，下面部分和上面部分是相互对应的。

/*图片偏移定位--下面部分*/
.sharp b.b7{background-position:-4px bottom;}
.sharp b.b6{background-position:-2px bottom;}
.sharp b.b5{background-position:-1px bottom;}

不同的图片调用样式：

/*颜色方案一,绿色风格----------------------------------------*/
/*边框色*/
.color1 .b2,.color1 .b3,.color1 .b4,.color1 .b5,.color1 .b6,
.color1 .b7,.color1 .content{border-color:#262626;}
.color1 .b1,.color1 .b8{background:#262626;}
/*图片路径*/
.color1 .b2,.color1 .b3,.color1 .b4,.color1 h3,.color1 .b5,.color1 .b6,.color1 .b7,.color1 .content{background:url(image/1.jpg) no-repeat;}

参考网址：
http://book115.com/a/Webqianduan/HTML_CSS/2010/1213/146.html
ajccom 2010-12-14
  • 打赏
  • 举报
 回复
FF也有自己的圆角实现方式 参考谷歌HK的首页边框圆角
http://www.google.cn/

-moz-border-radius:20px 20px 20px 20px

LZ也可以下个圆角JS 调用这份JS完成圆角布局
xiaobonetc 2010-12-14
  • 打赏
  • 举报
 回复
.............
linshenxiu 2010-12-14
  • 打赏
  • 举报
 回复
最好用图片。用style控制好像有一个css滤镜可以实现，但是仅IE支持。
mokson 2010-12-14
  • 打赏
  • 举报
 回复
我见过网上的圆角效果，大都是将圆角做成小图片，拼接上去。
dalmeeme 2010-12-14
  • 打赏
  • 举报
 回复
最简单的方式，用一张gif的透明图片遮罩。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<style>

img#img1 {

    float:left;

    width:300px;

    height:300px;

    display:block;

}

img#img2 {

    float:left;

    margin-left:-300px;   

    width:300px;

    height:300px;

    display:block;

}

</style>

</head>

<body>

<img id="img1" src="1.jpg"/><img id="img2" src="a.gif"/>

</body>

</html>

其中a.gif是一张透明图片（四个角不透明）。这样做的优点是简单，缺点是不能直接发生img1的一些鼠标事件，比如onmouseover、onclick等。所以可以采用四个透明gif，用绝对定位的方法仅遮罩四个角，这样鼠标事件也可以正常发生。楼主可以自己做一下。
yixinpai 2010-12-14
  • 打赏
  • 举报
 回复
无论table还是div+css，圆角都是粘上去的，拼凑起来的。
css 图片圆角边框的效果
css用图片实现圆角边框的效果 css用图片实现圆角边框的效果
兼容IE6的图片圆角边框CSS
纯CSS实现的图片圆角边框效果,兼容IE6.
css实现圆角边框，不用图片
一个用css实现的圆角边框实例，有兴趣的可以研究研究哦
安卓头像制作图片圆角剪裁相关-android以不规则图片为边框切割另外的图片.rar
android以不规则图片为边框，切割另外的图片.rar,太多无法一一验证是否可用，程序如果跑不起来需要自调，部分代码功能进行参考学习。
Android自定义Iphone风格的圆角边框开关按钮
Android自定义Iphone风格的圆角边框开关按钮，用xml实现，无图片资源
CSS

61,112

社区成员

60,730

社区内容

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章