일반적으로 사용되는 최신 CSS3 속성을 공유하세요.-CSS 튜토리얼-php.cn

일반적으로 사용되는 최신 CSS3 속성을 공유하세요.

Y2J

풀어 주다： 2017-05-23 10:52:12

원래의

2174명이 탐색했습니다.

다음은 여러분에게 추천되는 CSS3의 4가지 새로운 속성입니다. 매우 실용적입니다. 도움이 필요한 친구들은 주의 깊게 공부할 수 있습니다.

1. 이전에는 페이지에 둥근 테두리를 만들고 싶었는데 CSS 코드를 많이 작성해야 했던 것 같습니다(아마도 더 나은 방법을 몰랐을 수도 있습니다). CSS3에서는 각도를 설정하여 원을 만들 수도 있습니다.

border-radius:

css 코드:

코드는 다음과 같습니다.

#test
{
text-align:center;
padding:10px 40px;
background:gray;
width:350px;
border-radius:10px;
-moz-border-radius:10px; /* 为了让老的 Firefox版本支持 */
}

로그인 후 복사

html 코드는

코드는 다음과 같습니다.

<body>
<p>border-radius 做圆角的例子。</p>
</body>

로그인 후 복사

2. CSS3 테두리 그림자의 경우 배경 효과를 얻기 위해 그림
을 직접 사용하곤 했습니다. 또한 CSS3의 box-shadow 속성을 사용하여 <을 구현할 수도 있습니다. 🎜>box-shadow:

css 코드:

코드는 다음과 같습니다. :

#test1
{
box-shadow: 10px 10px 5px #A5A5A5;
width:300px;
height:100px;
}

로그인 후 복사

html 코드:

코드는 다음과 같습니다.

< /body>

3. CSS3는 배경 이미지를 지원합니다

CSS3 여러 배경 이미지

코드는 다음과 같습니다.

.box
{
width:464px;
height:300px;
background:url(test1.jpg) 0 0 no-repeat,url(test2.jpg) 100% 0 no-repeat;
}
</style>
</head>
<body>
<p></p>
</body>

로그인 후 복사

4. 🎜>text-overflow

속성은 텍스트가 포함된 요소를 오버플로할 때 발생하는 상황을 지정합니다.

이 속성은 컨테이너의 텍스트를 잘라내는 기능을 지원합니다. 텍스트가 넘칠 경우 줄임표를 사용할 수 있습니다.

코드는 다음과 같습니다.

<em>.test3 {<br/>text-overflow:ellipsis;<br/>overflow:hidden;<br/>white-space<br/>:nowrap;<br/>border: 1px solid black;<br/>width: 400px;<br/>padding: 20px;<br/>cursor: pointer;<br/>}<br/>#test3<br/>:hover<br/> {<br/>white-space: normal;<br/>color: rgba(0,0,0,1);<br/>background: #e3e3e3;<br/>border: 1px solid #666;<br/>}<br/></style><br/></head><br/><body><br/><p>当这里显示的内容溢出是会有省略号，鼠标移到文本上面会显示所有内容</p><br/></body><br/></em>

로그인 후 복사

5. 전환 효과

, CSS3를 통해 한 스타일이 다른 스타일로 변환될 때 요소 추가에서 요소로 변경할 수 있습니다.

텍스처로는 표현하기 어려운 효과입니다. 아래 코드를 직접 실행해보고 싶으신 분들은 코드는 다음과 같습니다.

<style>
p
{
width:100px;
height:100px;
background:blue;
transition:width 2s, height 2s;
-moz-transition:width 2s, height 2s, -moz-trans
for
m 2s; /* 可以支持Firefox 4 */
-webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* 可以支持Safari and 
Chr
ome */
-o-transition:width 2s, height 2s, -o-transform 2s; /* 可以支持Opera */
}
p:hover
{
width:200px;
height:200px;
transform:rotate(180deg);
-moz-transform:rotate(180deg); /* 可以支持Firefox 4 */
-webkit-transform:rotate(180deg); /* 可以支持Safari and Chrome */
-o-transform:rotate(180deg); /* 可以支持Opera */
}
</style>
</head>
<body>
<p>把鼠标放上该区域，来查看过渡效果。</p>
</body>

로그인 후 복사

[관련 추천] 1.
CSS3 무료 동영상 튜토리얼

CSS를 사용하여 채팅 상자 작은 모서리 및 풍선 효과 만들기

3 .
모바일 단말기에 고성능 CSS3 애니메이션 구현
4.
이미지 플라이인 및 페이드 구현을 위한 h5+css3 코드 예시 적용
5.
CSS3를 사용하여 8가지 유형의 로딩 애니메이션을 만드는 방법을 가르쳐줍니다
위 내용은 일반적으로 사용되는 최신 CSS3 속성을 공유하세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!