CSS3의 새로운 테두리 속성은 무엇입니까?
- WBOY원래의
- 2021-12-16 16:56:172725검색
css3의 새로운 테두리 속성: 1. 요소 테두리의 스타일을 설정하는 데 사용되는 약어 속성인 "border-image" 2. 4개의 둥근 스타일을 설정하는 데 사용되는 "border-radius" 3. "box-shadow", 이 속성은 요소의 하나 이상의 드롭다운 섀도우 상자를 설정하는 데 사용됩니다.
이 튜토리얼의 운영 환경: Windows 10 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.
css3의 새로운 테두리 속성은 무엇입니까?
css3의 새로운 테두리 속성은 border-image, border-radius 및 box-shadow 속성입니다.
1. border-image
border-image 속성은 다음 속성을 설정하기 위한 단축 속성입니다.
예제는 다음과 같습니다.
<html>
<head>
<style>
div
{
border:15px solid transparent;
width:300px;
padding:10px 20px;
}
#round
{
-moz-border-image:url(/i/border.png) 30 30 round;/* Old Firefox */
-webkit-border-image:url(/i/border.png) 30 30 round;/* Safari and Chrome */
-o-border-image:url(/i/border.png) 30 30 round;/* Opera */
border-image:url(/i/border.png) 30 30 round;
}
#stretch
{
-moz-border-image:url(/i/border.png) 30 30 stretch;/* Old Firefox */
-webkit-border-image:url(/i/border.png) 30 30 stretch;/* Safari and Chrome */
-o-border-image:url(/i/border.png) 30 30 stretch;/* Opera */
border-image:url(/i/border.png) 30 30 stretch;
}
</style>
</head>
<body>
<div id="round">在这里，图片铺满整个边框。</div>
<br>
<div id="stretch">在这里，图片被拉伸以填充该区域。</div>
<p>这是我们使用的图片：</p>
<img src="/i/border.png" alt="CSS3의 새로운 테두리 속성은 무엇입니까?" >
<p><b>注释：</b> Internet Explorer 不支持 border-image 属性。</p>
<p>border-image 属性规定了用作边框的图片。</p>
</body>
</html>출력 결과:
2. border- radius
border-radius 속성은 네 모서리의 둥근 스타일을 설정하는 데 사용되는 단축 속성입니다. 구문은 다음과 같습니다.
border-radius: 1-4 length|% / 1-4 length|%;
예는 다음과 같습니다.
<html>
<head>
<style>
div
{
text-align:center;
border:2px solid #a1a1a1;
padding:10px 40px;
background:#dddddd;
width:350px;
border-radius:25px;
-moz-border-radius:25px; /* 老的 Firefox */
}
</style>
</head>
<body>
<div>border-radius 属性允许您向元素添加圆角。</div>
</body>
</html>출력 결과:
3.box-shadow
box-shadow 속성은 하나 이상의 드롭다운 섀도우 상자를 설정할 수 있습니다. 구문은 다음과 같습니다.
box-shadow: h-shadow v-shadow blur spread color inset;
예제는 다음과 같습니다.
<html>
<head>
<meta charset="utf-8">
<title>123</title>
<style>
div
{
width:300px;
height:100px;
background-color:yellow;
box-shadow: 10px 10px 5px #888888;
}
</style>
</head>
<body>
<div></div>
</body>
</html>출력 결과:
(학습 영상 공유: css 영상 튜토리얼)
위 내용은 CSS3의 새로운 테두리 속성은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.