css3圓角屬性的值代表指的是什么

這篇“css3圓角屬性的值代表指的是什么”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“css3圓角屬性的值代表指的是什么”文章吧。

在css3中，圓角屬性“border-radius”有1到4個屬性值，當設置四個屬性值時，屬性值依次代表左上角、右上角、右下角和左下角的圓角屬性值，語法為“border-radius:左上圓角值 右上圓角值 右下圓角值 左下圓角值”。

本教程操作環境：windows10系統、CSS3&&HTML5版、Dell G3電腦。

css3圓角屬性的每個值代表什么

CSS3 border-radius - 指定每個圓角，

border-radius 屬性是一個最多可指定四個 border -*- radius 屬性的復合屬性

如果你在 border-radius屬性中只指定一個值，那么將生成 4個圓角。

但是，如果你要在四個角上一一指定，可以使用以下規則：

·       四個值: 第一個值為左上角，第二個值為右上角，第三個值為右下角，第四個值為左下角。

·       三個值: 第一個值為左上角,第二個值為右上角和左下角，第三個值為右下角

·       兩個值: 第一個值為左上角與右下角，第二個值為右上角與左下角

·       一個值： 四個圓角值相同

每個半徑的四個值的順序是：左上角，右上角，右下角，左下角。如果省略左下角，右上角是相同的。如果省略右下角，左上角是相同的。如果省略右上角，左上角是相同的。

例子 1

border-radius:2em;

等價于：

border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;

例子 2

border-radius: 2em 1em 4em / 0.5em 3em;

等價于：

border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;

以上就是關于“css3圓角屬性的值代表指的是什么”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。