1.服务器端字体
语法:@font-face
@font-face{
font-family:WebFont;
src:url("fonts/Fontin_Sans_B_45b.otf")format("opentype");
}
div{font-family:WebFont;}
WebFon声明使用服务端字体
format声明字体文件的格式
2.iconfont图标字体(图标,特殊字体)
阿里矢量图库 购物车 下载代码 打开demo_unicode.html
CSS3新增属性
1.背景属性
background-clip:border-box(背景被裁剪到边框盒)/padding-box(背景被裁剪到内边距框)/content-box(背景被裁剪到内容框)
background-origin:border-box/padding-box/centent-box
背景默认在哪里出现
background-size:length/percentage/cover/contain
背景图片大小 px/%(占父元素)/cover(按边框长边等比例缩放,超出部分不显示)/contain(按边框最短边等比例缩放)
2.添加多张背景图
{background-image:url(),url(),url();}
3.边框属性
border-radius:15px; 圆角边框 2px 2px 右上,左下对角线
图片边框
border-image:url("url")A B C D/border-image-width border-image-repeat
ABCD当浏览器自动把边框使用到的图像进行分隔时的上边距,右边距,下边距,左边距,四个边距同时缩写成一个,不需要单位
4.盒阴影
box-shadow:h-shadow v-shadow blur spread color inset
h-shadow:水平阴影
v-shadow:垂直阴影
blur:模糊距离
spread:阴影尺寸
color阴影颜色
inset:将外部阴影改为内部阴影