css3菜鸟教程学习笔记_CSS3 边框/圆角/盒阴影

作者: 图恩分类: 编程开发阅读: 702发布时间： 2020-07-12 16:41:43

一些最重要CSS3模块如下：选择器、盒模型、背景和边框、文字特效、2D/3D转换、动画、多列布局、用户界面。 CSS3 边框用 CSS3，你可以创建圆角边框，添加阴影框，并作为边界的形象而不使用设计程序，常用属性： border-radius：圆角语法：border-radius: 1-4 length|% / 1-4 length|%; 注意: 每个半径的四个值的顺序是：左上角，右上角，右下角，左下角。如果省略左下角，右上角是相同的。如果省略右下角，左上角是相同的。如果省略右上角，左上角是相同的。代码示例：

Test border-redius

测试结果 box-shadow ：阴影语法：box-shadow: h-shadow v-shadow blur spread color inset; 注意：boxShadow 属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表，每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0。代码示例：

Test box-shadow

测试结果 border-image：使用图片作为边框语法： border-image: source slice width outset repeat|initial|inherit; 代码示例：

Test border-image

测试结果