`
wolf880805
  • 浏览: 7846 次
  • 性别: Icon_minigender_1
  • 来自: 济南
文章分类
社区版块
存档分类
最新评论

div圆角

CC++C#CSSJavaScript 
阅读更多 
.login .c_left {
border-right:1px solid #CCCCCC;
font-size:12px;
font-weight:bold;
vertical-align:top;
width:100px;
}
.login .no_line {
border-top:medium none;
}
.login .r_name {
background:none repeat scroll 0 0 #FFFFFF;
font-size:12px;
font-weight:bold;
}

.login td {
border-top:1px solid #CCCCCC;
color:#333333;
font:11px/20px arial;
padding:5px 10px;
}


/*#############################################################
Name: b_RoundCurve Css圆角框组件--冰极峰
Version: 1.0
Author: biny
Email:szbiny@163.com
冰极峰博客地址：http://www.cnblogs.com/binyong
你可以免费使用和修改代码，但请保留完整的版权信息。

有如下五种调用方法：
	b_RoundCurve("bottom","#F8B3D0","#FFF5FA",1);//普通圆角框
	b_RoundCurve("left1","#AE0474","#FB7D3F",3,"h3","","image/bg5.gif");//标题用背景图片
	b_RoundCurve("right1","#863313","#84D4CA",3,"h3","#BAB556");//标题只用纯色背景
	b_RoundCurve("right2","orange","",3,"h3","");//标题不带背景色
	b_RoundCurve("top","#4C7C9B","",4);//圆角背景图片
	b_RoundCurve("img","#999","#FFF5FA",2);//圆角IMG图片
#################################################################*/

/*
  圆角函数--Author: biny
  传递7个参数
  1.class类名
  2.边框色
  3.主体内容区背景色
  4.风格切换方式，从1-5，5种圆角框样式，针对不同环境使用。
  5.标题的html结构标签名
  6.标题背景色
  7.标题背景图片路径（和6是相斥的，两个选择一个）
*/
function b_RoundCurve(classname,b_c,bg_c,state,tagname,titlebg,titleimg){	
	var divs=getElementsByClassName(classname);
	for(var i=0;i<divs.length;i++){
		var obj=divs[i];
		var path=window.location.href;//当前页面的路径
		path=path.substring(0,path.lastIndexOf('/')+1);
		//b标签的通用样式
		var comstyle="height:1px; font-size:1px;overflow:hidden; display:block;";
		//b标签的结构样式
		var b1="margin:0 5px;";//和b8相同
		var b2="margin:0 3px;border-right:2px solid; border-left:2px solid;";//和b7相同
		var b3="margin:0 2px;border-right:1px solid; border-left:1px solid;";//和b6相同
		var b4="margin:0 1px;border-right:1px solid; border-left:1px solid;height:2px;";//和b5相同
		var content="border-right:1px solid;border-left:1px solid;overflow:hidden;position:relative;";
		var bgColor="background:"+bg_c+";";//背景色
		
		//img图片的背景定位
		var imgPos2="background-position:-4px top;";
		var imgPos3="background-position:-2px -1px;";
		var imgPos4="background-position:-1px -2px;";
		var conPos="background-position:left -4px;";
		var imgPos5="background-position:-1px bottom;";
		var imgPos6="background-position:-2px bottom;";
		var imgPos7="background-position:-4px bottom;";
		
		//定义一些变量，这些变量包含不同的样式，在各种风格中拼合组装
		var imgBgStr,imgPos3,imgPos4,conPos,imgPos5,imgPos6,imgPos7;
		var b_img2,b_img3,b_img4,b_img5,b_img6,b_img7,c_img,imgurl;
		
		//五种不同的风格切换
		if(state==1){//最通常使用的线框
		    //组装样式
			b_img2=bgColor;
			b_img3=bgColor;
			b_img4=bgColor;
			c_img=bgColor;
			b_img5=bgColor;
			b_img6=bgColor;
			b_img7=bgColor;
	    }
		if(state==2){//如果是img图片方式，则用背景模拟圆角,注意IMG标签必须显式指定宽高，否则在safari中显示不出来。
			var imgObj=divs[i].getElementsByTagName('img')[0];
			var imgheight=imgObj.height;//图片高度
			var contentheight=imgheight-10;//中间图片的高度
			var imgweight=imgObj.width;//图片宽度
			obj.style.width=(imgweight+2)+"px";
			var imgsrc=imgObj.src.replace(path,'');//图片文件的相当路径
			var imgBgStr="background:url("+imgsrc+") no-repeat;";
			//组装样式
			conPos="height:"+contentheight+"px;width:"+imgweight+"px;overflow:hidden;";	
			
			b_img2=imgBgStr+imgPos2;
			b_img3=imgBgStr+imgPos3;
			b_img4=imgBgStr+imgPos4;
			c_img=conPos;
			b_img5=imgBgStr+"background-position:-1px -"+ (imgheight-4)+"px;";
			b_img6=imgBgStr+"background-position:-2px -"+ (imgheight-2)+"px;";
			b_img7=imgBgStr+"background-position:-4px -"+ (imgheight-1)+"px;";
			imgurl=imgsrc;
		}
		if(state==3){//如果是带标题方式，又可分为两种情况，一种直接用背景色，一种是用背景图片方式
		    var objh3=obj.getElementsByTagName(tagname)[0];
			if(titleimg!=null){//标题带水平平铺的背景图片
				var bgimg="background:url("+titleimg+") repeat-x;";
				b_img2=bgimg+imgPos2;
				b_img3=bgimg+imgPos3;
				b_img4=bgimg+imgPos4;
				//标题栏样式
				objh3.style.background="url("+titleimg+") repeat-x left -4px";
				objh3.style.borderBottomColor=b_c;
			}
			else{//标题不带水平平铺的背景图片
				var bg_c="background:"+titlebg+";";//背景色
				b_img2=bg_c;
				b_img3=bg_c;
				b_img4=bg_c;
				//标题栏样式
				objh3.style.background=titlebg;
				objh3.style.borderBottomColor=b_c;
			}
			//组装样式
			c_img=bgColor;
			b_img5=bgColor;
			b_img6=bgColor;
			b_img7=bgColor;

		}
		if(state==4){//如果是背景图片方式，则。。。
			//先从样式表中获取背景图片的样式,要求加入图片的容器明确定义宽度和高度，和背景图片，这是用在JS用来搜寻的依据。
			var bgimg=getStyle(obj,"backgroundImage");
			var bgWidth=getStyle(obj,"width");
			bgimg=bgimg.replace(path,"");
			bgimg=bgimg.substring(4,bgimg.length);
			bgimg=bgimg.substring(0,bgimg.length-1);
			var bgimgheight=getStyle(obj,"height");//图片的高度
			
			bgimgheight=bgimgheight.replace("px","");
			var contentheight=bgimgheight-10;//中间图片的高度,包含上下边框2px宽度
			bgWidth=bgWidth.replace("px","");
			bgWidth=bgWidth-2;
			
			bgimg=bgimg.replace("url(\"","");
			bgimg=bgimg.replace("\")","");//获得背景图片的全部径。
			path=path.substring(0,(path.lastIndexOf('/')+1));//页面地址
			bgimg=bgimg.replace(path,"");
			imgBgStr="background:url("+bgimg+") no-repeat;";
			obj.style.background="none";//将原始的背景图片隐藏
			//组装样式
			b_img2=imgBgStr+imgPos2;
			b_img3=imgBgStr+imgPos3;
			b_img4=imgBgStr+imgPos4;
			c_img=imgBgStr+conPos+"height:"+contentheight+"px;width:"+bgWidth+"px;";
			
			//关键代码，特别是对图片的定位，需要知道图片的高度。
			b_img5=imgBgStr+"background-position:-1px -"+ (bgimgheight-4)+"px;";
			b_img6=imgBgStr+"background-position:-2px -"+ (bgimgheight-2)+"px;";
			b_img7=imgBgStr+"background-position:-4px -"+ (bgimgheight-1)+"px;";
		}
		if(state==2 || state==4){
			conDivHeight="";
	    }
		else{
			var H=getStyle(obj,"height");//获到容器的高度
			H=H.replace("px","");//去掉单位
			conDivHeight="height:"+(H-8)+"px";//容器的高度伪装成css中的设置的一样
		}
		/*创建一个容器结构体*/
		var rDivStr="<b style='"+ comstyle+b1+"background:"+b_c+"'></b>";
		rDivStr+="<b style='"+ comstyle+b2+"border-color:"+b_c+";"+b_img2+"'></b>";
		rDivStr+="<b style='"+ comstyle+b3+"border-color:"+b_c+";"+b_img3+"'></b>";
		rDivStr+="<b style='"+ comstyle+b4+"border-color:"+b_c+";"+b_img4+"'></b>";
		rDivStr+="<div style='"+content+"border-color:"+b_c+";"+c_img+conDivHeight+"'>";
		rDivStr+="@d_P";
		rDivStr+="</div>";
		rDivStr+="<b style='"+ comstyle+b4+"border-color:"+b_c+";"+b_img5+"'></b>";
		rDivStr+="<b style='"+ comstyle+b3+"border-color:"+b_c+";"+b_img6+"'></b>";
		rDivStr+="<b style='"+ comstyle+b2+"border-color:"+b_c+";"+b_img7+"'></b>";
		rDivStr+="<b style='"+ comstyle+"margin:0 5px;background:"+b_c+"'></b>";
		
		var htmlText=divs[i].innerHTML;
		if(state==2){
			var str1=htmlText.replace("src=\"","src=\"*");
			var strsplit1=str1.split('*')[0];
			var strsplit2=str1.split('*')[1];
			var url=strsplit2.substring(0,strsplit2.indexOf('\"'));
			htmlText=strsplit1+imgurl+"\" style='border:0px;position:absolute;top:-4px;left:0px;'/>";
		}
		rDivStr=rDivStr.replace('@d_P',htmlText);
		divs[i].innerHTML=rDivStr;//替换结构
	}
}

// 说明：准确获取指定元素 CSS 属性值
// 此函数的两个参数，elem为要获取的对象，name为样式属性，如“backgroundColor”
function getStyle( elem, name )
{
	//如果该属性存在于style[]中，则它最近被设置过(且就是当前的)
	if (elem.style[name])
	{
		return elem.style[name];
	}
	//否则，尝试IE的方式
	else if (elem.currentStyle)
	{
		return elem.currentStyle[name];
	}
	//或者W3C的方法，如果存在的话
	else if (document.defaultView && document.defaultView.getComputedStyle)
	{
		name = name.replace(/([A-Z])/g,"-$1");
		name = name.toLowerCase();
		//获取style对象并取得属性的值(如果存在的话)
		var s = document.defaultView.getComputedStyle(elem,"");
		return s && s.getPropertyValue(name);
	    //否则，就是在使用其它的浏览器
	}
	else
	{
		return null;
	}
}

/*根据类名获得对象
调用方法：var topicnum=getElementsByClassName("classname");
*/
function getElementsByClassName(searchClass, node,tag){  
	if(document.getElementsByClassName){return  document.getElementsByClassName(searchClass)}
	else{        
		node = node || document;        
		tag = tag || "*";        
		var classes = searchClass.split(" "),        
		elements = (tag === "*" && node.all)? node.all : node.getElementsByTagName(tag),        
		patterns = [],         
		returnElements = [],        
		current,         
		match;        
		var i = classes.length;       
		while(--i >= 0){patterns.push(new RegExp("(^|\\s)" + classes[i] + "(\\s|$)"));}        
		var j = elements.length;       
		while(--j >= 0){            
			current = elements[j];           
			match = false;            
			for(var k=0, kl=patterns.length; k<kl; k++){                
				match = patterns[k].test(current.className);                
				if (!match)  break;           
			} 
			if (match)  returnElements.push(current);        
		}        
		return returnElements;   
	} 
}

 

<!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/html; charset=utf-8" />
<title>无标题文档</title>
<link href="product.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="login" style="width:867px" >
<table cellspacing="0" cellpadding="0" border="0" width="866">
<tbody>
        <tr>
            <td colspan="2" class="r_name no_line">Round corner table</td>
        </tr>
        <tr>
            <td colspan="2">iPad</td>
        </tr>
        <tr>
            <td colspan="2" class="r_name">Input File Formats Supported</td>
        </tr>
        <tr>
            <td colspan="2">
            <p>DVD-Video, DVD folder, DVD IFO File DVD-Video, DVD folder, DVD IFO FileDVD-Video, DVD folder, DVD IFO FileDVD-Video, DVD folder, DVD IFO FileDVD-Video, DVD folder, DVD IFO FileDVD-Video, DVD folder, DVD IFO FileDVD-Video, DVD folder, DVD IFO FileDVD-Video, DVD folder, DVD IFO FileDVD-Video, DVD folder, DVD IFO FileDVD-Video, DVD folder, DVD IFO FileDVD-Video, DVD folder, DVD IFO FileDVD-Video, DVD folder, DVD IFO FileDVD-Video, DVD folder, DVD IFO FileDVD-Video, DVD folder, DVD IFO FileDVD-Video, DVD folder, DVD IFO FileDVD-Video, DVD folder, DVD IFO File</p>
          </td>
      </tr>
        <tr>
            <td colspan="2" class="r_name">Output File Formats Supported</td>
        </tr>
        <tr>
            <td width="124" class="c_left">Videos</td>
            <td width="742">MP4, MPEG-4, H.264, HD H.264</td>
      </tr>
        <tr>
            <td class="c_left">Audios</td>
            <td width="742">MP3, M4A, AAC</td>
      </tr>
        <tr>
            <td class="c_left">Images</td>
            <td width="742">BMP, GIF, JPEG, PNG</td>
      </tr>
    </tbody>
</table>
</div>
<script type="text/javascript" src="bRoundCurve%201.0.js"></script>
<script type="text/javascript">
 b_RoundCurve("login","#A0A0A4","#FFFFFF",1);//标题用背景图

 </script>
</body>
</html>

 

分享到：
| 扣得yeyan
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    JS封装DIV圆角Css样式

    JavaScript（JS）虽然主要负责动态交互，但在某些情况下，可以用于辅助实现CSS样式，例如封装DIV圆角样式。本文将深入探讨如何使用JS来封装和应用CSS圆角效果，并通过提供的压缩包文件中的示例进行解析。 首先，让...

    css+div圆角窗口

    "css+div圆角窗口"是指利用CSS技术来创建具有圆角边框的网页元素，通常这些元素被设计成类似窗口的形式，提供信息展示或交互功能。 在CSS3之前，要实现圆角效果，开发者需要借助图像或者复杂的JavaScript技巧。然而...

    div圆角兼容ie8

    在网页设计中，"div圆角兼容ie8"是一个关键的话题，涉及到CSS3中的圆角属性在老版本Internet Explorer（尤其是IE8）上的兼容性问题。IE8是微软推出的一个较为古老的浏览器版本，它并不完全支持CSS3的新特性，比如...

    让div圆角显示

    ### 让div圆角显示 在网页设计与开发过程中，为了提升用户体验以及视觉美观度，开发者经常需要对页面中的元素进行圆角处理。本篇将详细介绍如何通过CSS样式实现div元素的圆角显示，并深入探讨背后的原理和技术要点...

    JavaScript 制作div圆角

    JavaScript制作div圆角是网页开发中的常见需求，它可以通过CSS3的border-radius属性来实现，但在某些不支持此属性的老式浏览器中，我们可能需要借助JavaScript来达成目标。本篇文章将深入探讨如何利用JavaScript实现...

    超实用div圆角样式，无须图片

    传统的实现div圆角效果通常需要借助图像或CSS精灵图，但随着CSS3的出现，我们可以使用纯CSS来创建圆角效果，无需任何图片。这种方式不仅提高了效率，减少了HTTP请求，还能更好地适应响应式设计。以下是对"超实用div...

    还用jquery控件实现div圆角效果

    在提供的压缩包中，"jquery处理DIV圆角、方角（经典方法）"可能包含了更多关于如何使用jQuery实现不同边框效果的示例代码，包括如何在特定条件下切换div的圆角和方角。你可以查阅这个文件来深入了解和实践。 总结...

    div圆角样式.rar

    本资源“div圆角样式.rar”显然是关于如何通过CSS（层叠样式表）来实现`div`元素圆角边框的教程。在网页布局和设计中，将方形的`div`变为具有圆角的样式，不仅可以提升界面的美观性，还能让用户体验更加舒适，尤其在...

    CSS+DIV圆角

    现在，我们转向“CSS+DIV圆角横条效果”。这种效果通常是通过创建一个具有特定宽度和高度的DIV元素，并应用上述的`border-radius`属性来实现。例如，我们可以创建一个宽度较大而高度较小的横条，然后给它添加圆角...

    JS控制DIV圆角代码

    总的来说，实现JS控制的DIV圆角代码涉及了对不同浏览器特性的理解和利用，以及对JavaScript DOM操作的掌握。通过CSS3的`border-radius`、JavaScript库以及图像切片技术，我们可以使网页在新旧浏览器间保持一致的视觉...

    css+div圆角实例

    本主题聚焦于“css+div圆角实例”，这是一个关于如何使用CSS为div元素创建圆角效果的实践教程。JavaScript的引入则进一步扩展了这种效果的实现方式，使其更加动态和交互性更强。 首先，CSS3的border-radius属性是...

    div 圆角的应用很实用

    div 圆角

    点击弹出div圆角的遮罩层,可关闭

    在网页设计中，创建一个点击弹出的div圆角遮罩层是常见的交互效果，它通常用于展示模态对话框、提示信息或者加载内容。这个功能的实现涉及到HTML、CSS和可能的JavaScript技术。下面我们将详细讲解如何创建这样一个...

    无需图片实现div圆角

    ### 无需图片实现div圆角 #### 背景与目的 在网页设计中，圆角效果被广泛应用于各类元素中，以增加视觉吸引力并提升用户体验。传统的圆角实现方式通常依赖于背景图像，这种方式虽然直观，但在响应式布局、性能优化...

    用Css实现div圆角边框

    用div+css实现边框圆角,其实实现div圆角，有三种方法，也可以用圆角片来实现，还有一种技术，现在浏览器还不是很支持。

    国外一些源码,关于HTML,中的DIV圆角封装.

    此外，实现DIV圆角还有其他方法，如使用图片背景、CSS3的剪切（clip）属性，或者是早期的JavaScript库和jQuery插件。然而，随着CSS3的普及，这些方法已经逐渐被淘汰，因为它们在代码复杂性和性能上都不如纯CSS解决...

    实现div圆角的几种方式（有附件）

    本文将详细讲解实现div圆角的几种常见方法，主要基于CSS3技术。 首先，我们可以使用CSS3的`border-radius`属性来实现div的圆角效果。`border-radius`允许我们指定元素边框的每个角落的半径，从而创建出不同形状的...

    实现图片和DIV圆角显示的javascript

    总的来说，实现图片和div圆角显示的JavaScript技术涉及到HTML结构、CSS样式和JavaScript动态操作。在考虑兼容性和性能的同时，可以根据项目的具体需求选择合适的方法。在实际开发中，我们应优先使用CSS3的`border-...

    超多CSS Div圆角特效代码集.rar

    超多CSS Div圆角特效代码集，有DIV圆角，圆角菜单、圆角列表、圆角混合布局、圆角图片边框等，一共有10款圆角框效果，全部兼容ie8、火狐或Chrome浏览器，没有用到CSS3，传统CSS技术实现，是学习CSS的好资料。

Magicbox
Global site tag (gtag.js) - Google Analytics