CSS3 边框

MaureenChen 2019-11-03

CSS3 边框

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

您将学到以下边框属性:border-radiusbox-shadowborder-image

一、圆角边框border-radius

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

1.1、border-radius语法

基本写法如下:

  • 设置左上角
border-top-left-radius:10px;
  • 设置右上角
border-top-right-radius:10px;
  • 设置左下角
border-bottom-left-radius:10px;
  • 设置左下角
border-bottom-right-radius:10px;
  • 简写设置四个角

    执行顺序如下: 左上-右上-右下-左下

border-radius:1px 2px 3px 4px;
  • 设置四角值统一
border-radius:10px;
  • 支持百分比
border-radius:100%;
  • 支持em
border-radius:2em;
  • 支持运算
border-radius:30px/30px; /*支持加和除 其余的不支持*/
  • JavaScript语法
document.getElementsByTagName("div")[0].style.borderRadius = "25px";

1.2浏览器兼容性

  • -webkit:代表Webkit枘核浏览器,如chrome and safari私有属性或内核识别码。
-webkit-border-radius:5px;
  • -moz:代表Firefox浏览器私有属性或内核识别码。
-moz-border-radius:5px;
  • ms代表ie浏览器私有属性或内核识别码。
-ms-border-radius: 5px;
  • -o-代表欧朋opera浏览器私有属性或内核识别码。
-o-border-radius: 5px;
  • IE9+Firefox 4+ChromeSafari 5+以及 opera支持 border-radius 属性。
border-radius:10px;

相关推荐