边框

2018-05-21 15:29:12
admin
367
最后编辑:admin 于 2018-05-22 10:15:16

用 CSS3,你可以创建圆角边框,添加阴影框,并作为边界的图象而不使用设计程序,如 Photoshop。

在本章中,您将了解以下的边框属性:

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

CSS3 圆角

在 CSS2 中添加圆角棘手。我们不得不在每个角落使用不同的图像。

在 CSS3 中,很容易创建圆角。

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

这是圆角边框!
div
{
border:2px solid;
border-radius:25px;
}

  运行一下


使用 CSS3 border-radius 属性,你可以给任何元素制作 "圆角"。

以下为三个实例:

1. 指定背景颜色的元素圆角:

2. 指定边框的元素圆角:

3. 指定背景图片的元素圆角:

代码如下

#rcorners1 {
    border-radius: 25px;
    background: #8AC007;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}

#rcorners2 {
    border-radius: 25px;
    border: 2px solid #8AC007;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}

#rcorners3 {
    border-radius: 25px;
    background: url(paper.gif);
    background-position: left top;
    background-repeat: repeat;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}
运行一下

CSS3 盒阴影

CSS3 中的 box-shadow 属性被用来添加阴影:

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


  运行一下



CSS3 边界图片

有了 CSS3 的 border-image 属性,你可以使用图像创建一个边框:

border-image 属性允许你指定一个图片作为边框! 用于创建上文边框的原始图像:

在 div 中使用图片创建边框:

div
{
border-image:url(http://code.ybao.org/demo/img/border.png) 30 30 round;
-webkit-border-image:url(http://code.ybao.org/demo/img/border.png) 30 30 round; /* Safari 5 and older */
-o-border-image:url(http://code.ybao.org/demo/img/border.png) 30 30 round; /* Opera */
}

  运行一下


  • 在线客服
  • 关注微信
  • 联系电话
    • 欢迎咨询
    • 欢迎加入QQ群 303257430
  • 公众号:源宝网络
    • 联系电话及微信号 18902328227