登录论坛 | 注册会员 设为首页 | 收藏本站
top
濠碘槅鍋撶徊楣冩偋閻樿违闁跨噦鎷� 缂備胶铏庨崣搴ㄥ礂濞戞ǚ鏋庢い銏㈠Y   闂備礁鎽滈崰搴∥涘Δ鍜佹晩鐎广儱妫涢埢鏃€銇勯幘璺轰户濠碘槄鎷� 濠电偞鎸冲Λ鍨渻閹烘梻绠旈柣鏂垮濞撳爼鏌涢弴銊ョ仜闁逞屽墾閹凤拷 濠电偛鐡ㄧ猾鍌炲礃閳哄倸鍓┑鐐村灦閹尖晠宕㈤懖鈺冪处闁跨噦鎷� 闂佸搫顦遍崕鎰板垂椤栨埃鏋庨柕蹇婃噰閸嬫挸鈽夊畷鍥╂殼濠电偛鎷戦幏锟� 婵犵數鍋為幐鎼佸箟閿熺姴鍨傛繛鍡樺姉閳绘梹绻濇繝鍌氭殭妞ゆ洩鎷� 濠电偞鍨堕幐鎼侇敄閸緷褰掑炊閵娧€鏋栧銈嗘尵閸嬬喐淇婇敓锟�   缂傚倸鍊搁崯顖炲垂闂堟稅缂氶柛鎰典簴閸嬫挻鎷呴崘顭戞闂佺硶鏅幏锟�   IT濠电姷鏁搁崑娑溿亹婢跺瞼涓嶉柨鐕傛嫹   婵犵數鍋為幐鐐箾閳ь剙霉濠婃劖瀚�   闂備礁鎲¢〃鍡涙偋閺囩偐鏀﹂柍褝鎷�   闂佽崵濮崇粈渚€骞栭鈶ㄧ細闁跨噦鎷�

濠电偞鍨堕幐鑽ゅ垝瀹€鈧埀顒€鐏氭繛濠傤嚕閸洖绀冮柕濞垮灪閻庣洔T闂傚倸鍊搁崐鍫曞礉瀹ュ鏄ユ繛鎴炴皑閸楁岸鏌ㄩ悤鍌涘

闂備浇妗ㄩ悞锔界珶閸℃稒鍋夐柨鐕傛嫹

闂備礁缍婂ḿ褔顢栭崱妞绘敠闁逞嶆嫹

缂傚倷鐒﹂〃鍡椢涙笟鈧、娆撳炊椤掆偓鐎氬鏌ㄩ悤鍌涘

濠电偞鍨堕幐鍓у垝椤栨凹鐔嗛柨鐕傛嫹

闂備礁鎼€氼參宕曢崘鑼殾闁跨噦鎷�

CPU


闂備礁鎲¢崝鏇㈠箠鎼淬劍鍋ら柨鐕傛嫹


缂備胶铏庨崣搴ㄥ礈濞戞◤娲晸閿燂拷

闂備礁鎼€氼剚鏅舵禒瀣︽慨妯挎硾闂傤垶鏌ㄩ悤鍌涘

闂備礁鎲″濠氬磻濞戙垹鐭楅柡鍥╁枎缁剁偤鏌″搴″⒒闁哥噦鎷�

闂備礁鎼悧鍡欑矓鐎涙ɑ鍙忛柣鏃傚帶闂傤垶鏌ㄩ悤鍌涘

濠殿喗宕块崨顓夛綁鏌i弽鐢电М闁哄被鍔戦、娆撴倷椤掑偊绱�

