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边框和轮廓之间的区别的详细内容,更多请关注php中文网其它相关文章!
已抢65767个
抢已抢31909个
抢已抢17539个
抢已抢8852个
抢已抢11445个
抢已抢23963个
抢