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)
strectch
repeat
round
initial
inherit
浏览器前缀
| 浏览器前缀 | 浏览器 |
|---|---|
| -webkit- | 谷歌 |
| -moz- | 火狐 |
| -ms- | IE |
| -o- | opera |
