HTML+CSS 輕松入門之盒子模型之邊框(上)
盒子模型的邊框就是圍繞著內(nèi)容及補白的線,這條線你可以設(shè)置它的粗細(xì)、樣式和顏色(邊框三個屬性)。
如下代碼:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>邊框</title> <style type="text/css"> p{ border:1px solid red; /*也可分開來寫*/ /* border-width: 1px;*/ /*粗細(xì)*/ /* border-style: solid;*/ /*樣式,實線,虛線,等*/ /* border-color: red;*/ /*顏色*/ /* dashed(虛線)| dotted(點線)| solid(實線) 小伙伴們可以試一下*/ } </style> </head> <body> <p> 我的世界因為有你才會美 我的天空因為有你不會黑 給我快樂為我傷心流眼淚 給我寬容能讓我展翅高飛 你的話你的淚 你的笑你的美 在我眼中勝過最美的玫瑰 抱著夢往前飛 不逃避不后退 你是我成功路上的堡壘! 給我翅膀 讓我可以翱翔 給我力量 是你讓我變堅強 不怕受傷 因為有你在身旁 你的笑你的淚 是我逐夢路上最美的太陽 </p> </body> </html>
顏色可以寫成十六進制 #ccc #f60 等
border-width(邊框?qū)挾龋┲械膶挾纫部梢栽O(shè)置為:
thin | medium | thick(但不是很常用),最常還是用象素(px)