13CSS3圆角与边框

[目录]

目录

• [目录]
  • 一、CSS3圆角
  • 二、边框

一、CSS3圆角

1. border-radius属性：一个最多可指定四个border-*-radius属性的复合属性，这个属性，这个属性允许为元素添加圆角边框
2. 语法：border-radius:1-4 length|% / 1-4 length|%;
3. CSS3指定每个圆角
   多值：
   • 四个值：第一个值左上角、第二个值右上角、第三个值右下角、第四个值左下角
   • 三个值：第一个值左上角、第二个值右上角和左下角、第三个值右下角
   • 两个值：第一个值左上角和右下角、第二个值右上角和左下角
   • 一个值：四个圆角值相同

二、边框

1. CSS3盒阴影
   • box-shadow属性：box-shadow属性可以设置一个或多个下拉阴影的框
   • 语法：box-shadow:h-shadow v-shadow blur spread color inset;
2. CSS3边界图片
   • border-image属性:使用border-image-*属性来构建美丽的可扩展按钮
   • 语法：border-image:source slice width outset repeat;
3. border-image-source属性
   • border-image-source属性指定要使用的图像，而不是由border-style属性设置的边框样式
   • 语法：border-image-source:none|image;
4. border-image-slice属性
   • border-image-slice属性指定图像的边界向内偏移
   • 语法：border-image-slice:number|%|fill;
5. border-image-width属性
   • border-image-width属性指定图像边界的宽度
   • 语法：border-image-number|%|auto;
6. border-image-outset属性
   • border-image-outset用于指定在边框外部绘制border-image-area的量
   • 语法：border-image-outset:length|number;
7. border-image-repeat属性
   • border-image-repeat属性用于图像边界是否重复（repeat）、拉伸（stretched）或铺满（rounded）
   • 语法：border-image-repeat:stretch|repeat|round|initial|inherit;