首页 资料纯CSS完成网页中某块内容圆角边框等后果

资料纯CSS完成网页中某块内容圆角边框等后果

举报
开通vip

资料纯CSS完成网页中某块内容圆角边框等后果资料纯CSS完成网页中某块内容圆角边框等后果 简洁型圆角矩形 方法1 code1: .b1,.b2,.b3,.b4,.b1b,.b2b,.b3b,.b4b,.b{display:block;overflow:hidden;} .b1,.b2,.b3,.b1b,.b2b,.b3b{height:1px;} .b2,.b3,.b4,.b2b,.b3b,.b4b,.b{border-left:1px,solid,#999;border-right:1px,solid,#999;} .b1,.b1b{marg...

资料纯CSS完成网页中某块内容圆角边框等后果
资料纯CSS完成网页中某块内容圆角边框等后果 简洁型圆角矩形 方法1 code1: .b1,.b2,.b3,.b4,.b1b,.b2b,.b3b,.b4b,.b{display:block;overflow:hidden;} .b1,.b2,.b3,.b1b,.b2b,.b3b{height:1px;} .b2,.b3,.b4,.b2b,.b3b,.b4b,.b{border-left:1px,solid,#999;border-right:1px,solid,#999;} .b1,.b1b{margin:0,5px;background:#999;} .b2,.b2b{margin:0,3px;border-width:2px;} .b3,.b3b{margin:0,2px;} .b4,.b4b{height:2px;margin:0,1px;} .d1{background:#F7F8F9;} .k,{height:300px;}
简洁型css圆角矩形
方法2: div.RoundedCorner{background:#9BD1FA;,width:400px;} b.rtop,,b.rbottom{display:block;background:,#FFF} b.rtop,b,,b.rbottom,b{display:block;height:,1px;overflow:,hidden;,background:,#9BD1FA} b.r1{margin:,0,5px} b.r2{margin:,0,3px} b.r3{margin:,0,2px} b.rtop,b.r4,,b.rbottom,b.r4{margin:,0,1px;height:,2px}
无图片实现圆角框

3D圆角矩形: CODE: .raised{background:transparent;width:40%;} .raised,h1,.raised,p{margin:0,10px;} .raised,h1{font-size:2em;color:#fff;} .raised,p{padding-bottom:0.5em;} .raised,.b1,.raised,.b2,.raised,.b3,.raised,.b4,.raised,.b1b,.raised,.b2b,.raised,.b3b,.raised,.b4b{displ ay:block;overflow:hidden;font-size:1px;} .raised,.b1,.raised,.b2,.raised,.b3,.raised,.b1b,.raised,.b2b,.raised,.b3b{height:1px;} .raised,.b2{background:#ccc;border-left:1px,solid,#fff;border-right:1px,solid,#eee;} .raised,.b3{background:#ccc;border-left:1px,solid,#fff;border-right:1px,solid,#ddd;} .raised,.b4{background:#ccc;border-left:1px,solid,#fff;border-right:1px,solid,#aaa;} .raised,.b4b{background:#ccc;border-left:1px,solid,#eee;border-right:1px,solid,#999;} .raised,.b3b{background:#ccc;border-left:1px,solid,#ddd;border-right:1px,solid,#999;} .raised,.b2b{background:#ccc;border-left:1px,solid,#aaa;border-right:1px,solid,#999;} .raised,.b1{margin:0,5px;background:#fff;} .raised,.b2,,.raised,.b2b{margin:0,3px;border-width:0,2px;} .raised,.b3,,.raised,.b3b{margin:0,2px;} .raised,.b4,,.raised,.b4b{height:2px;,margin:0,1px;} .raised,.b1b{margin:0,5px;,background:#999;} .raised,.boxcontent{display:block;background:#ccc;border-left:1px,solid,#fff;border-right:1px,soli d,#999;}

3D圆角矩形

反向css圆角矩形: CODE: .serif,{ ,,background:,transparent;,width:40%; ,} .serif,h1,,.serif,p,{ ,,margin:0,10px; ,} .serif,h1,{ ,,font-size:2em;,color:#fff; ,} .serif,p,{ ,,padding-bottom:0.5em; ,} .serif,.b1,,.serif,.b2,,.serif,.b3,,.serif,.b4,{ ,,display:block;, ,,overflow:hidden; ,,font-size:1px; ,} .serif,.b1,,.serif,.b2,,.serif,.b3,{ ,,height:1px; ,} .serif,.b2,,.serif,.b3,{ ,,background:#fc0;, ,,border-left:1px,solid,#fff;, ,,border-right:1px,solid,#fff; ,} .serif,.b4,{ ,,background:#fc0;, ,,border-left:1px,solid,#fff;, ,,border-right:1px,solid,#fff; ,} .serif,.b1,{ ,,margin:0;,background:#fff; ,} .serif,.b2,{ ,,margin:0,1px;, ,,border-width:0,2px; ,} .serif,.b3,{ ,,margin:0,3px; ,} .serif,.b4,{ ,,height:2px;, ,,margin:0,4px; ,} .serif,.boxcontent,{ ,,display:block;,, ,,background:#fc0;, ,,border-left:1px,solid,#fff;, ,,border-right:1px,solid,#fff;, ,,margin:0,5px; ,}

反向css圆角矩形

略带菱形的css圆角: CODE: .curved,{ ,,background:transparent;, ,,width:40%; ,} .curved,h1,,.curved,p,{ ,,margin:0,10px; ,} .curved,h1,{ ,,font-size:2em;, ,,color:#fff; ,} .curved,p,{ ,,padding-bottom:0.5em; ,} .curved,.b1,,.curved,.b2,,.curved,.b3,,.curved,.b4,{ ,,display:block;, ,,overflow:hidden;, ,,height:1px; ,,font-size:1px; ,} .curved,.b2,,.curved,.b3,,.curved,.b4,{ ,,background:#e0cea3;, ,,border-left:1px,solid,#fff;, ,,border-right:1px,solid,#fff; ,} .curved,.b1,{ ,,margin:0,4px;, ,,background:#fff; ,} .curved,.b2,{ ,,margin:0,4px;, ,,height:2px; ,} .curved,.b3,{ ,,margin:0,3px; ,} .curved,.b4,{ ,,margin:0;, ,,height:1px;, ,,border-width:0,3px,0,3px; ,} .curved,.boxcontent,{ ,,display:block;, ,,background:#e0cea3;, ,,border:0,solid,#fff;, ,,border-width:0,1px; ,}

略带菱形的css圆角矩形

特殊CSS圆角: CODE: .pillar,{ ,,background:transparent;, ,,width:40%; ,} .pillar,h1,,.pillar,p,{ ,,margin:0,10px; ,} .pillar,h1,{ ,,font-size:2em;, ,,color:#fff; ,} .pillar,p,{ ,,padding-bottom:0.5em; ,} .pillar,.b1,,.pillar,.b2,,.pillar,.b3,,.pillar,.b4,{ ,,display:block;, ,,overflow:hidden; ,,font-size:1px; ,} .pillar,.b1,,.pillar,.b2,,.pillar,.b4,{ ,,height:1px; ,} .pillar,.b2,,.pillar,.b3,{ ,,background:#d66;, ,,border-left:1px,solid,#fff;, ,,border-right:1px,solid,#fff; ,} .pillar,.b4,{ ,,background:#d66;, ,,border-left:4px,solid,#fff;, ,,border-right:4px,solid,#fff; ,} .pillar,.b1,{ ,,margin:0,2px;, ,,background:#fff; ,} .pillar,.b2,{ ,,margin:0,1px;, ,,border-width:0,1px; ,} .pillar,.b3,{ ,,height:2px;, ,,margin:0; ,} .pillar,.b4,{ ,,margin:0,2px; ,} .pillar,.boxcontent,{ ,,display:block;, ,,background:#d66;, ,,border-left:1px,solid,#fff;, ,,border-right:1px,solid,#fff;, ,,margin:0,5px; ,}

特殊css圆角矩形

本文档为【资料纯CSS完成网页中某块内容圆角边框等后果】,请使用软件OFFICE或WPS软件打开。作品中的文字与图均可以修改和编辑, 图片更改请在作品中右键图片并更换,文字修改请直接点击文字进行修改,也可以新增和删除文档中的内容。
该文档来自用户分享,如有侵权行为请发邮件ishare@vip.sina.com联系网站客服,我们会及时删除。
[版权声明] 本站所有资料为用户分享产生,若发现您的权利被侵害,请联系客服邮件isharekefu@iask.cn,我们尽快处理。
本作品所展示的图片、画像、字体、音乐的版权可能需版权方额外授权,请谨慎使用。
网站提供的党政主题相关内容(国旗、国徽、党徽..)目的在于配合国家政策宣传,仅限个人学习分享使用,禁止用于任何广告和商用目的。
下载需要: 免费 已有0 人下载
最新资料
资料动态
专题动态
is_079973
暂无简介~
格式:doc
大小:50KB
软件:Word
页数:0
分类:
上传时间:2018-06-14
浏览量:42