課程
/前端開發
/HTML/CSS
/十天精通CSS3
如果你沒看懂?
參考這里：
?/*制作圓*/
? ? ? ? ?//border-radius:25px;(?正確)
? ? ? ? ?border-radius：25px;z(錯誤：用了中文的冒號，有木有。。。。。。)
2015-05-17
源自：十天精通CSS3 5-5
正在回答
<!doctype?html> <html> <head> ????<meta?charset="UTF-8"> <title>CSS制作立體導航</title> <link?rel="stylesheet"?> <style> body{ ?background:?#ebebeb; } .nav{ ?width:560px; ?height:?50px; ?font:bold?0/50px?Arial; ?text-align:center; ?margin:40px?auto?0; ?????background:?#f65f57; ?/*制作圓*/ ?????????//border-radius:25px; ?????????border-radius:25px; ??????????/*制作導航立體風格*/ ??????????box-shadow:10px?10px?5px?#888888; } .nav?a{ ?display:?inline-block; ?-webkit-transition:?all?0.2s?ease-in; ?-moz-transition:?all?0.2s?ease-in; ?-o-transition:?all?0.2s?ease-in; ?-ms-transition:?all?0.2s?ease-in; ?transition:?all?0.2s?ease-in; } .nav?a:hover{ ?-webkit-transform:rotate(10deg); ?-moz-transform:rotate(10deg); ?-o-transform:rotate(10deg); ?-ms-transform:rotate(10deg); ?transform:rotate(10deg); } .nav?li{ ?position:relative; ?display:inline-block; ?padding:0?16px; ?font-size:?13px; ?text-shadow:1px?2px?4px?rgba(0,0,0,.5); ?list-style:?none?outside?none; } /*使用偽元素制作導航列表項分隔線*/ ????????/*刪除第一項和最后一項導航分隔線*/ .nav?a, .nav?a:hover{ ?color:#fff; ?text-decoration:?none; } </style> </head> <body> <ul> ?????<li><a?href="">Home</a></li> ?????<li><a?href="">About?Me</a></li> ?????<li><a?href="">Portfolio</a></li> ?????<li><a?href="">Blog</a></li> ?????<li><a?href="">Resources</a></li> ?????<li><a?href="">Contact?Me</a></li> </ul> </body> </html>
你的冒號是中文狀態下 ...我已經修正了..
墨滌 提問者
舉報
本課程為CSS3入門教程，深刻詳解CSS3知識讓網頁穿上絢麗裝備
2 回答是大的圓角還是小的圓角
3 回答我寫的陰影效果還有圓角沒有起作用為什么呢
2 回答CSS3圓角內容問題
5 回答如何制作圓角按鈕
1 回答關于圓角變成矩形
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2015-05-17
<!doctype?html> <html> <head> ????<meta?charset="UTF-8"> <title>CSS制作立體導航</title> <link?rel="stylesheet"?> <style> body{ ?background:?#ebebeb; } .nav{ ?width:560px; ?height:?50px; ?font:bold?0/50px?Arial; ?text-align:center; ?margin:40px?auto?0; ?????background:?#f65f57; ?/*制作圓*/ ?????????//border-radius:25px; ?????????border-radius:25px; ??????????/*制作導航立體風格*/ ??????????box-shadow:10px?10px?5px?#888888; } .nav?a{ ?display:?inline-block; ?-webkit-transition:?all?0.2s?ease-in; ?-moz-transition:?all?0.2s?ease-in; ?-o-transition:?all?0.2s?ease-in; ?-ms-transition:?all?0.2s?ease-in; ?transition:?all?0.2s?ease-in; } .nav?a:hover{ ?-webkit-transform:rotate(10deg); ?-moz-transform:rotate(10deg); ?-o-transform:rotate(10deg); ?-ms-transform:rotate(10deg); ?transform:rotate(10deg); } .nav?li{ ?position:relative; ?display:inline-block; ?padding:0?16px; ?font-size:?13px; ?text-shadow:1px?2px?4px?rgba(0,0,0,.5); ?list-style:?none?outside?none; } /*使用偽元素制作導航列表項分隔線*/ ????????/*刪除第一項和最后一項導航分隔線*/ .nav?a, .nav?a:hover{ ?color:#fff; ?text-decoration:?none; } </style> </head> <body> <ul> ?????<li><a?href="">Home</a></li> ?????<li><a?href="">About?Me</a></li> ?????<li><a?href="">Portfolio</a></li> ?????<li><a?href="">Blog</a></li> ?????<li><a?href="">Resources</a></li> ?????<li><a?href="">Contact?Me</a></li> </ul> </body> </html>你的冒號是中文狀態下 ...我已經修正了..