闂備礁鎼悧鎰枍閿濆鏁婇柛顐犲劜閸嬨劑鏌涢…鎴濅簽闁绘牭鎷�
闂備焦妞垮鈧紒鎻掝煼瀹曟粓骞庨挊澶岊槺婵犵數濮电喊宥夋偟閿燂拷 | 缂傚倸鍊搁崯顖炲垂閸︻厼鍨濋柛顐f礀缁狀噣鏌嶈閸撶喎顕i悽鍛婃櫢闁跨噦鎷� | 闂備胶鎳撻悘婵堢矓瀹曞洨绀婇柡鍐ㄥ€哥€垫煡鏌ゆ慨鎰偓妤呭春閿燂拷 | 缂傚倷绀侀鍛搭敄閸涱垵濮虫い鎾跺剱閸ゆ洟鏌嶈閸撶喎鐣烽敐澶嬫櫢闁跨噦鎷� | 闂備浇妗ㄩ懗鑸垫櫠濡も偓閻e灚鎷呯憴鍕妳闂佽法鍣﹂幏锟� | 闂備礁鎲″濠氬磻濞戙垹鐭楅柡鍥ュ灪閸ゅ﹥銇勮箛鎾愁仼鐞氱喖姊洪崨濠勫闁瑰嚖鎷� | 闂備焦鎮堕崕鏌ュ磿閹惰姤鍤嬪ù鍏兼綑閻愬﹪鏌熼鍡楀暙婢癸拷 | 闂備礁鎲¢〃澶娾枍閺囩儐娓婚柛宀€鍋為悞缁樻叏濡澧柛鐑囨嫹 | IT闂備胶枪濞存岸宕戦崟顐ゆ殾闁跨噦鎷� | IT缂傚倷鐒﹂〃鍡涘垂婵傚憡鍎婇柨鐕傛嫹 | IT闂備胶枪椤戝啴宕曢柆宥呯畺闁跨噦鎷� | 濠电姰鍨介埀顒佺閸忓矂鏌i幒鐐村
adtop
 
 
当前位置 : 首页>软件学院>程序开发>CSS>正文
 
CSS实现圆角的三种方法

http://www.dbit.cn 2008-5-24 7:59:55  来源:本站  编辑:张佳奇
 
以下直接给出代码:

第一种:

<Html>
<head>
<style>
#a{
border-left:1px #333 solid;
border-right:1px #333 solid;
width:300px;
height:500px;
}
.b{
height:1px;
overflow:hidden;
border-left:1px #333 solid;
border-right:1px #333 solid;
}
</style>
</head>
<body>
<div>
<div class="b" style="margin-left:3px;width:294px;background:#333"></div>
<div class="b" style="margin-left:2px;width:296px;"></div>
<div class="b" style="margin-left:1px;width:298px;"></div>
<div id="a">
</div>
</div>
</body>
</Html>

第二种:

<html>
<head>
<title>css圆角效果</title>
<meta http-equiv="content-type" c>
<style type="text/css">
div.RoundedCorner{background: #9BD1FA}
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}
</style>
</head>
<body>
<div class="RoundedCorner">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<br>无图片实现圆角框<br><br>
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
</div>
</body>
</html>

第三种:

<style>
.divfloat {
margin:0 0 10px 0;
background: transparent;
}

.roundtop,.roundbottom{
display:block;
font-size:1px;
width: 100%;
background:transparent;
}

.roundb1,.roundb2,
.roundb3,.roundb4 {
display:block;
overflow:hidden;
}

.roundb1,.roundb2,.roundb3 {
height:1px;
border-left:1px solid #9B9B9B;
border-right:1px solid #9B9B9B;
background:#F3F3F3;
}

