css3方框圆角样式CSS3方框圆角样式

CSS3方框圆角样式

CSS3的出现极大地丰富了前端设计师的工具盒，其中方框圆角样式是一个非常常见的功能。通过使用CSS3的border-radius属性，可以轻松实现方框圆角效果。

.Box {
    border-radius: 10px; /*四个角都为10px*/
}

.Box {
    border-top-left-radius: 10px; /*左上角为10px*/
    border-top-right-radius: 10px; /*右上角为10px*/
    border-bottom-left-radius: 10px; /*左下角为10px*/
    border-bottom-right-radius: 10px; /*右下角为10px*/
}

除了可以指定四个角的圆角大小之外，还可以使用斜线语法指定不同的大小值，例如：border-radius: 10px 20px 30px 40px;表示分别指定顺时针方向上的左上角、右上角、右下角和左下角的圆角大小。

.Box {
    border-radius: 10px 20px 30px 40px; /*左上10px、右上20px、右下30px、左下40px*/
}

可以使用border-radius属性来实现椭圆形的圆角效果。为了实现椭圆形，需要以像素为单位为border-radius提供一个水平尺寸和一个垂直尺寸。例如：border-radius: 50px 20px;表示水平方向上的圆角半径为50px，而垂直方向上的圆角半径为20px。

.Box {
    border-radius: 50px 20px; /*水平方向圆角半径50px，垂直方向圆角半径20px*/
}

在实现圆角效果时，也可以通过使用:before和:after伪类来实现额外的样式。

.Box:before {
    content: "";
    display: block;
    position: absolute;
    top: -10px; left: -10px;
    width: 20px; height: 20px;
    border-radius: 10px;
    background-color: #000;
}

.Box:after {
    content: "";
    display: block;
    position: absolute;
    bottom: -10px; left: -10px;
    width: 20px; height: 20px;
    border-radius: 10px;
    background-color: #000;
}

通过:before和:after伪类实现的半圆样式，可以使你的设计更加复杂、更具吸引力。