CSS新增属性与服务器端字体_dum_plings的博客-程序员宅基地

技术标签: CSS新增属性与服务器端字体  使用介绍  

1、背景属性

语法:background-clip:border-box/padding-box/conter-box

说明:在css2中,背景的显示范围是指内部补白之内的范围,不包括边框;
而在css2.1乃至css3中,背景的显示范围是指包括边框在内的范围。在css3
中,可以使用background-clip来修改背景的显示范围,如果将background-clip
的属性值设定为border,则背景范围包括边框,如果设定为padding,则不包括
边框。
border-box:背景被裁剪到边框盒
padding-box:背景被裁剪到内边距框
content-box;背景被裁剪到内容框

语法:background-origin:border-box/padding-box/conter-box

(图片的其实开始平铺的位置是 padding-box )
说明:在绘制背景图像时,默认是从内部padding区域的左上角开始,
但是可以利用background-origin属性来指定绘制时从边框的左上角
开始,或者从内容的左上角开始。

语法:background-size:length/percentag/cover/contain
说明:在css3中,可以使用background-size属性来指定背景图像的大小。
length:设置背景图像的高度和宽度。
第一个值设置宽度,第二个值设置高度。
如果只设置一个值,则第二个值会被设置为 auto

percentage:以父元素的百分比来设置背景图像的高度和宽度。

cover:吧背景图像扩张至足够大,以使背景图像完全覆盖背景区域,
背景图像的某些部分也许无法显示在背景定位区域中。
(吧图片按照最长的边框来,等比例缩放,直到覆盖最长边,超出的部分
就不管了)

contain:把图像扩张至最大尺寸,以使宽度和高度完全适应内容区域
(吧图片按照最短的边框来,等比例缩放,直到覆盖最短边,超出的部分
就不管了)

允许多重指定并配合着多个图像文件一起利用的属性有如下几个:
background-image
background-repeat
background-position
background-clip
background-origin
background-size

2、边框属性

语法:border-raidus

说明:圆角边框
border-raidus:左上角 右上角 右下角 左下角
border-raidus:左上角右下角 右上角 左下角(对角线)
border-top-left-raidus:左上角
border-top-right-raidus:右上角
border-bottom-left-raidus:左下角
border-bottom-right-raidus:右下角

语法:border-image:url(“url”)A B C D/border-image-width
border-image-repeat
说明:让出于随时变化状态的元素的长或宽的边框统一使用一个图像文件
来绘制。

第一个参数作为边框使用图像的路径,
ABCD表示当浏览器自动吧边框所使用的到的图像进行分割时的上边距,
右边距,下边距,左边距,四个边距相同时可以缩放写成一个不需要单位
border-width:表示边框的宽度
border-image-repeat:表示图像边框是否应平铺(repeat)
铺满(round)或拉伸(stretch)

3、盒阴影

语法:box-shadow:h-shadow v-shadow blur spread color inset

说明:让盒在显示时产生阴影效果。
h-shadow:必需。水平阴影的位置。允许负值。
v-shadow:必需。垂直阴影的位置。允许负值。
blur:可选。模糊距离。
spread:可选。阴影的尺寸。
color:可选。阴影的颜色。
inset:可选。将外部阴影(outset)改为内部阴影。

1、服务器端字体

在CSS3之前,页面文字所使用的字体必须已经在客户端中被安装
才能正常显示,在样式表中允许指定当前字不能正常显示时使用
的替代字体,但是如果这个替代字体在客户端中也没有安装时,使
用这个字体的文字就不能正常显示了。

为了解决这个问题,在CSS3中,新增了WEB Fonts功能,网页中
可以使用安装在服务器端的字体,只要某个字体在服务器端已经
安装,网页中就能够正常显示了。

语法:@font-face (先定义一个字体,在看调用文件名的属性是那种,然后要在设置一次字体,把名字改成我们自己设置的文字字体)
说明:
@font-face{
font-family:WebFont;
src:url(“fpmts/Fontion_Sans_B_45b.otf”)format(“opentype”);
}
div{font-family:WebFont;}
WebFont用来声明使用服务器端的字体。
format用来声明字体文件的格式,可以省略文件格式的声明而单独使用
src属性值。
文字文件的格式有OpenType与TrueType,前者的属性值为opentype,
后者的属性值为truetype;前者的文件扩展名为.otf,后者的为.ttf

2、iconfont

说明是iconfont?
我们现在通常所指的iconfont,是用字体文件取代图片文件,来展示图标、
特殊字体等元素的方法。

iconfont都有什么优缺点
首先它的体积要比图片小的多。

不仅体积小,而且还具有更好的可维护性(因为是矢量,所以拉伸不变形
颜色可以自行更换,支持一些CSS3对文字的效果)

导入阿里巴巴矢量图标,先加入购物车 再全部下载 ,按照里面的文档介绍
导入css包,再可以进行元素更改的样式。

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/dum_plings/article/details/102468106

智能推荐

随便推点