您好,登錄后才能下訂單哦!
今天小編給大家分享一下CSS虛線下劃線及虛線怎么定義的相關(guān)知識(shí)點(diǎn),內(nèi)容詳細(xì),邏輯清晰,相信大部分人都還太了解這方面的知識(shí),所以分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后有所收獲,下面我們一起來了解一下吧。
這里通過邊框?qū)傩缘奶摼€邊框border控制虛線。以下配置的css 高度(css height)與css 寬度(css width)為350像素是為了便于觀察遲疑演示 別的意義。
一、四邊為虛線邊框
border:1px dashed #000; 黑色虛線邊框
實(shí)例:
CSS代碼: .CSS5{border:1px dashed #000; height:50px;width:350px}
Html代碼: <div class="CSS5">我的四邊為彩色虛線邊框</div>
這里配置邊框縮寫方法定義CSS5決定器四邊邊框?yàn)?px的玄色虛線邊框
二、左邊為虛線:
CSS代碼: .CSS5-1{border-left:1px dashed #000; height:50px;width:350px}
Html代碼: <div class="CSS5-1">我的左邊為玄色虛線邊框</div>
這里配置了左邊一邊為黑色虛線邊框
三、右側(cè)為虛線:
CSS代碼: .CSS5-2{border-right:1px dashed #000; height:50px;width:350px}
Html代碼: <div class="CSS5-2">我的右側(cè)為黑色虛線邊框</div>
這里設(shè)置了右側(cè)一邊為黑色虛線邊框
四、頂部邊(上邊)為虛線:
CSS代碼: .CSS5-3{border-top:1px dashed #000; height:50px;width:350px}
Html代碼: <div class="CSS5-3">我的上邊為黑色虛線邊框</div>
這里設(shè)置裝備擺設(shè)了頂邊(上邊線)一邊為彩色虛線邊框
五、底部邊(下邊)為虛線:
CSS代碼: .CSS5-4{border-bottom:1px dashed #000; height:50px;width:350px}
Html代碼: <div class="CSS5-4">我的下邊為彩色虛線邊框</div>
這里配置了底邊(下邊線)一邊為彩色虛線邊框
六、任意一邊不為虛線,別的三邊為虛線環(huán)境
列入右側(cè)邊框不為虛線而沒有邊線,其他三邊為黑色虛線邊框
CSS代碼: .CSS5-5{border:1px dashed #000;border-right:0; height:50px;width:350px}
Html代碼: <div class="CSS5-5">我的右側(cè)邊框無(wú)際線而別的三邊為彩色虛線邊框?qū)嵗?lt;/div>
這里通過先設(shè)置裝備擺設(shè)了該對(duì)象四邊為黑色1px虛線邊框,緊接著又設(shè)置一邊邊線為0的配置,多么相等于設(shè)置了3邊的邊框虛線屬性,可是這里留意邊框?qū)傩耘渲孟群箜様ⅰ?/p>
以上實(shí)例完整DIV+CSS代碼如下:
<!DOCTYPE html> <html> <head> <meta charset="gb2312" /> <title>CSS 虛線 CSS5實(shí)例注明<title>css5.com.cn</title> <style> .CSS5{ border:1px dashed #000; height:50px; width:350px} .CSS5-1{border-left:1px dashed #000; height:50px;width:350px} .CSS5-2{border-right:1px dashed #000; height:50px;width:350px} .CSS5-3{border-top:1px dashed #000; height:50px;width:350px} .CSS5-4{border-bottom:1px dashed #000; height:50px;width:350px} .CSS5-5{border:1px dashed #000; border-right:0;height:50px;width:350px} /* css5.com.cn實(shí)例 */ </style> </head> <body> css5.com.cn css虛線實(shí)例實(shí)例<br> <div class="CSS5">我四邊為虛線邊框</div><br> <div class="CSS5-1">我的左邊為彩色虛線邊框</div><br> <div class="CSS5-2">我的右側(cè)為玄色虛線邊框</div><br> <div class="CSS5-3">我的上邊為彩色虛線邊框</div><br> <div class="CSS5-4">我的下邊為彩色虛線邊框</div><br> <div class="CSS5-5">我的右側(cè)邊框無(wú)際線而其他三邊為玄色虛線邊框?qū)嵗?lt;/div> </body> </html> |
以上演示各類色采的虛線邊框,如想更為詳細(xì)分明CSS border(CSS 邊框)可進(jìn)入://www.css5.com.cn/css/912.shtml
咱們時(shí)常會(huì)設(shè)置被鏈接的翰墨模式要么帶鏈接有虛線的下劃線,或鼠標(biāo)移動(dòng)到有鏈接的筆墨上出現(xiàn)虛線下劃線,這個(gè)怎樣完成的呢,這里為大家簡(jiǎn)介對(duì)于CSS超鏈接的虛線下劃線。
一、帶鏈接筆墨有虛線下劃線
這里也是通過CSS border邊框?qū)傩詠砉苤瞥溄觓對(duì)象的CSS款式。
演示CSS代碼:
a{ border-bottom:1px dashed #111;}/* 這里設(shè)置帶鏈接筆墨下方泛起虛線下劃線*/
a:hover{ border:0;}/* 這里配置鼠標(biāo)顛末被鏈接筆墨時(shí)不出現(xiàn)虛線 */
完整DIV CSS代碼:
<!DOCTYPE html> <html> <head> <meta charset="gb2312" /> <title>CSS 虛線下劃線 CSS5實(shí)例說明</title> <style> a{ border-bottom:1px dashed #111;text-decoration:none;} a:hover{ border:0;} </style> </head>
<body> |
闡明:text-decoration:none;這個(gè)是去掉CSS 下劃線(超鏈接默許自帶的下劃線屬性)
以上就是“CSS虛線下劃線及虛線怎么定義”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家閱讀完這篇文章都有很大的收獲,小編每天都會(huì)為大家更新不同的知識(shí),如果還想學(xué)習(xí)更多的知識(shí),請(qǐng)關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。