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

創(chuàng)新互聯(lián)公司從2013年開始，先為建甌等服務建站，建甌等地企業(yè)，進行企業(yè)商務咨詢服務。為建甌企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務解決您的所有建站問題。

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

本教程操作環(huán)境：windows10系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

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

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

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

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

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

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

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

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

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

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

例子 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圓角屬性的值代表指的是什么”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對大家有幫助，若想了解更多相關的知識內(nèi)容，請關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。