CSS3 边框
使用 CSS3 边框属性，可以设置border-radius（边框圆角）、border-image（边框图片）和box-shadow（边框阴影）。
这些属性是在 CSS 边框属性（边框样式、边框宽度和边框颜色）的基础上，新增的边框属性：
border-radius（边框圆角），让边框变成圆角，甚至圆形border-image（边框图片），用图片代替传统的线条边框box-shadow（边框阴影），给元素添加阴影效果（外阴影或内阴影）
CSS3 边框圆角
CSS3 的border-radius属性允许你为元素添加圆角效果，这是现代网页设计中最常用的样式特性之一。
.box {
border-radius: 10px; /* 四个角都是10px圆角 */
border-radius: 50%; /* 宽度和高度相同，形成圆形 */
border-radius: 50%; /* 宽度和高度相同，形成椭圆形 */
border-radius: 15px 30px 45px 60px; /* 四个角都是设置不同弧度 */
}实现的效果：
border-radius: 10px;
border-radius: 50%;
(圆形)
(圆形)
border-radius: 50%;
(椭圆)
(椭圆)
四角不同半径
15px 30px 45px 60px
15px 30px 45px 60px
CSS3 盒阴影
CSS3 的border-shadow属性允许您为元素添加一个或多个阴影效果。
.box {
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3); /* 基本阴影 */
box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.5); /* 内阴影 */
box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2), -1px -1px 5px rgba(255, 255, 255, 0.8); /* 多重阴影 */
box-shadow: 0 0 0 5px rgba(70, 130, 180, 0.5); /* 扩散阴影 */
}实现的效果：
基础阴影效果
内阴影效果
多重阴影效果
扩散阴影效果
浮动效果
霓虹效果
悬停效果
(鼠标移上来)
(鼠标移上来)
CSS3 边框图片
CSS3 的border-image属性允许你使用图像作为元素的边框，而不是传统的纯色边框。
.box-stretch {
border: 20px solid transparent;
border-image: url('/uploads/20250413/border-image.png') 30 stretch;
}
.box-around {
border: 20px solid transparent;
border-image: url('/uploads/20250413/border-image.png') 30 stretch;
}实现的效果：
stretch (拉伸)
round (圆整重复)
CSS3 边框属性
| 属性 | 描述 |
|---|---|
| border-image | 设置所有边框图像的速记属性。 |
| border-radius | 一个用于设置所有四个边框- *-半径属性的速记属性 |
| box-shadow | 附加一个或多个下拉框的阴影 |
评论区 0
发表评论
教程介绍
CSS3 是 CSS 技术的版本升级，在 CSS 基础上进行了扩展改进，引入了新的特性和模块。
36
章节
113
阅读
0
评论
反馈提交成功
感谢您的反馈，我们将尽快处理您的反馈