gpt4 book ai didi

jquery - CSS Outset/Inset、边框和轮廓

转载 作者:太空狗 更新时间:2023-10-29 13:36:43 26 4
gpt4 key购买 nike

CSS outset、inset、border 和 outline 之间的确切区别是什么
真的很困惑,什么属性可以一起应用?
哪些浏览器支持上述哪些属性?
以上属性的简短示例会很好。

谢谢

最佳答案

边框和轮廓差异

边框:边框边缘围绕着框边框。 Its area计算盒子模型的总大小。您可以为四种可能的每一种指定尺寸 (border-width)、颜色 (border-color) 和样式 (border-style)边框(顶部、右侧、底部和左侧)。您可以检索有关边框属性的更多信息 here .

Outline:类似于border,但在本例中不占空间,与border相反。此外,您不能分别为每个边框设置样式,轮廓样式适用于框的所有四个边。 Outline可以和border一起使用。您可以应用于轮廓的属性有 outline-coloroutline-styleoutline-width 您可以获得有关轮廓属性的更多信息 here .

这是一个表示outlineborder 的盒子模型 enter image description here

边框样式:插入和开始

插图:这是一个 border-style 。边框使盒子看起来就像嵌入在 Canvas 中一样。您可以在 border-colorborder-width 中使用此 border-style

Inset border different browsers

开始另一个 border-style 。 'inset' 的反义词:边框使盒子看起来就像从 Canvas 中出来一样。您可以在 border-colorborder-width 中使用此 border-style

Outset border different browsers

文档和来源

关于jquery - CSS Outset/Inset、边框和轮廓,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16207380/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com