CSS3基础
一、CSS轮廓
1.作用：主要是用来突出元素的作用
2.属性与描述
3.示例
二、多列
多列属性
多列示例
| 属性 |
描述 |
CSS |
| 规定元素应该被分隔的列数。 |
3 |
|
| 规定如何填充列。 |
3 |
|
| 规定列之间的间隔。 |
3 |
|
| 设置所有 column-rule-* 属性的简写属性。 |
3 |
|
| 规定列之间规则的颜色。 |
3 |
|
| 规定列之间规则的样式。 |
3 |
|
| 规定列之间规则的宽度。 |
3 |
|
| 规定元素应该横跨的列数。 |
3 |
|
| 规定列的宽度。 |
3 |
|
| 规定设置 column-width 和 column-count 的简写属性。 |
3 |
瀑布流效果
瀑布流效果就是指多列宽度相同，高度不等分布的效果
瀑布流实现示例
三、边框相关样式
1.圆角边框
1.1作用
圆角边框的绘制是Web网站或Web应用程序中经常用来美化页面效果的手法之一。
1.2语法
border-radius: 取值
注意：按顺序设置每个 radii 的四个值。如果省略 bottom-left，则与 top-right 相同。如果省略 bottom-right，则与 top-left 相同。如果省略 top-right，则与 top-left 相同。
1.3实例—向div元素添加圆角边框
div
{
border:2px solid;
border-radius:25px;
}
2.图像边框
21.作用
在CSS3中，增加了border-image属性，可以让元素的长度或宽度处于随时变化状态的边框统一使用一个图像文件来进行绘制。
2.2.语法
| 值 |
描述 |
测试 |
|
| border-image-source |
用在边框的图片的路径。 |
||
| border-image-slice |
图片边框向内偏移。 |
||
| border-image-width |
图片边框的宽度。 |
||
| border-image-outset |
边框图像区域超出边框的量。 |
||
| border-image-repeat |
图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。 |
||
border-image 属性是一个简写属性，用于设置以上属性。
2.3.实例--将图片规定为包围 div 元素的边框：
div
{
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 */
-o-border-image:url(border.png) 30 30 round; /* Opera */
border-image:url(border.png) 30 30 round;
}
3.边框阴影
3.1作用
在 CSS3 中，box-shadow 用于向方框添加阴影。
3.2 语法
box-shadow: h-shadow v-shadow blur spread color inset;
注释：box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。
| 值 |
描述 |
测试 |
| h-shadow |
必需。水平阴影的位置。允许负值。 |
|
| v-shadow |
必需。垂直阴影的位置。允许负值。 |
|
| blur |
可选。模糊距离。 |
|
| spread |
可选。阴影的尺寸。 |
|
| color |
可选。阴影的颜色。请参阅 CSS 颜色值。 |
|
| inset |
可选。将外部阴影 (outset) 改为内部阴影。 |
3.3实例--向 div 元素添加 box-shadow：
div
{
box-shadow: 10px 10px 5px #888888;
}