另一方面,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边框和轮廓之间的区别的详细内容。