|
導讀網頁的本質就是超級文本標記語言,通過結合使用其他的Web技術(如:腳本語言、公共網關接口、組件等),可以創造出功能強大的網頁。因而,超級文本標記語言是萬維網(Web)編程的基礎,也就是說萬維網是建立... 網頁的本質就是超級文本標記語言,通過結合使用其他的Web技術(如:腳本語言、公共網關接口、組件等),可以創造出功能強大的網頁。因而,超級文本標記語言是萬維網(Web)編程的基礎,也就是說萬維網是建立在超文本基礎之上的。超級文本標記語言之所以稱為超文本標記語言,是因為文本中包含了所謂“超級鏈接”點。 本篇文章給大家帶來的內容是關于div css3 border-radius 之圓角 DIV圓角 圖片圓角,有一定的參考價值,有需要的朋友可以參考一下,希望對你有所幫助。 一、css3單詞與語法結構1、pCSS3圓角單詞: 2、語法結構 p{border-radius:5px}設置p對象盒子四個角5像素圓角效果 p{border-radius:5px 0;}設置p對象盒子左上角和右下角5px圓角,其它兩個角為0不圓角 p{border-radius:5px 5px 0 0;}設置p對象盒子左上角和右上角5px圓角,其它兩個角為0不圓角 3、說明: 4、css圓角屬性分析圖 二、CSS3圓角案例pCSS5分別對兩個p盒子設置圓角、一個圖片設置圓角實踐CSS3圓角。 1、案例HTML代碼 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>對象圓角 在線演示 DIVCSS5 VIP</title> <link href="images/style.css" rel="stylesheet" type="text/css" /> <!-- www.divcss5.com --> </head> <body> <div>盒子左上角和右上角對象圓角測試</div> <div class="box">DIV盒子圓角</div> <div>盒子對象個角圓角測試</div> <div class="box3">DIV盒子圓角</div> <p> </p> <div>圖片對象圓角測試</div> <div class="box2"><img src="images/logo.gif" /></div> </body> </html> 2、案例CSS代碼: .box {border-radius:5px 5px 0 0;border:1px solid #000;width:300px; height:80px; margin:0 auto}
.box2 img{border-radius:5px}
.box3{border-radius:5px 0; background:#999;width:300px; height:80px; margin:0 auto}3、案例說明 1)、第一個BOX盒子為了觀察到圓角效果所以設置了邊框樣式,同時設置圓角樣式border-radius:5px 5px 0 0;設置左上角和右上角圓角。 2)、第二個BOX3盒子設置背景色,同時設置圓角樣式border-radius:5px 0,設置左上角和右下角圓角 3)、第三個對box2盒子里圖片img設置圓角樣式border-radius:5px,設置四個角均圓角。 以上就是對的全部介紹,如果您想了解更多有關CSS3視頻教程,請關注PHP中文網。 以上就是div css3 border-radius 之圓角 DIV圓角 圖片圓角的詳細內容,更多請關注php中文網其它相關文章! 網站建設是一個廣義的術語,涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。 |
溫馨提示:喜歡本站的話,請收藏一下本站!