.roundb1 {margin:0 5px;background:#9B9B9B;}
.roundb2 {margin:0 3px;border-width:0 2px;}
.roundb3 {margin:0 2px;}
.roundb4 {
height:2px;
margin:0 1px;
border-left:1px solid #9B9B9B;
border-right:1px solid #9B9B9B;
background:#F3F3F3;
}

.roundboxcontent {
display:block;
padding:5px;
height:100%;
overflow:hidden;
border:0 solid #9B9B9B;
border-width:0 1px;
background:#F3F3F3;
}
</style>

<div class="divfloat">
<b class="roundtop">
<b class="roundb1"></b>
<b class="roundb2"></b>
<b class="roundb3"></b>
<b class="roundb4"></b>
</b>
<div class="roundboxcontent">
  <div class="sidebarwrap">
  这是圆角div内容部分...
  </div>
</div>
<b class="roundbottom">
  <b class="roundb4"></b>
  <b class="roundb3"></b>
  <b class="roundb2"></b>
  <b class="roundb1"></b>
</b>
</div>
 
收藏】【打印】【进入论坛
  相关文章:

64

·CSS3 Media Queries 详解
·CSS实例教程:非浮动区域设置宽度
·css的效率和浏览器渲染的速度
·关于CSS HACK 解决兼容的写法 
·小议使用“完整”的CSS的缺点
·关于CSS不透明的详细介绍 
·CSS中设置段落间距的方法
·用css网站布局之十步实录
·DIV+CSS布局代码精简对SEO的影响 
·CSS教程:网页中英文字体的设置 
·css3文本阴影属性text-shadow说明 

 
 
 
 
最新文章

中关村艳照门女主角详记录高清组图 
大连护士门大尺度艳照高清组图
iPhone女孩微博爆红 最宝贵东西换iPhon
反恐精英之父内维尔:改变电脑游戏销售
团购网站黎明之前:中国市场惨烈厮杀不
团购鼻祖Groupon中国揭秘:快与慢的商业
Spil Games发布新的品牌形象
1800配置一台主机 不要显示器
联想V360笔记本模特写真
爱国者第四代移动硬盘将面市、低电压保

 
推荐文章
1
2
3
4
5
6
7
8
9
10
iPhone女孩微博爆红 最宝贵东西换
大连护士门大尺度艳照高清组图
中关村艳照门女主角详记录高清组
苹果员工中毒门
宫如敏不雅照疯传 看张馨予韩一菲
深耕市场 永续经营——专访百脑汇
优派专业电子书 让您回家旅途多姿
揭晓百万大奖三星bada魅力绽放中
大明龙权“江湖英雄会”全国PK大
永恒之塔校园达人挑战赛完美落幕
八卦图解 More>>
iPhone女孩微博爆红 最宝贵东西换 大连护士门大尺度艳照高清组图
中关村艳照门女主角详记录高清组 宫如敏不雅照疯传 看张馨予韩一菲

闂備胶枪缁绘劙宕㈤弽顐ュС妞ゆ帒瀚€氬銇勯幒鎴濃偓鏄忋亹閿燂拷 - 闂備浇澹堟ご绋款潖婵犳碍鐒鹃柟缁㈠枛缁狅綁鏌熺€涙ḿ鐭嬬紒顕嗘嫹 - 闂備礁缍婇弨杈╃矙閹达箑鐭楅柣鎴炨缚閳绘洖霉閼测晞藟闁衡偓閿燂拷 - 婵°倗濮烽崑娑㈡倶濠靛绠熼柨鐔哄Т鐎氬鈧箍鍎遍幊搴綖閿燂拷 - 闂備礁鎲¢悷銉╊敄閸℃稑纾块煫鍥ㄧ⊕閻擄綁鏌i幇闈涘濠㈣鎷�
Copyright©2006-2011闂備線娼уΛ宀勫磻閿燂拷Dbit.Cn. All Rights Reserved.
闂佸搫顦悧蹇曠矈椤ャ弰濠电姰鍨奸鎰板箯閿燂拷06014875闂備礁鎲¢悷閬嶅箯閿燂拷

Tel:024-88340056 Mob:13066598927 Email:WebMaster QQ:69424720

缂傚倸鍊搁崯顖炲垂瑜版帗鍋熼柣銈冨季缂傚倸鍊稿ù鍕箯閿燂拷:缂傚倸鍊风粈浣烘崲濮椻偓瀵劑濮€閵堝懐鏌堥梺璺ㄥ櫐閹凤拷:65477551 闂備胶鎳撻悘鍫ュ磻閹剧粯鐓涢柛顐亜閻忥綁鏌涜箛銉﹀:28526281 濠电偛鐡ㄧ划宀勫嫉椤掍焦娅犳繝濠傜墛閸嬨劌霉閿濆懎鏆欏鐧告嫹:24536322 缂傚倸鍊稿ú銏ゅ磹濞戞埃鍋撳铏彧閻庣數鍘ч~婵嬪础閻愭彃绫�:24815709 缂傚倷鐒﹀褰掓偡閳哄懎姹查弶鍫氭櫇缁€鍐煥閻曞倹瀚�:8052026 濠电偛鐡ㄧ划宀勫嫉椤掍焦娅犳繝濠傜墛閸嬨劌霉閿濆懎鏆欏鐧告嫹:57897142 缂傚倸鍊风粈浣烘崲濮椻偓瀵劑濮€閵堝懐鏌堥梺璺ㄥ櫐閹凤拷:20966008 婵犵數鍋為幐鎼佸箟閿熺姴鍨傛繛鍡樺灩缁€鍐煥閻曞倹瀚�:65477153