边框圆角效果
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：容纳，将背景图片等比缩放至某一边紧贴容器边缘为止
网友评论