일반적으로 사용되는 최신 CSS3 속성을 공유하세요.
- Y2J원래의
- 2017-05-23 10:52:122140검색
다음은 여러분에게 추천되는 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 코드: 코드는 다음과 같습니다.6c04bd5ca3fcae76e30b72ad730ca86de388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3
0785754a6ebbc2ca427a6344e1fab4e1
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>[관련 추천]
CSS3 무료 동영상 튜토리얼
CSS를 사용하여 채팅 상자 작은 모서리 및 풍선 효과 만들기
3 . 4.이미지 플라이인 및 페이드 구현을 위한 h5+css3 코드 예시 적용
5.CSS3를 사용하여 8가지 유형의 로딩 애니메이션을 만드는 방법을 가르쳐줍니다
위 내용은 일반적으로 사용되는 최신 CSS3 속성을 공유하세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!