淘先锋技术网

首页 1 2 3 4 5 6 7

CSS3 可以通过选择器来实现 HTML 元素的样式修改,其中圆角的实现是一个非常常见的样式需求。

/* 正常圆角 */
border-radius: 5px;
/* 上部圆角 */
border-top-left-radius: 5px;
border-top-right-radius: 5px;
/* 下部圆角 */
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
/* 左部圆角 */
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
/* 右部圆角 */
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
/* 椭圆形 */
border-radius: 50%;

以上代码展示了实现圆角的常见方式,通过设置不同的 border-radius 属性值,可以达到不同的效果。例如设置上下边框的圆角,只需要设置 border-top-left-radius 和 border-top-right-radius 来实现上部圆角,设置 border-bottom-left-radius 和 border-bottom-right-radius 来实现下部圆角,其他圆角的设置同理。

需要注意的是,通过设置 border-radius 属性值为 50% 可以实现椭圆形的效果,非常有用。