CSS3

CSS3 模块

CSS3 被划分为模块。

其中最重要的 CSS3 模块包括:

  • 选择器
  • 框模型
  • 背景和边框
  • 文本效果
  • 2D/3D 转换
  • 动画
  • 多列布局
  • 用户界面

CSS3 边框

通过 CSS3,您能够创建圆角边框,向矩形添加阴影,使用图片来绘制边框 - 并且不需使用设计软件,比如 PhotoShop。

在本章中,您将学到以下边框属性:

  • border-radius
  • box-shadow
  • border-image

浏览器支持

Firefox、Chrome 以及 Safari 支持所有新的边框属性。Internet Explorer 9+ 支持 border-radius 和 box-shadow 属性。

注释:对于 border-image,Safari 5 以及更老的版本需要前缀 -webkit-。

Opera 支持 border-radius 和 box-shadow 属性,但是对于 border-image 需要前缀 -o-。

CSS3 圆角边框

在 CSS2 中添加圆角矩形需要技巧。我们必须为每个圆角使用不同的图片。

在 CSS3 中,创建圆角是非常容易的。

在 CSS3 中,border-radius 属性用于创建圆角:

实例

向 div 元素添加圆角:

div
{
border:2px solid;
border-radius:25px;
-moz-border-radius:25px; /* Old Firefox */
}


CSS3 边框阴影

在 CSS3 中,box-shadow 用于向方框添加阴影:

实例

向 div 元素添加方框阴影:

div
{
box-shadow: 10px 10px 5px #888888;
}


CSS3 边框图片

通过 CSS3 的 border-image 属性,您可以使用图片来创建边框:

实例

使用图片创建围绕 div 元素的边框:

div
{
border-image:url(border.png) 30 30 round;
-moz-border-image:url(border.png) 30 30 round; /* 老的 Firefox */
-webkit-border-image:url(border.png) 30 30 round; /* Safari 和 Chrome */
-o-border-image:url(border.png) 30 30 round; /* Opera */
}
原文地址:https://www.cnblogs.com/love-Z/p/4235383.html