찾다

집 >웹 프론트엔드 >CSS 튜토리얼 >스타일 효과를 향상시키기 위해 CSS3를 사용하는 방법에 대한 자세한 소개

스타일 효과를 향상시키기 위해 CSS3를 사용하는 방법에 대한 자세한 소개

高洛峰
高洛峰원래의
2017-03-28 10:28:311951검색

CSS3로 강화

텍스트 그라데이션 위로 글라이드

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

요소에 둥근 모서리 만들기

추가 마크업이나 이미지를 추가하지 않고도 CSS3를 사용하여 양식 요소, 이미지, 심지어 단락 텍스트를 포함한 대부분의 요소에 둥근 모서리를 만들 수 있습니다. 

<!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 및 Safari 브라우저를 지원하는 데 필요한 공급업체 접두사를 포함하여 CSS 둥근 모서리를 사용한 네 가지 예입니다. .circle의 경우 75px을 사용하면 요소의 크기가 50%이므로 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%;
}
rrree

요소에 대해 4개의 동일한 둥근 모서리 만들기

  1. 이 단계는 선택 사항입니다. -webkit-border-radius: r를 입력하세요. 여기서 r는 반경입니다. 길이로 표시되는 필렛의 크기(단위 포함)

  2. border-radius: r을 입력합니다. 여기서 r은 필렛의 반경이며 첫 번째 단계와 동일한 값을 사용합니다. 이는 이 속성에 대한 표준 약식 구문입니다.

요소에 둥근 모서리 만들기

  1. 이 단계는 선택 사항입니다. 여기에 -webkit-border-top-left-radius: r를 입력하세요. r는 왼쪽 상단 모서리의 반경 크기로, 길이(단위 포함)로 표시됩니다.

  2. border-top-left-radius: r을 입력합니다. 여기서 r은 첫 번째 단계와 동일한 값을 사용합니다. 이는 이 속성에 대한 표준 긴 형식 구문입니다.

  3. 오른쪽 상단 모서리를 만들려면 top-right을 사용하고, 오른쪽 하단 모서리를 만들려면 bottom-right을 사용하세요. bottom-left

타원형 모깎기 만들기

  1. 이 단계는 선택 사항입니다.

    를 입력합니다. 여기서 -webkit-border-radius: x/y은 반경입니다. 가로 방향의 필렛, x은 세로 방향의 필렛 반경으로, 둘 다 길이(단위)로 표시됩니다. y

  2. 을 입력하세요. 여기서 border-radius: x/y과 x는 첫 번째 단계의 값과 같습니다. y

경계 반경(속성이 에서 상속되지 않음 )을 사용하여 그래픽 생성

  1. 입력

    여기 -webkit-border-radius: r는 요소의 반경 크기(길이 단위)입니다. 원을 만들려면 r 값이 요소 높이 또는 너비의 절반과 같아야 하는 짧은 형식의 구문을 사용합니다. r

  2. 을 입력합니다. 여기서 r은 요소의 반경 크기(길이 단위)이며 첫 번째 단계의 border-radius: r과 같습니다. 이는 접두사가 없는 표준 구문입니다. r

  참고:

을 지원하지 않는 이전 브라우저는 사각형 모서리가 있는 요소만 렌더링합니다. border-radius스타일이 적용되는 요소의 모서리에만 영향을 미치며 하위 요소에는 영향을 미치지 않습니다. 따라서 하위 요소에 배경이 있는 경우 배경은 하나 이상의 상위 요소 모서리에 나타나 둥근 모서리 스타일에 영향을 미칠 수 있습니다. 때때로 요소의 배경(여기서는 하위 요소의 배경이 아님)이 둥근 모서리를 통해 표시됩니다. 이러한 상황을 방지하려면 요소의 border-radius 선언 뒤에 스타일 규칙을 추가할 수 있습니다: <a href="http://www.php.cn/code/868.html" target="_blank"> background -클립<code>border-radius: 패딩박스;. <a href="http://www.php.cn/code/868.html" target="_blank">background-clip</a>: padding-box;

텍스트에 그림자 추가

 <a href="http://www.php.cn/wiki/861.html" target=" 사용 _blank">text-shadow<p style="text-align: left;"></p></a>는 텍스트를 표현하기 위해 이미지를 사용하지 않고도 단락, 제목 및 기타 요소의 텍스트에 동적 그림자 효과를 추가할 수 있습니다. <a href="http://www.php.cn/wiki/861.html" target="_blank">text-shadow</a>

요소의 텍스트에 그림자를 추가합니다

  1. 를 입력합니다. text-shadow:

  2. 각각

    (가로 오프셋), x-offset(세로 오프셋), y-offset(흐림 반경) 및 blur-radius를 나타내는 값을 입력합니다(3개 값 이전). ​​길이 단위의 경우 4개의 값 사이에 쉼표가 구분되지 않음)(예: color). -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，可以将正确的图标放入该位置。

위 내용은 스타일 효과를 향상시키기 위해 CSS3를 사용하는 방법에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：img[src=""] img에 경로가 없을 때 회색 테두리를 제거하는 방법에 대한 자세한 설명다음 기사：img[src=""] img에 경로가 없을 때 회색 테두리를 제거하는 방법에 대한 자세한 설명

관련 기사

더보기