css3中url的引用 |css设置具有凹凸感

CSS3中，大家可以用 url() 函数来引用外部资源，比如图片、字体等。url() 函数的语法非常简单，只需要将资源的路径写在括号里面即可，如下所示：

p {
background-image: url("bg.jpg");
font-family: url("font.ttf");
}

上面的代码中，第一个规则将一个名为“bg.jpg”的图片作为 p 元素的背景图像，而第二个规则则用了一个“font.ttf”字体文件。 当引用外部资源时，大家需要注意一些细节。首先，大家应该使用相对路径来指定资源的位置。这样，即使大家将网页文件移动到其他位置，也不会影响资源的引用。 另外，大家还可以使用 data URI scheme 来将图像或其他资源嵌入到 CSS 代码中。这种方式可以减少 HTTP 请求次数，从而提高网页的加载速度。例如，下面的代码使用 data URI scheme 将一个名为“logo.png”的图片嵌入到 CSS 代码中：

p {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==");
}

最后，大家也应该注意资源的加载顺序。如果 CSS 文件过大或者网速较慢，可能会导致资源的加载速度变慢，从而影响用户体验。因此，大家应该优先加载 CSS 文件，然后再加载其他资源。 总之，CSS3中的 url() 函数为大家提供了方便快捷的外部资源引用方式。如果使用得当，它可以为网页提供更加丰富和灵活的样式。