CSS3 边框

CSS3 边框

用CSS3,你可以创建圆角边框,添加阴影框,并作为边界的形象而不使用设计程序,如Photoshop。 在本章中,您将了解以下的边框属性:
  • border-radius
  • box-shadow
  • border-image

浏览器支持

属性 浏览器支持
border-radius
box-shadow
border-image
Internet Explorer 9+ 支持 border-radius 和 box-shadow. Firefox, Chrome, 和 Safari 支持所有最新的 border 属性. 注意: 前缀是-webkit-的Safari支持阴影边框。 前缀是-o-的Opera支持边框图像。

CSS3 圆角

在CSS2中添加圆角棘手。我们不得不在每个角落使用不同的图像。 在CSS3中,很容易创建圆角。 在CSS3中border-radius属性被用于创建圆角:
这是圆角边框!
div
{
border:2px solid;
border-radius:25px;
}
实例演示

CSS3盒阴影

CSS3中的box-shadow属性被用来添加阴影:
div
{
box-shadow: 10px 10px 5px #888888;
}
实例演示

CSS3边界图片

有了CSS3的border-image属性,你可以使用图像创建一个边框:
border-image属性允许你指定一个图片作为边框! 用于创建上文边框的原始图像:
在div中使用图片创建边框: Border
div
{
border-image:url(border.png) 30 30 round;
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */
-o-border-image:url(border.png) 30 30 round; /* Opera */
}
实例演示

新边框属性

属性 说明 CSS
border-image 设置所有边框图像的速记属性。 3
border-radius 一个用于设置所有四个边框- *-半径属性的速记属性 3
box-shadow 附加一个或多个下拉框的阴影 3

我们需要您的支持

支付宝捐助

捐助记录

  • 操** 5.00 2019-7-11
  • 王** 23.33 2019-7-2
  • 吴** 10.00 2019-7-15
  • 竺** 0.10 2019-7-1
  • 童** 5.00 2019-7-5
  • 高** 10.00 2019-7-11
  • 孙** 10.00 2019-7-6
  • 刘** 1.00 2019-7-29
  • 王** 10.00 2019-7-7
  • 陈** 20.00 2019-7-25
  • 潘** 100.00 2019-7-17
  • 庾** 1.00 2019-7-17
  • 于** 50.00 2019-7-12
  • 李** 10.00 2019-7-22
  • 钟** 20.00 2019-7-27
  • 毛** 1.00 2019-7-11
  • 许** 10.00 2019-7-21
  • 吕** 0.80 2019-7-10
  • 爱心会员 0.29 2019-7-30
  • 郭** 10.00 2019-7-23
  • 贾** 20.00 2019-7-19
  • 李** 20.00 2019-7-12
  • 张** 1.00 2019-7-26
  • 陈** 10.00 2019-7-24
  • 黄** 20.00 2019-7-14
  • 时** 0.10 2019-7-26
  • 魏** 10.00 2019-7-2
  • 李** 0.70 2019-7-13
  • 冯** 0.30 2019-7-11
  • 石** 10.00 2019-7-20
  • 陈** 20.00 2019-7-19
  • 何** 20.00 2019-7-22
  • 成** 0.10 2019-7-22
  • 赵** 10.00 2019-7-4
  • 刘** 5.00 2019-7-22

扫一扫关注

Web前端中国