CSS에 테두리를 추가하는 방법-CSS 튜토리얼-php.cn

CSS에 테두리를 추가하는 방법

醉折花枝作酒筹

풀어 주다： 2021-07-26 10:41:49

원래의

11095명이 탐색했습니다.

테두리를 추가하는 방법은 다음과 같습니다. 1. 테두리 속성, 요소 내용과 패딩을 둘러싸는 하나 이상의 선. 이 속성을 사용하면 요소 테두리의 스타일, 너비 및 색상을 지정할 수 있습니다. 2. 테두리 이미지 속성, 테두리- image 속성은 그림 테두리를 설정하는 데 사용됩니다.

CSS에 테두리를 추가하는 방법

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

CSS 테두리 속성

요소의 테두리는 요소의 콘텐츠와 패딩을 둘러싸는 하나 이상의 선입니다.

각 테두리에는 너비, 스타일, 색상의 3가지 측면이 있습니다.

CSS 테두리 속성을 사용하면 요소 테두리의 스타일, 너비 및 색상을 지정할 수 있습니다.

border 단축 속성은 하나의 선언에서 모든 테두리 속성을 설정합니다.

다음 속성을 순서대로 설정할 수 있습니다.

border-width: 테두리의 너비를 지정합니다.

border-style: 테두리 스타일을 지정합니다.

border-color: 테두리 색상을 지정합니다.

예:

<html>
<head>
<style type="text/css">
div{border:1px solid #000} 
</style>
</head>

<body>
<div>div添加边框</div>
</body>

</html>

로그인 후 복사

Effect

CSS에 테두리를 추가하는 방법

CSS border-image property

border-image 속성은 이미지 테두리를 설정하는 데 사용되며 모든 border-image-* 속성을 설정하는 약식 속성입니다. 값을 생략하면 기본값이 설정됩니다.

구문:

border-image: source slice width outset repeat|initial|inherit;

로그인 후 복사

속성 값:

border-image-source: 테두리를 그리는 데 사용할 이미지의 위치를 지정하는 데 사용됩니다.
border-image-slice: 이미지 테두리가 오프셋됩니다. 안쪽
border-image-width: 이미지 테두리의 너비
border-image-outset: 테두리 외부에 그려지는 border-image-area의 양을 지정하는 데 사용됩니다.
border-image- 반복: 테두리를 반복할지, 늘일지, 둥글게 할지 여부를 이미지를 설정하는 데 사용됩니다.

border-image 사용

border-image를 사용하기 전에는 기본적으로 CSS의 속성만으로 충분하다고 느꼈습니다. 간단한 작업은 이 속성을 배우고 나서 이 속성의 사용법을 알게 되었습니다. 코딩 시간과 효율성을 크게 절약할 수 있습니다. 요약하자면 대략 다음 두 가지 시나리오에 적용할 수 있습니다.

요소 경계가 불규칙한 상황. 이때 테두리 배경으로 디자인 도면을 사용해야 하는데, 테두리 이미지는 배경 이미지에 비해 좀 더 유연하다는 장점이 있습니다.

버튼 너비와 높이가 불확실합니다. 테두리 이미지를 사용하여 버튼을 만듭니다. 동일한 배경 이미지를 사용하여 다양한 너비와 높이의 버튼을 만들 수 있습니다.

예:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style> 
#borderimg1 { 
    border: 10px solid transparent;
    padding: 15px;
    -webkit-border-image: url(border.png) 30 round; /* Safari 3.1-5 */
    -o-border-image: url(border.png) 30 round; /* Opera 11-12.1 */
    border-image: url(border.png) 30 round;
}
#borderimg2 { 
    border: 10px solid transparent;
    padding: 15px;
    -webkit-border-image: url(border.png) 30 stretch; /* Safari 3.1-5 */
    -o-border-image: url(border.png) 30 stretch; /* Opera 11-12.1 */
    border-image: url(border.png) 30 stretch;
}
</style>
</head>
<body>
<p>border-image 属性用于指定一个元素的边框图像。</p>
<p id="borderimg1">在这里，图像平铺（重复），以填补该地区。</p>
<p id="borderimg2">在这里，图像被拉伸以填补该地区</p>
<p>这是原始图片:</p><img  src="/images/border.png" alt="CSS에 테두리를 추가하는 방법" >
</body>
</html>

로그인 후 복사

Effect

CSS에 테두리를 추가하는 방법