一种圆角两层嵌套效果——迅微网络：建站学院—asp技术,php技术,asp.net,jsp技术,cgi技术,网页设计,图像动画,数据库,服务器,网页标准,域名主机……

您的位置：建站学院首页 >> 文章 >> 网页设计 >> CSS

一种圆角两层嵌套效果

效果图如下：

在不同部位点击打开右键菜单才能理解本作品的真正功能妙用

这是一个页面元素可编辑的DVML
VML效果目前只适合于IE浏览器

<HTML xmlns:v="urn:schemas-microsoft-com:vml">
<HEAD>
<META name="Gemeratpr" content="FlashVml(璀灿之星)4.5">
<META http-equiv="Content-Type" content="text/html;charset=gb2312">
<META name="KeyWords" content="我的作品,flashvml,璀灿之星,vml极道教程,vml,vmlflash,FYW,lshdic">
<TITLE>我的作品</TITLE>
<STYLE>
v\:*{behavior:url(#default#VML);position:absolute;}
.mlt{position:static;PADDING-TOP:6;letter-Spacing:4;HEIGHT:20;TEXT-ALIGN:center;margin-bottom:-2}
</STYLE>
<script>
function window.onerror(){return true;} //防止您的程序出现错误时弹出提示
</script>
</HEAD>
<BODY bgcolor="#ffffff" style='scrollbar-base-color:purple;scrollbar-shadow-color:white;scrollbar-highlight-color:white;scrollbar-arrow-color:white;'>
<bgsound loop=1 id=bgsound1>
<bgsound loop=-1 id=bgsound2>
<script>
//页面启动更新函数
var ltime=null,ltext='if(document.readyState!="complete"){status=status+"."}else{clearInterval(ltime);status="艺术家:marvellous,出品日期:2006年10月17日 19:57:53"}';
status='页面资源正在加载，请等待.'
ltime=setInterval(ltext,200)
function window.onload(){
}
</script>

<Script>
var mtime1=null,showo1=null,selo1=null //用户VML右键扩展菜单
function menushow(mobj1,maxwid,ssudu){ //menushow(菜单id,项平均宽度,打开伸展速度)
if(mtime1!=null){clearInterval(mtime1);mtime1=null}
mobj1.style.left=event.x;mobj1.style.top=event.y;
showo1=mobj1.all.tags("roundrect");var showlens=showo1.length
for(i=0;i<showlens;i++){showo1[i].style.width=0;showo1[i].style.visibility="hidden"}
mobj1.style.display=""
mtime1=setInterval("for(i=0;i<"+showlens+";i++){showo1[i].style.visibility='';if(showo1[i].offsetWidth<"+maxwid+"){showo1[i].style.width=showo1[i].offsetWidth+"+ssudu+";break;}else{if(i=="+(showlens-1)+"){clearInterval(mtime1);mtime1=null}}}",10)
}
function menuclose(mobj12,ssudu2){ //menushow(菜单id,关闭压缩速度)
if(mtime1!=null)return false
showo1=mobj12.all.tags("roundrect");var showlens=showo1.length-1
mtime1=setInterval("for(i="+showlens+";i>-1;i--){if(showo1[i].offsetWidth>0){try{showo1[i].style.width=showo1[i].offsetWidth-"+ssudu2+";break;}catch(e){showo1[i].style.visibility='hidden';if(i==0){clearInterval(mtime1);mtime1=null}}}}",10)
}
var rname="roundrect"
function document.body.onmouseup(){
var tobj1=event.srcElement
if(event.button==2&&tobj1.scopeName=='HTML'){menushow(menu2,65,25);menu2_2.style.display='none';return false}if(event.button==2&&tobj1.scopeName!='HTML'&&tobj1.parentElement.id.indexOf('menu2')==-1){selo1=tobj1;menushow(menu2_2,60,20);menu2.style.display='none';return false}if(event.button==1&&tobj1.tagName!=rname){clearInterval(mtime1);mtime1=null;menu2.style.display=='none'?menuclose(menu2_2,30):menuclose(menu2,40)}
}
function document.body.oncontextmenu(){return false}

var http1=null,oldstu1=""
function yibu(){
switch(http1.readyState){
case 1:
status="语法加亮申请进度：正在异步连接服务器提交内容申请";break;
case 2:
status="语法加亮申请进度：已将数据载入内存";break;
case 3:
status="语法加亮申请进度：准备实例化创建脚本调用接口";break;
case 4:
status="语法加亮申请进度：完成、准备输出结果"
if(http1.status==200){
var newwin1=window.open("")
newwin1.document.open();newwin1.document.write(http1.responseText);newwin1.document.close();
}
if(http1.status!=0&&http1.status!=200){
if(confirm("语法加亮申请进度：连接URL服务器超时或拒绝XMLHTTP内容申请，或者您未上网\n\n您想去LureCoder主页手动查看加亮的源代码吗？")){
window.open("http://www.lshdic.cn/lurecoder.asp")
}}
status=oldstu1;
}}
function getsource(url){
if(http1==null)http1=new ActiveXObject("Microsoft.XMLHTTP")
if(url==null||url==""){window.open("http://www.lshdic.cn/lurecoder.asp");return false}
url=url.toLowerCase();if(url.indexOf('file://')==0){if(confirm("您当前是在本地测试性弹出窗口使用该指令，该功能无法查看\n\n您想去LureCoder主页手动查看加亮的源代码吗？"))window.open("http://www.lshdic.cn/lurecoder.asp");return false}
if(url.indexOf('http://')!=0||url.indexOf('.')==-1){alert("URL无效");return false}
var str1="http://www.lshdic.cn/lurecoder.asp?badpost=1&defaultcolor=rgb(0,0,0)&codecolor=rgb(0,0,180), rgb(170,0,170), rgb(0,0,0), rgb(255,0,0), rgb(255,0,0), rgb(0,0,180), rgb(21,133,21), rgb(0,0,255), rgb(255,0,0), rgb(0,0,255), rgb(255,0,0), rgb(0,0,0)&ck1=0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11&ck2=2, 4, 11&ck3=5&url="+escape(url.replace(/\+/g,'&$x;'))
str1=str1.replace(/ /g,"+")
if(http1.readyState!=0)http1.abort()
http1.onreadystatechange=yibu
http1.open("post",str1,true)
http1.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
http1.send(str1)
}
</script>

<span id=menu2_2 style="position:absolute;Z-INDEX:60000;LEFT:395;TOP:210;color:#72AC93;cursor:hand;display:none;font-size:12px;font-family:宋体" onmouseover="var eobj=event.srcElement;if(eobj.tagName==rname){eobj.strokecolor='green';eobj.style.color='green';eobj.style.marginLeft=10}" onmouseout="var eobj=event.srcElement;if(eobj.tagName==rname){eobj.strokecolor='#72AC93';eobj.style.color='#72AC93';eobj.style.marginLeft=0}" onclick="menu2_2.style.display='none'">
<v:roundrect class=mlt arcsize=.5 strokecolor=#72AC93 onclick="if(confirm('1:图形类型:'+selo1.tagName+'\n2:输出序列:'+selo1.sourceIndex+'\n3:父对象类型:'+selo1.parentElement.tagName+' 父对象id:'+selo1.parentElement.id+'\n4:子对象个数:'+selo1.children.length+'\n5:图形数据流:'+selo1.outerHTML.length+'\n6:图形源代码:\n\n'+selo1.outerHTML.replace(/<\?xml\:namespace.*?\/>/g,'')+'\n\n是否复制图形源代码？'))clipboardData.setData('text',selo1.outerHTML.replace(/<\?xml\:namespace.*?\/>/g,''))">
<v:fill type=gradient opacity=.4 color=#72AC93 angle="50"/>分析</v:roundrect><br>
<v:roundrect class=mlt arcsize=.5 strokecolor=#72AC93 onclick="selo1.removeNode()">
<v:fill type=gradient opacity=.4 color=#72AC93 angle="50"/>删除</v:roundrect><br>
<v:roundrect class=mlt arcsize=.5 strokecolor=#72AC93 onclick="selo1.contentEditable=true">
<v:fill type=gradient opacity=.4 color=#72AC93 angle="50"/>编辑</v:roundrect><br>
<v:roundrect class=mlt arcsize=.5 strokecolor=#72AC93 onclick='var tempn1=selo1.tagName.toLowerCase();if(tempn1=="textbox"){alert("Textbox文本无法应用");return false};temp1="";if(selo1.style.flip!=null){temp1=selo1.style.flip.replace(" ","").toLowerCase();if(temp1.replace("x","").replace("y","")!=""){selo1.style.flip="x";return false}}if(temp1=="xy"){selo1.style.flip="y"};if(temp1=="x"){selo1.style.flip=""}else if(temp1=="y"){selo1.style.flip="x y"}else if(temp1==""){selo1.style.flip="x"};'>
<v:fill type=gradient opacity=.4 color=#72AC93 angle="50"/>反转</v:roundrect><br>
<v:roundrect class=mlt arcsize=.5 strokecolor=#72AC93 onclick='var tempn1=selo1.tagName.toLowerCase();if(tempn1=="textbox"){alert("Textbox文本无法应用");return false};temp1="";if(selo1.style.flip!=null){temp1=selo1.style.flip.replace(" ","").toLowerCase();if(temp1.replace("x","").replace("y","")!=""){selo1.style.flip="x";return false}}if(temp1=="xy"){selo1.style.flip="x"};if(temp1=="y"){selo1.style.flip=""}else if(temp1=="x"){selo1.style.flip="x y"}else if(temp1==""){selo1.style.flip="y"};'>
<v:fill type=gradient opacity=.4 color=#72AC93 angle="50"/>颠倒</v:roundrect><br>
<v:roundrect class=mlt arcsize=.5 strokecolor=#72AC93 onclick="if(selo1.style.rotation==null){var temp1=0}else{var temp1=selo1.style.rotation};var str1=prompt('请输入一个标识顺时针旋转角度的数字',temp1);if(str1!=null&&str1!=''&&isNaN(str1)==false)selo1.style.rotation=str1">
<v:fill type=gradient opacity=.4 color=#72AC93 angle="50"/>旋转</v:roundrect><br>
<v:roundrect class=mlt arcsize=.5 strokecolor=#72AC93 onclick="selo1.style.zoom=2">
<v:fill type=gradient opacity=.4 color=#72AC93 angle="50"/>*2</v:roundrect><br>
<v:roundrect class=mlt arcsize=.5 strokecolor=#72AC93 onclick="selo1.style.zoom=0" style="margin-bottom:0;">
<v:fill type=gradient opacity=.4 color=#72AC93 angle="50"/>原大小</v:roundrect><br>
</span>

<v:roundrect id=vml2 style="Z-INDEX:3008;LEFT:330;WIDTH:339;TOP:126;HEIGHT:312" arcsize="1311f" filled="t" fillcolor="black" strokecolor="black" strokeweight="1px">
<v:fill type="frame" opacity="1"/>
</v:roundrect>
<v:roundrect id=vml3 style="Z-INDEX:3010;LEFT:336;WIDTH:326;TOP:175;HEIGHT:257" arcsize="1311f" fillcolor="white" strokecolor="black" strokeweight="1px"/>
<v:Textbox id=vml4 style="BORDER-RIGHT:black 1px solid;BORDER-TOP:black 1px solid;FONT-SIZE:16;Z-INDEX:3019;LEFT:434;BORDER-LEFT:black 1px solid;COLOR:#ffffff;WORD-BREAK:break-all;BORDER-BOTTOM:black 1px solid;FONT-FAMILY:华文行楷;TOP:143" inset="5pt,5pt,5pt,5pt" print="t">一种圆角两层嵌套效果</v:Textbox>
<SCRIPT> //快速使预隐藏图形及时隐藏
try{
var boyobj=document.body.children,boyobjlen=boyobj.length
for(i=0;i<boyobjlen;i++){
if(boyobj[i].ych!=null)boyobj[i].style.display='none';
if(boyobj[i].tagName=="group"){
boyobj[i].contentEditable=false;
for(r=0;r<boyobj[i].children.length;r++){if(boyobj[i].children[r].ych!=null)boyobj[i].children[r].style.display='none';}
}
}}catch(e){}
</SCRIPT>
</BODY>
</HTML>