recherche

Maison  >  Article  >  interface Web  >  Introduction détaillée à l'utilisation de CSS3 pour améliorer les effets de style

Introduction détaillée à l'utilisation de CSS3 pour améliorer les effets de style

高洛峰
高洛峰original
2017-03-28 10:28:311907parcourir

Amélioré avec CSS3

Glisser sur le dégradé de texte

/* 这段代码实现了当鼠标滑过链接时的渐变效果 */
a {
    color: #007c21;
    transition: color .4s ease;
}
a:hover { color: #00bf32; }

Créer des coins arrondis pour les éléments

  Utilisez CSS3 pour créer des coins arrondis pour la plupart des éléments, y compris les éléments de formulaire, les images et même le texte de paragraphe, sans introduire de balisage ou d'images supplémentaires. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Rounded Corners</title>
    <link rel="stylesheet" href="css/rounded-corners.css" />
</head>
<body>
<p class="all-corners"></p>
<p class="one-corner"></p>
<p class="elliptical-corners"></p>
<p class="circle"></p>
</body>
</html>

Android, Mobile Safari et les navigateurs Safari. Pour .circle, utiliser 75px a le même effet que 50% car la taille de l'élément est 150像素*150像素. 

p {
    background: #999;
    float: left;
    height: 150px;
    margin: 10px;
    width: 150px;
}
.all-corners {
    -webkit-border-radius: 20px;
    border-radius: 20px;
}
.one-corner {
    -webkit-border-top-left-radius: 75px;
    border-top-left-radius: 75px;
}
.elliptical-corners {
    -webkit-border-radius: 50px / 20px;
    border-radius: 50px / 20px;
}
.circle {
    -webkit-border-radius: 50%;
    border-radius: 50%;
}
p {
    background: #ff9;
    border: 5px solid #326795;
    float: left;
    height: 150px;
    margin: 10px;
    width: 150px;
}
.example-1 {
    /* Makes the radius of the top-left and bottom-right corners 10px and 
    the top-right and bottom-left corners 20px */
    border-radius: 10px 20px;
}
.example-2 {
    /* Makes the radius of the top-left corner 20px, and all other corners 0 */
    border-radius: 20px 0 0;
}
.example-3 {
    /* Makes the radius of the top-left corner 10px, the top-right corner 20px, 
    the bottom-right corner 0, and the bottom-left corner 30px */
    border-radius: 10px 20px 0 30px;
}

Créez quatre coins arrondis identiques pour l'élément

  1. Cette étape est facultative, saisissez -webkit-border-radius: r , où r est la taille du rayon du congé, exprimée en longueur (avec unité).

  2. Entrez border-radius: r, où r est le rayon du congé, utilisez la même valeur qu'à la première étape. Il s’agit de la syntaxe abrégée standard pour cette propriété.

Créer un coin arrondi pour l'élément

  1. Cette étape est facultative, saisissez -webkit-border-top-left-radius: r, ici r est la taille du rayon du coin supérieur gauche, exprimée en longueur (avec unités).

  2. Entrez border-top-left-radius: r, où r utilise la même valeur qu'à la première étape. Il s’agit de la syntaxe longue standard pour cette propriété.

  3. Utilisez top-right pour créer le coin supérieur droit ; utilisez bottom-right pour créer le coin inférieur droit ; utilisez bottom-left pour créer le coin inférieur gauche.

Créer un congé elliptique

  1. Cette étape est facultative, saisissez -webkit-border-radius: x/y où x est le rayon du congé dans la direction horizontale, et y est le rayon du congé dans la direction verticale, tous deux exprimés en longueur (avec unités).

  2. Entrez border-radius: x/y, où x et y sont égaux aux valeurs de la première étape.

Utilisez border-radius (la propriété n'est pas héritée de par ) pour créer des graphiques

  1. Entrée-webkit-border-radius: rIci r est la taille du rayon de l'élément (avec unité de longueur). Pour créer un cercle, utilisez la forme courte de la syntaxe, où la valeur de r doit être égale à la moitié de la hauteur ou de la largeur de l'élément.

  2. Saisissez border-radius: r où r est la taille du rayon de l'élément (avec unité de longueur), qui est égale à r dans la première étape. Il s'agit d'une syntaxe standard sans préfixe.

  Remarque : les navigateurs plus anciens qui ne prennent pas en charge border-radius n'afficheront que les éléments avec des coins carrés. border-radiusN'affecte que les coins de l'élément auquel le style est appliqué, pas ses enfants. Par conséquent, si un élément enfant a un arrière-plan, celui-ci peut apparaître aux coins d'un ou plusieurs éléments parents, affectant ainsi le style des coins arrondis. Parfois, l'arrière-plan d'un élément (et non l'arrière-plan de ses éléments enfants ici) apparaît à travers ses coins arrondis. Pour éviter cette situation, vous pouvez ajouter une règle de style après la déclaration border-radius de l'élément : <a href="http://www.php.cn/code/868.html" target="_blank"> background-clip<code><a href="http://www.php.cn/code/868.html" target="_blank">background-clip</a>: padding-box;: padding-box;.

Ajouter une ombre au texte

 Utilisez <a href="http://www.php.cn/wiki/861.html" target=" _blank">text-shadow<code><a href="http://www.php.cn/wiki/861.html" target="_blank">text-shadow</a> peut ajouter des effets d'ombre dynamiques au texte dans les paragraphes, titres et autres éléments sans utiliser d'images pour représenter le texte.

Ajoute une ombre au texte de l'élément

  1. Entrez text-shadow:.

  2. Entrez les valeurs représentant x-offset (décalage horizontal), y-offset (décalage vertical), blur-radius (rayon de flou) et color respectivement (avant Trois valeurs ​​avec des unités de longueur, sans virgules séparées entre quatre valeurs), comme -2px 3px 7px #999.

为元素的文本添加多重阴影

  1. 输入text-shadow:。

  2. 分别输入x-offset（水平偏移量）、y-offset（垂直偏移量）、blur-radius（模糊半径）和color的值（前三个值带长度单位，四个值之间不用逗号分隔）。blur-radius的值是可选的。

  3. 输入,（逗号）。

  4. 对四种属性使用不同的值重复第二步。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Text Shadow</title>
    <link rel="stylesheet" href="css/text-shadow.css" />
</head>
<body>
<p class="basic">Basic Shadow</p>
<p class="basic-negative">Basic Shadow</p>
<p class="blur">Blur Radius</p>
<p class="blur-inversed">Blur Radius</p>
<p class="multiple">Multiple Text Shadows</p>
</body>
</html>
body {
    background: #fff;
    color: #222;
    font: 100%/1.05 helvetica, sans-serif;
    padding-top: 20px;
}
p {
    color: #222; /* nearly black */
    font-size: 4.5em;
    font-weight: bold;
    margin: 0 0 45px;
}
p:last-child {
    margin: 0;
}
.basic {
    text-shadow: 3px 3px #aaa;
}
/* uses negative offsets--you can mix positive and negative ones, too. */
.basic-negative {
    text-shadow: -4px -2px #ccc; /* a little lighter grey than #aaa */
}
.blur {
    text-shadow: 2px 2px 10px grey;
}
.blur-inversed {
    color: white;
    text-shadow: 2px 2px 10px #000; /* black */
}
/* this example has two shadows, but you can include 
more by separating each with a comma */
.multiple {
    text-shadow:
        2px 2px white, 
        6px 6px rgba(50,50,50,.25);
}

  这些类演示了几种text-shadow的效果。第一个、第二个和第五个都省略了模糊半径的值。.multiple类告诉我们，可以为单个元素添加多个阴影样式，每组属性之间用逗号分隔。这样，通过结合使用多个阴影样式，可以创建出特殊而有趣的效果。

将text-shadow（属性是继承的）改回默认值
  即输入text-shadow: none;，这个属性不需要输入使用厂商前缀。

  text-shadow属性接受四个值：带长度单位的x-offset、带长度单位的y-offset、可选的带长度单位的blur-radius以及color值。如不指定blur-radius，将假定其值为0。x-offset和y-offset值可以是正整数也可以是负整数，也就是说1px和-1px都是有效的。blur-radius值必须是正整数。这三个值都可以为0。尽管text-shadow的语法与边框和背景属性的语法是类似的，但它不能像边框和背景那样单独的指定四个属性值。如果不指定text-shadow，它就会使用初始值none。

为其他元素添加阴影
  使用text-shadow属性可以为元素的文本添加阴影，使用box-shadow属性则可以为元素本身添加阴影。他们的基础属性集是相同的，不过box-shadow还允许使用使用两个可选的属性：inset关键字属性和spread属性（用于扩张或收缩阴影）。
  box-shadow属性接受六个值：带长度单位的x-offset和y-offset、可选的带长度单位的blur-radius、可选的inset关键字、可选的带长度单位的spread值及color值。如果不指定blur-radius和spread的值，则设为0。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Box Shadow</title>
    <link rel="stylesheet" href="css/box-shadow.css" />
</head>
<body>
<p class="shadow">
    <p>Shadow with Blur</p>
</p>
<p class="shadow-negative">
    <p>Shadow with Negative Offsets and Blur</p>
</p>
<p class="shadow-spread">
    <p>Shadow with Blur and Spread</p>
</p>
<p class="shadow-offsets-0">
    <p>Shadow with Offsets Zero, Blur, and Spread</p>
</p>
<p class="inset-shadow">
    <p>Inset Shadow</p>
</p>
<p class="multiple">
    <p>Multiple Shadows</p>
</p>
<p class="shadow-negative-spread">
    <p>Shadow with Blur and Negative Spread</p>
</p>
</body>
</html>
body {
    background: #000;
    color: #fff;
}
h1 {
    font-family: sans-serif;
    font-size: 2.25em;
    line-height: 1.1;
    text-align: center;
}
/* NOTE: The background-image URLs are different below than in the example shown in the book, because I've placed the images in a sub-folder (called "img"), as is typical when organizing a site. Also, I thought it would be helpful for you to see how to construct your background-image URLs under these circumstances. Note that the URLs are relative to where the style sheet lives, NOT the HTML page that is displaying the image. */
.night-sky {
    background-color: navy; /* fallback color */
    background-image: 
          url(../img/ufo.png), 
          url(../img/stars.png), 
         url(../img/stars.png), 
         url(../img/sky.png);
    background-position: 
          50% 102%, 
          100% -150px, 
          0 -150px, 
          50% 100%;
    background-repeat: 
         no-repeat, 
         no-repeat, 
         no-repeat, 
         repeat-x;
    height: 300px;
    margin: 25px auto 0; /* slightly different than book */
    padding-top: 36px;
    width: 75%;
}

  上面程序用于演示使用box-shadow添加一个或多个阴影的效果。前五个类各自应用了一个彼此不同的阴影样式。最后一个类应用了两个阴影（还可以应用更多个阴影）。不理解box-shadow的浏览器会直接忽略这些CSS样式规则，呈现没有阴影的页面。

为元素添加阴影

  1. 输入-webkit-box-shadow:。

  2. 分别输入表示x-offset、y-offset、blur-radius、spread和color的值（前四个值均带长度单位），例如 2px 2px 5px #333。

  3. 输入box-shadow:，再重复第二步。

创建内阴影

  1. 输入-webkit-box-shadow:。

  2. 分别输入表示表示x-offset、y-offset、blur-radius、spread和color的值（前四个值均带长度单位），例如 2px 2px 5px #333。

  3. 在冒号后输入inset，再输入一个空格（也可以在第二步之前输入inset和一个空格）。

  4. 输入box-shadow:，再重复第二步和第三步。

为元素应用多重阴影

  1. 输入-webkit-box-shadow:。

  2. 分别输入表示表示x-offset、y-offset、blur-radius、spread和color的值（前四个值均带长度单位），例如 2px 2px 5px #333。如果有必要，将inset关键字包含在内。

  3. 输入逗号。

  4. 对每种属性使用不同的值重复第二步。

  5. 输入box-shadow:，再重复第二步至第四步。

将box-shadow（属性是不继承的）改回默认值

  1. 输入-webkit-box-shadow: none;。

  2. 输入box-shadow: none;。

注：x-offset、y-offset和spread值可以是正整数，也可以是负整数。blur-radius值必须是正整数。这三个值都可以为零。inset关键字可以让阴影位于元素内部。

应用多重背景

  多重背景几乎可以应用于任何元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Multiple Backgrounds</title>
    <link rel="stylesheet" href="css/multiple-backgrounds.css" />
</head>
<body>
<p class="night-sky">
    <h1>In the night sky...</h1>
</p>
</body>
</html>
...
.night-sky {
    background-color: navy; /* fallback color */
    background-image: 
          url(../img/ufo.png), 
          url(../img/stars.png), 
         url(../img/stars.png), 
         url(../img/sky.png);
    background-position: 
          50% 102%, 
          100% -150px, 
          0 -150px, 
          50% 100%;
    background-repeat: 
         no-repeat, 
         no-repeat, 
         no-repeat, 
         repeat-x;
    height: 300px;
    margin: 25px auto 0; /* slightly different than book */
    padding-top: 36px;
    width: 75%;
}

为单个元素应用多重背景图像（不需要使用厂商前缀）

  1. 输入background-color: b，这里的b是希望为元素应用的备用背景颜色。

  2. 输入background-image: u，这里的u是绝对或相对路径引用的url列表（用逗号分隔。支持多重背景的浏览器，图像是分层次相互重叠在一起的，用逗号分隔的列表中的第一个图像位于顶部。）

  3. 输入background-position: p，这里的p是成对的x-offset和y-offset（可以是正的，也可以是负的；带长度单位或者关键字，如center top）的集合，用逗号分隔。对于第二步中指定的每个url，都应有一组x-offset和y-offset。

  4. 输入background-repeat: r，这里的r是repeat-x、repeat-y或no-repeat值，用逗号分隔，第二步中指定的每个url对应一个值。

  对于多重背景图像，可以使用标准的短形式语法，即使用逗号分隔每组背景参数。这种表示方法的好处是开发者既可以指定备用背景颜色，也可以为旧的浏览器指定图像。

.night-sky {
    /* fallback with both a color and image */
    background: navy url(../img/ufo.png) no-repeat center bottom;
    /* for supporting browsers */
    background:         
        url(../img/ufo.png) no-repeat 50% 102%,
        url(../img/stars.png) no-repeat 100% -150px,
        url(../img/stars.png) no-repeat 0 -150px,
        url(../img/sky.png) repeat-x 50% 100%;
    height: 300px;
    margin: 25px auto 0;
    padding-top: 36px;
    width: 75%;
}

使用渐变背景

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Gradient Backgrounds</title>
    <link rel="stylesheet" href="css/gradients.css" />
</head>
<body>
<p class="vertical-down"><p>default</p></p>
<p class="vertical-up"><p>to top</p></p>
<p class="horizontal-rt"><p>to right</p></p>
<p class="horizontal-lt"><p>to left</p></p>
<p class="angle-bot-rt"><p>to <br />bottom right</p></p>
<p class="angle-bot-lt"><p>to <br />bottom left</p></p>
<p class="angle-top-rt"><p>to top right</p></p>
<p class="angle-top-lt"><p>to top left</p></p>
<p class="angle-120deg"><p>120deg</p></p>
<p class="angle-290deg"><p>290deg</p></p>
<section class="radial">
    <p class="radial-center"><p>default</p></p>
    <p class="radial-top"><p>at top</p></p>
    <p class="radial-size-1"><p>100px, 50px</p></p>
    <p class="radial-size-2"><p>70% 90% at <br />bottom left</p></p>
    <p class="radial-various-1"><p>various 1</p></p>
    <p class="radial-various-2"><p>various 2</p></p>
</section>
<section class="color-stops">
    <p class="color-stops-1"><p>yellow 10%, green</p></p>
    <p class="color-stops-2"><p>to top right, yellow, <br />green 70%, <br />blue</p></p>
</section>
</body>
</html>
body {
    padding: 1.25em; /* 20px/16px, so 20px on each side */
    font-size: 100%;
}
p {
    float: left;
    height: 150px;
    margin: 10px;
    width: 150px;
}
p {
    color: #fff;
    font: bold 1.25em/1 sans-serif; /* 20px/16px */
    padding-top: 1.65em; /* 33px/16px */
    text-align: center;
}
/* NOTE: The gradients below are in the standard CSS3 syntax. The browsers that support them are Chrome 26+, Firefox 16+, IE 10+, and Opera 12.10+. See gradients-with-browser-prefixes.css for the same gradient effects, but with the vendor prefix code also included so the gradients will work on several older browsers.A background with a "fallback" comment is the color that will show in browsers that don't support the gradient syntax. You can use a backgroundimage as a fallback as well (either on its own or in combination with a color).For example, background: red url(gradient-image.jpg) no-repeat;. */
/* LINEAR GRADIENTS
------------------------------------------ */
/* :::: Vertical :::: */
.vertical-down {
    background: silver; /* fallback */
    /* default gradient, so you don't need to specify "to bottom" before the colors */
    background: linear-gradient(silver, black);
}
.vertical-up {
    background: silver;
    background: linear-gradient(to top, silver, black);
}
/* :::: Horizontal :::: */
.horizontal-rt {
    background: silver; /* fallback */
    background: linear-gradient(to right, silver, black);
}
.horizontal-lt {
    background: silver; /* fallback */
    background: linear-gradient(to left, silver, black);
}
/* :::: Diagonal Angles :::: */
/* Note: The figures on page 377 show aqua as the fallback color, but I've switched it
to navy below because the white text will be easier to read on a navy background. */
.angle-bot-rt {
    background: navy; /* fallback */
    background: linear-gradient(to bottom right, aqua, navy);
}
.angle-bot-lt {
    background: navy; /* fallback */
    background: linear-gradient(to bottom left, aqua, navy);
}
.angle-top-rt {
    background: navy; /* fallback */
    background: linear-gradient(to top right, aqua, navy);
}
.angle-top-lt {
    background: navy; /* fallback */
    background: linear-gradient(to top left, aqua, navy);
}
/* :::: Angles via Degrees :::: */
.angle-120deg {
    background: navy; /* fallback */
    background: linear-gradient(120deg, aqua, navy);
}
.angle-290deg {
    background: navy; /* fallback */
    background: linear-gradient(290deg, aqua, navy);
}
/* RADIAL GRADIENTS
------------------------------------------ */
/* :::: Radial :::: */
.radial p {
    text-shadow: 0 0 3px #000;
}
.radial-center {
    background: red; /* fallback */
    background: radial-gradient(yellow, red); /* default */
}
.radial-top {
    background: red; /* fallback */
    background: radial-gradient(at top, yellow, red);
}
.radial-size-1 {
    background: red; /* fallback */
    background: radial-gradient(100px 50px, yellow, red);
}
.radial-size-2 {
    background: red; /* fallback */
    background: radial-gradient(70% 90% at bottom left, yellow, red);
}
.radial-various-1 {
    background: red; /* fallback */
    background: radial-gradient(closest-side at 70px 60px, yellow, lime, red);
}
.radial-various-2 {
    background: red; /* fallback */
    background: radial-gradient(30px 30px at 65% 70%, yellow, lime, red);
}
/* LINEAR GRADIENTS WITH COLOR STOPS
------------------------------------------ */
.color-stops p {
    margin-bottom: 30px;
}
.color-stops p {
    padding-top: 25px;
    text-shadow: 0 0 3px #000;
}
.color-stops-2 p {
    font-size: 18px;
    line-height: 1.05;
}
.color-stops-1 {
    background: green; /* fallback */
    background: linear-gradient(yellow 10%, green);
}
.color-stops-2 {
    background: green; /* fallback */
    background: linear-gradient(to top right, yellow, green 70%, blue);
}

创建备用背景颜色

  输入background: color或者background-color: color，这里的color可以是十六进制数、RGB值以及其他任何支持的颜色名称，另外也可以使用图像。最好不要将RGBA、HSL或HSLA值作为备用背景颜色（如果你不打算支持IE则不必在意），因为IE8及以前的版本不支持。

定义线性渐变

  1. 输入background: linear-gradient(。

  2. 如果希望渐变方向是从上向下（默认方向），则可以跳过这一步。输入方向后面加一个逗号，方向指to top、to right、to bottom right、to top right等这样的值。或者输入方向后面加一个逗号，这里的方向指的是角度值（如45deg、107deg等）。

  3. 根据后面讲到的“指定颜色”等，定义渐变颜色。

  4. 输入);完成渐变。

定义径向渐变

  1. 输入background: radial-gradient(。

  2. 指定渐变的形状。希望指定尺寸则可根据第三步中指定的尺寸自行确定。否则输入circle或ellipse。

  3. 指定渐变的尺寸。如果希望尺寸为自动指定的值（默认值为·farthest-corner·，最远的角），则跳过这一步。否则输入代表渐变宽度和高度的一个长度值（如200px或7em）或代表宽度和高度的一对值（390px 175px或60% 85%）。注意，如果只使用一个值，则这个值不能是百分数。或者输入closest-side、farthest-side、closest-corner或farthest-corner。这些关键字代表相对于渐变的中心，渐变可以伸展到多大的空间。边界决定了渐变的尺寸。

  4. 指定渐变的位置。希望渐变的位置从元素的中心开始（默认值）则可跳过这一步。输入at top、at right、at bottom left、at top right等表示渐变中心位置的值。或者输入表示渐变中心位置的一对坐标，并以at开头，例如at 200px 43px、at 30% 40%、at 50% -10px等。

  5. 定义渐变颜色。

  6. 输入);完成渐变。

指定颜色
  输入至少两种颜色，每种颜色之间用逗号分隔。指定的第一个颜色出现在渐变的开始位置，最后一个出现的颜色出现在渐变的结束位置。对于径向渐变，它们分别为最里边的颜色和最外边的颜色。

为元素设置不透明度

  opacity属性不继承。
  使用opacity属性可以修改元素的透明度。方法是输入opacity: x,这里的x表示元素元素的不透明程度（两位小数，不带单位）。
  opacity的默认值为1（完全不透明），范围为0~1。
  通过使用opacity属性和:hover伪属性，可以产生一些有趣且实用的效果。例如img { opacity: .75; }默认情况下可以将图片设置为75%的不透明度，img:hover { opacity: 1; }可导致用户鼠标停留在元素上时元素变为不透明。在将缩略图链接到全尺寸版本时经常看到这种效果。对于访问者来说，悬浮可增强图像的动感。
  opacity属性与使用RGBA或HSLA设置的透明背景色是两个容易混淆的概念。opacity影响的是整个元素（包括其内容），而background-color: rgba(128,0,64,.6);这样的设置仅影响背景的透明度。

生成内容的效果

  使用<a href="http://www.php.cn/wiki/977.html" target="_blank">:before</a>和<a href="http://www.php.cn/wiki/978.html" target="_blank">:after</a>伪元素可以很方便地为页面添加一些令人难以置信的设计效果。它们可以与content属性结合使用，从而创建所谓的生成内容。生成内容指的是通过CSS创建的内容而不是HTML生成的。

...
<p>This area is one of the most tranquil spaces at the Villa. As I wandered around, enjoying shade provided by sycamore and laurel trees and serenaded by splashing water from two sculptural fountains, I couldn't help but think … <a href="victoria.html" class="more">Read More</a></p>
...
/* The generated content */
.more:after {
    content: " »";
}

  通过上面代码，可以使带有class="more"的元素会在其后显示一个双箭头，以后如需变动，修改也只需要修改.more类即可，而不需要改动大量的HTML页面。

使用sprite拼合图像

  浏览器中文本显示速度很快，但是图像往往会减慢页面的加载速度。为解决这一问题，可以将多个图像拼合成单个背景图像（sprite），再通过CSS控制具体显示图像的哪一部分，使用的就是background-position属性。

.documents li {
    margin-top: .45em;
}
/* Each link in the HTML has this class */
.icon {
    display: inline-block;
    line-height: 1.1;
    font-size: .875em;
    min-height: 16px; /* set to height of icon so it isn't cut off at all */
    padding-left: 23px;
    padding-top: 2px;
    /* allows positioning the icon absolutely relative to elements with class="icon" in the HTML */
    position: relative;
}
.icon:before {
    background-image: url(../img/sprite.png);
    content: " ";
    display: block;
    height: 16px; /* icon height */
    left: 0; /* default. change this if want the icon to appear in different spot */
    position: absolute;
    width: 16px; /* icon width */
    top: 0; /* default. change this if want the icon to appear in different spot */
}
/* Shift position of sprite image for any document filename that ends with .xls */
a[href$=".xls"]:before {
    background-position: -17px 0;
}
/* Shift position of sprite image for any document filename that ends with .docx */
a[href$=".docx"]:before {
    background-position: -34px 0;
}

  可以将sprite应用于任意数量的元素。在上面这个例子中，使用.icon:before来实现所需的效果。这样sprite就是通过content: " ";生成的空格的背景图像。将其设置为display: block;，从而就可以设置与图标大小匹配的高度和宽度。没有这三个属性，图像将不会显示。通过使用background-position，可以将正确的图标放入该位置。

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Explication détaillée de la façon de supprimer la bordure grise lorsque img[src=""] img n'a pas de cheminArticle suivant：Explication détaillée de la façon de supprimer la bordure grise lorsque img[src=""] img n'a pas de chemin

Articles Liés

Voir plus