CSS3第一章

边框圆角效果

border-radius：10px //所有角都是用半径为10px的圆角

border-radius：左上角，右上角，右下角和左下角（顺时针）

举个栗子：上半圆（高度设置宽度的一般即可）

反之右半圆（宽度设置高度的一般）

---

边框阴影 box-shadow

box-shadow：向元素添加阴影属性

X轴偏移量 Y轴偏移量 阴影模糊半径（可选） 阴影拓展半径（可选） 阴影颜色（可选） 投影方式（inset内部阴影，默认外阴影）

---

边框图片 border-image

border-image：url（图片路径）上右下左 延伸方式（round平铺、repeat重复、stretch拉伸）

---

颜色渐变

linear（线性渐变） radial（径性渐变）

linear-gradinet（方向，颜色起始与终点，可以有多个颜色）

举个栗子：

---

嵌入字体@font-face

它能够加载服务器的字体文件，让浏览器端可以显示用户里没有安装的字体：

语法：

@font-face{

font-family:“字体名称”

src:字体文件在服务器上的相对或绝对路径

}

---

background-origin

设置元素背景图片的起始位置

语法：background-origin:border-box（图片从边框开始显示）|padding-box（图片从内边距开始显示，默认值）|content-box（内容区域开始显示）

需要注意的是，背景要设置no-repeat，该属性才有效

---

background-size

设置背景图片的大小

auto：默认值，不改图片初始值

长度值：~

百分比：将图片宽高一次设置为所在元素高乘以百分比得出的数值

cover：将背景图片等比缩放以填满整个容器

contain：容纳，将背景图片等比缩放至某一边紧贴容器边缘为止