导航分类

CSS3 边框 CSS3 背景

CSS3 圆角

主题

默认模式
浅蓝色模式
淡红色模式
深夜模式

CSS3 圆角

使用 CSS3border-radius属性，可以为元素设置圆角效果，这是现代网页设计中常用的样式特性。

border-radius属性可以使用 1-4 个值来指定，遵循 CSS 的简写属性规则：

四个值：分别指定左上角、右上角、右下角、左下角
三个值：左上角、右上角和左下角、右下角
两个值：左上角和右下角、右上角和左下角
一个值：所有四个角统一设置

四个值（分别指定每个角）

实例代码运行代码

复制

.box {
    /* 顺序: 左上 右上 右下 左下 */
    border-radius: 10px 20px 30px 40px;
}

实现的效果：

四角不同半径
border-radius: 10px 20px 30px 40px;

三个值（对角相同）

实例代码运行代码

复制

.box {
    /* 顺序: 左上 (右上和左下) 右下 */
    border-radius: 10px 20px 30px;
}

实现的效果：

三个值（对角相同）
border-radius: 10px 20px 30px;

两个值（对角相同）

实例代码运行代码

复制

.box {
    /* 顺序: (左上和右下) (右上和左下) */
    border-radius: 10px 20px;
}

实现的效果：

两个值（对角相同）
border-radius: 10px 20px;

一个值（所有角相同）

实例代码运行代码

复制

.box {
    /* 四个角相同 */
    border-radius: 10px;
}

实现的效果：

一个值（所有角相同）
border-radius: 10px;

椭圆角的多值指定

实例代码运行代码

复制

.box {
    /* 水平半径 / 垂直半径 */
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
}

实现的效果：

椭圆角的多值指定
一般用于指定不规则图形

CSS3 圆角属性

属性	描述
border-radius	所有四个边角 border---radius 属性的缩写
border-top-left-radius	定义了左上角的弧度
border-top-right-radius	定义了右上角的弧度
border-bottom-right-radius	定义了右下角的弧度
border-bottom-left-radius	定义了左下角的弧度

CSS3 边框 CSS3 背景

评论区 0

发表评论

教程介绍

CSS3 是 CSS 技术的版本升级，在 CSS 基础上进行了扩展改进，引入了新的特性和模块。

36 章节

79 阅读

0 评论

CSS3 圆角

CSS3 圆角

四个值（分别指定每个角）

实现的效果：

三个值（对角相同）

实现的效果：

两个值（对角相同）

实现的效果：

一个值（所有角相同）

实现的效果：

椭圆角的多值指定

实现的效果：

CSS3 圆角属性

CSS 基础教程

CSS3 教程

CSS3 圆角

CSS3 圆角

四个值（分别指定每个角）

实现的效果：

三个值（对角相同）

实现的效果：

两个值（对角相同）

实现的效果：

一个值（所有角相同）

实现的效果：

椭圆角的多值指定

实现的效果：

CSS3 圆角属性

CSS 基础教程

CSS3 教程

意见反馈

反馈提交成功