CSS进阶知识点--CSS3边框和圆角（浏览器前缀）、盒阴影

---

title: CSS进阶知识点--CSS3边框和圆角（浏览器前缀）、盒阴影
date: 2019-08-16 13:35:39
tags: CSS3
categories: CSS3

---

---

CSS3圆角

border-radius 属性

一个最多可指定四个 border-*-radius 属性的复合属性，这个属性允许你为元素添加圆角边框！

语法

border-radius: 1-4 length|% / 1-4 length|%

CSS3指定每个圆角

多值

四个值：第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角

三个值：第一个值为左上角，第二个值为右上角和左下角，第三个值为右下角

两个值：第一个值为左上角与右下角，第二个值为右上角与左下角

一个值：四个角相同

属性

属性	位置
border-top-left-radius	定义左上角的弧度
border-top-right-radius	定义右上角的弧度
border-bottom-right-radius	定义右下角的弧度
border-bottom-left-radius	定义左下角的弧度

CSS3 盒阴影

box-shadow 属性

box-shadow 属性可以设置一个或多个下拉阴影的框

语法

box-shadow：h-shadow v-shadow blur spread inset

属性值

• h-shadow(水平阴影的位置。允许负值。必写)

• v-shadow(垂直阴影的位置。允许负值。必写)

• blur(模糊距离。可选)

• spread(阴影的尺寸。可选)

• color(阴影的颜色。请参阅 CSS 颜色值)

• inset(可选。将外部阴影 (outset) 改为内部阴影)

CSS3 边界图片

border-image 属性

使用 border-image-* 属性来构建美丽的可扩展按钮

语法

border-image：source slice width outset repeat

属性值

• source：路径

• slice：指定图像的边界向内偏移（建议用百分比）

• width：图像边界的宽度（建议用百分比）

• outset：指定在边框外部绘制 border-image-area 的量

• repeat：图像边框是否重复(repeated)、拉伸(strectched)或铺满(rounded)

  1. strectch

  2. repeat

  3. round

  4. initial

  5. inherit

浏览器前缀

浏览器前缀	浏览器
-webkit-	谷歌
-moz-	火狐
-ms-	IE
-o-	opera