스타일 효과를 향상시키기 위해 CSS3를 사용하는 방법에 대한 자세한 소개
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%;
}요소에 대해 4개의 동일한 둥근 모서리 만들기
이 단계는 선택 사항입니다.
-webkit-border-radius: r를 입력하세요. 여기서r는 반경입니다. 길이로 표시되는 필렛의 크기(단위 포함)border-radius: r을 입력합니다. 여기서r은 필렛의 반경이며 첫 번째 단계와 동일한 값을 사용합니다. 이는 이 속성에 대한 표준 약식 구문입니다.
요소에 둥근 모서리 만들기
이 단계는 선택 사항입니다. 여기에
-webkit-border-top-left-radius: r를 입력하세요.r는 왼쪽 상단 모서리의 반경 크기로, 길이(단위 포함)로 표시됩니다.border-top-left-radius: r을 입력합니다. 여기서r은 첫 번째 단계와 동일한 값을 사용합니다. 이는 이 속성에 대한 표준 긴 형식 구문입니다.오른쪽 상단 모서리를 만들려면
top-right을 사용하고, 오른쪽 하단 모서리를 만들려면bottom-right을 사용하세요.bottom-left
타원형 모깎기 만들기
- 이 단계는 선택 사항입니다.
를 입력합니다. 여기서
-webkit-border-radius: x/y은 반경입니다. 가로 방향의 필렛,x은 세로 방향의 필렛 반경으로, 둘 다 길이(단위)로 표시됩니다.y 을 입력하세요. 여기서
border-radius: x/y과x는 첫 번째 단계의 값과 같습니다.y
경계 반경(속성이 에서 상속되지 않음 )을 사용하여 그래픽 생성
- 입력
여기
-webkit-border-radius: r는 요소의 반경 크기(길이 단위)입니다. 원을 만들려면r값이 요소 높이 또는 너비의 절반과 같아야 하는 짧은 형식의 구문을 사용합니다.r 을 입력합니다. 여기서 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>요소의 텍스트에 그림자를 추가합니다
를 입력합니다.
text-shadow:- 각각
(가로 오프셋),
x-offset(세로 오프셋),y-offset(흐림 반경) 및blur-radius를 나타내는 값을 입력합니다(3개 값 이전). 길이 단위의 경우 4개의 값 사이에 쉼표가 구분되지 않음)(예:color).-2px 3px 7px #999
为元素的文本添加多重阴影
输入
text-shadow:。分别输入
x-offset（水平偏移量）、y-offset（垂直偏移量）、blur-radius（模糊半径）和color的值（前三个值带长度单位，四个值之间不用逗号分隔）。blur-radius的值是可选的。输入,（逗号）。
对四种属性使用不同的值重复第二步。
<!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样式规则，呈现没有阴影的页面。
为元素添加阴影
输入
-webkit-box-shadow:。分别输入表示
x-offset、y-offset、blur-radius、spread和color的值（前四个值均带长度单位），例如2px2px5px#333。输入
box-shadow:，再重复第二步。
创建内阴影
输入
-webkit-box-shadow:。分别输入表示表示
x-offset、y-offset、blur-radius、spread和color的值（前四个值均带长度单位），例如2px2px5px#333。在冒号后输入
inset，再输入一个空格（也可以在第二步之前输入inset和一个空格）。输入
box-shadow:，再重复第二步和第三步。
为元素应用多重阴影
输入
-webkit-box-shadow:。分别输入表示表示
x-offset、y-offset、blur-radius、spread和color的值（前四个值均带长度单位），例如2px2px5px#333。如果有必要，将inset关键字包含在内。输入逗号。
对每种属性使用不同的值重复第二步。
输入
box-shadow:，再重复第二步至第四步。
将box-shadow（属性是不继承的）改回默认值
输入
-webkit-box-shadow: none;。输入
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%;
}为单个元素应用多重背景图像（不需要使用厂商前缀）
输入
background-color: b，这里的b是希望为元素应用的备用背景颜色。输入
background-image: u，这里的u是绝对或相对路径引用的url列表（用逗号分隔。支持多重背景的浏览器，图像是分层次相互重叠在一起的，用逗号分隔的列表中的第一个图像位于顶部。）输入
background-position: p，这里的p是成对的x-offset和y-offset（可以是正的，也可以是负的；带长度单位或者关键字，如center top）的集合，用逗号分隔。对于第二步中指定的每个url，都应有一组x-offset和y-offset。输入
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及以前的版本不支持。
定义线性渐变
输入
background: linear-gradient(。如果希望渐变方向是从上向下（默认方向），则可以跳过这一步。输入方向后面加一个逗号，方向指
to top、to right、to bottom right、to top right等这样的值。或者输入方向后面加一个逗号，这里的方向指的是角度值（如45deg、107deg等）。根据后面讲到的“指定颜色”等，定义渐变颜色。
输入
);完成渐变。
定义径向渐变
输入
background: radial-gradient(。指定渐变的形状。希望指定尺寸则可根据第三步中指定的尺寸自行确定。否则输入
circle或ellipse。指定渐变的尺寸。如果希望尺寸为自动指定的值（默认值为·farthest-corner·，最远的角），则跳过这一步。否则输入代表渐变宽度和高度的一个长度值（如
200px或7em）或代表宽度和高度的一对值（390px175px或60%85%）。注意，如果只使用一个值，则这个值不能是百分数。或者输入closest-side、farthest-side、closest-corner或farthest-corner。这些关键字代表相对于渐变的中心，渐变可以伸展到多大的空间。边界决定了渐变的尺寸。指定渐变的位置。希望渐变的位置从元素的中心开始（默认值）则可跳过这一步。输入
at top、at right、at bottom left、at top right等表示渐变中心位置的值。或者输入表示渐变中心位置的一对坐标，并以at开头，例如at 200px 43px、at 30% 40%、at 50% -10px等。定义渐变颜色。
输入
);完成渐变。
指定颜色
输入至少两种颜色，每种颜色之间用逗号分隔。指定的第一个颜色出现在渐变的开始位置，最后一个出现的颜色出现在渐变的结束位置。对于径向渐变，它们分别为最里边的颜色和最外边的颜色。
为元素设置不透明度
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7341
9
1627
14
1352
46
1265
25
1210
29
순수한 CSS3로 물결 효과를 얻는 방법은 무엇입니까? (코드 예)
Jun 28, 2022 pm 01:39 PM
순수한 CSS3로 물결 효과를 얻는 방법은 무엇입니까? 이 기사에서는 SVG 및 CSS 애니메이션을 사용하여 물결 효과를 만드는 방법을 소개합니다. 도움이 되길 바랍니다.
CSS를 능숙하게 사용하여 다양한 이상한 모양의 버튼 구현(코드 포함)
Jul 19, 2022 am 11:28 AM
이 글에서는 CSS를 활용하여 자주 나타나는 다양한 모양의 버튼을 쉽게 구현하는 방법을 알려드리겠습니다. 도움이 되셨으면 좋겠습니다.
공간을 차지하지 않고 CSS에서 요소를 숨기는 방법
Jun 01, 2022 pm 07:15 PM
두 가지 방법: 1. 표시 속성을 사용하여 요소에 "display:none;" 스타일을 추가합니다. 2. 요소를 숨기려면 위치 및 상단 속성을 사용하여 요소의 절대 위치를 설정하세요. 요소에 "position:absolute;top:-9999px;" 스타일을 추가하세요.
CSS3에서 레이스 테두리를 구현하는 방법
Sep 16, 2022 pm 07:11 PM
CSS에서는 border-image 속성을 사용하여 레이스 테두리를 만들 수 있습니다. border-image 속성은 이미지를 사용하여 테두리를 생성할 수 있습니다. 즉, 배경 이미지를 레이스 스타일로 지정하기만 하면 됩니다. "border-image: url(이미지 경로)은 이미지 테두리 너비가 안쪽으로 반복되는지 여부입니다.
텍스트 캐러셀과 이미지 캐러셀도 순수 CSS를 사용하여 구현할 수 있다는 것이 밝혀졌습니다!
Jun 10, 2022 pm 01:00 PM
텍스트 회전판과 이미지 회전판을 만드는 방법은 무엇입니까? 누구나 가장 먼저 생각하는 것은 js를 사용할지 여부입니다. 실제로 순수 CSS를 사용하여 구현하는 방법도 모두에게 도움이 되기를 바랍니다.
CSS3에서 마우스를 클릭하여 이미지를 확대하는 방법
Apr 25, 2022 pm 04:52 PM
구현 방법: 1. ":active" 선택기를 사용하여 그림에 대한 마우스 클릭 상태를 선택합니다. 2. 변환 속성과 scale() 함수를 사용하여 그림 확대 효과를 얻습니다. 구문은 "img:active {transform; : scale(x축 배율, y축 배율);}".
CSS3 적응형 레이아웃이란 무엇입니까?
Jun 02, 2022 pm 12:05 PM
"반응형 레이아웃"이라고도 알려진 적응형 레이아웃은 화면 너비를 자동으로 인식하고 그에 따라 조정할 수 있는 웹 페이지 레이아웃을 의미합니다. 이러한 웹 페이지는 각 터미널에 대해 특정 버전을 만드는 대신 여러 다른 터미널과 호환될 수 있습니다. . 적응형 레이아웃은 모바일 웹 브라우징 문제를 해결하기 위해 탄생했으며, 다양한 단말기를 사용하는 사용자에게 좋은 사용자 경험을 제공할 수 있습니다.
CSS3 애니메이션 효과에 변형이 있나요?
Apr 28, 2022 pm 02:20 PM
CSS3의 애니메이션 효과에는 변형이 있습니다. 애니메이션 속성은 애니메이션 스타일을 설정하는 데 사용됩니다. 변형 속성은 변형 스타일을 설정하는 데 사용됩니다.
