CSS 邊框屬性用于定義元素的邊框屬性。它是邊框寬度、邊框樣式和邊框顏色的簡寫。可以對各個邊的邊框進行樣式設置,也可以指定邊框半徑。
另一方面,CSS 輪廓不占用空間,并且如果設置,則顯示在邊框周圍。它支持偏移。此外,我們無法指定各個邊是否應該有輪廓。
默認情況下,不會顯示邊框和輪廓。
語法
CSS 邊框和輪廓屬性的語法如下 –
Selector { border: /*value*/ outline: /*value*/ }
登錄后復制
示例
以下示例說明了 CSS 邊框和輪廓屬性 –
?實時演示
<!DOCTYPE html> <html> <head> <style> div { margin: 15px; padding: 20px; width: 35%; border: thin solid green; outline-width: 5px; outline-style: ridge; outline-color: fuchsia; border-radius: 50px; } </style> </head> <body> <h2>Example</h2> <div>This is it!</div> </body> </html>
登錄后復制
輸出
這給出了以下輸出 –
示例
?現場演示
<!DOCTYPE html> <html> <head> <style> p { margin: 40px; padding: 12px; width: 30%; border: thick dashed green; outline: 5px inset; outline-color: fuchsia; } </style> </head> <body> <h2>Demo Heading</h2> <p>This is demo text surrounded by border and outline.</p> </body> </html>
登錄后復制
輸出
這給出了以下輸出 –
以上就是了解CSS邊框和輪廓之間的區別的詳細內容,更多請關注www.92cms.cn其它相關文章!