表格边框田字格边框css_CSS边框半径

表格边框田字格边框css

From CSS3 onwards, we can easily provide rounded corners to any element using the border-radius property.

从CSS3开始，我们可以使用border-radius属性轻松地为任何元素提供圆角。

p {
    background-color:orange;
    padding:10px;
    /* setting border radius */
    border-radius: 4px;
}

Live Example →

现场示例→

border:radius语法 (Syntax of border:radius)

Using the property border-radius is pretty straight forward, all you have to do is specify the curvature in terms of px, em or % for rounding the corners.

使用border-radius属性非常简单，您要做的就是以px ， em或%来指定曲率，以圆角化。

Syntax:

句法：

border-radius: top-left top-right bottom-right bottom-left

In the above code, top-left will be the value for rounding the top-left corner, similarly top-right will be the value for top-right corner and so on.

在上面的代码中， 左上角将是对左上角进行四舍五入的值，类似地，右上角将是右上角的值，依此类推。

We can skip any value, or specify the value 0 for it, to not round that particular corner. And we can also, set different curvatures for all the corners as well.

我们可以跳过任何值或为其指定值0 ，以不舍入该特定角。 我们还可以为所有角设置不同的曲率。

p {
    background-color:orange;
    padding:10px;
    /* setting border radius */
    border-radius: 4px 8px 12px 16px;
}

Live Example →

现场示例→

翻译自: https://www.studytonight.com/cascading-style-sheet/css-border-radius

表格边框田字格边框css