지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > CSS 튜토리얼 > CSS 반투명 테두리 구현 예에 대한 자세한 설명(그림)

CSS 반투명 테두리 구현 예에 대한 자세한 설명(그림)

PHPz
풀어 주다： 2017-04-23 10:28:46
원래의
2695명이 탐색했습니다.

CSS 반투명 테두리 상세 구현 예(그림)

1. 반투명 테두리

질문:

컨테이너에 빨간색 배경과 검정색 반투명 ​​테두리를 설정하려면 다음과 같이 쓸 수 있습니다. 

border: 20px solid rgba(0,0,0,0.5);
background: red;
로그인 후 복사

그러나 효과는 다음과 같습니다(그림 1-1 .png); 반투명 색상은 왜 반투명 테두리를 구현하지 않나요?

CSS 반투명 테두리 구현 예에 대한 자세한 설명(그림)

그림 1-1.png

해결책:

Background-clip을 전달할 수 있습니다. 위의 기본 동작을 조정하기 위해 속성을 ​​padding-box로 설정하면 원하는 효과가 나타납니다(그림 1-2.png). 

border: 20px solid rgba(0,0,0,0.5);
background: red;
background-clip: padding-box;
로그인 후 복사

CSS 반투명 테두리 구현 예에 대한 자세한 설명(그림)

그림 1-2.png

2.Background-clip

배경부터- 클립 속성이 사용되면 이 속성을 살펴보겠습니다.

background-clip:

요소의 배경을 설정합니다(배경이미지 또는 색상)은 테두리 아래로 확장됩니다.

값 ​​(값) 설명
border-box
值（values ） 说明
border-box 默认初始值 ，背景延伸到边框外沿（但是在边框之下）
padding-box 边框下面没有背景，即背景延伸到内边距外沿
content-box 背景裁剪到内容区 (content-box) 外沿
text 实验API ，背景裁剪到前景文本（ foreground text）内。
기본 초기값, 배경은 테두리의 바깥쪽 가장자리까지 확장됩니다(그러나 테두리 아래)		 패딩 상자 테두리 아래에 배경이 없습니다. 즉, 배경이 패딩외부 가장자리
콘텐츠 상자 배경이 콘텐츠 영역(콘텐츠 상자)에 맞게 잘립니다. 외부 가장자리
텍스트 실험API, 배경이 전경 텍스트로 잘립니다.

示例

CSS content

span {
   border: 10px blue;
   border-style: dotted double;
   margin: 1em;
   padding: 2em;
   background: #F8D575;
}
.border-box { background-clip: border-box; }
.padding-box { background-clip: padding-box; }
.content-box { background-clip: content-box; }
.text { background-clip: text; }
로그인 후 복사

 

HTML content

<span class="border-box">border-box</span>
<span class="padding-box">padding-box</span>
<span class="content-box">content-box</span>
<span class="text">text</span>
로그인 후 복사

 

效果：（图2-1.png）

CSS 반투명 테두리 구현 예에 대한 자세한 설명(그림)

图2-1.png

3.border-style

CSS 반투명 테두리 구현 예에 대한 자세한 설명(그림)

CSS 반투명 테두리 구현 예에 대한 자세한 설명(그림)

4.border-image

初始值：

  • border-image-source: none

  • border-image-slice: 100%

  • border-image-width: 1

  • border-image-outset: 0s

  • border-image-repeat: stretch

4.1 border-image-source: none |

where

= | | | | |

where

= image([ [ | ]? , ? ]!)
= image-set(#)
= element( )
= cross-fade(,?)
= | | |

Gradient示例：

= linear-gradient( [ | to ]?, )

CSS content

.gradient { 
    border: 30px solid;
    border-image-source: linear-gradient(to right, red, green, blue);
    /*border-image-source: linear-gradient(90deg, red, green, blue);*/
    border-image-slice: 10;
    padding: 20px;
}
로그인 후 복사

 

HTML content

<p class="gradient">The image is stretched to fill the area.</p>
로그인 후 복사

 

效果：（图4-1.png）

CSS 반투명 테두리 구현 예에 대한 자세한 설명(그림)

图4-1.png

4.2 border-image-slice: [ | ]{1,4}&& fill?

这个 border-imge-slice 属性传入1~4个参数（number没有单位专指像素或百分比值）将图片分割成9个部分,1,2,3,4四个区块是不会拉伸,不会平铺，称之为盲区，5,6,7,8四个区块可以通过 border-image-repeat 来控制拉伸平铺和重复（ stretch:默认值,拉伸; repeat:平铺; round:整数次平铺; ），第9区块不显示，传入参数 fill 则显示第9区块，分割情况如下图（图4-2.png && 图2-3.png）:

CSS 반투명 테두리 구현 예에 대한 자세한 설명(그림)

图4-2.png

CSS 반투명 테두리 구현 예에 대한 자세한 설명(그림)

图4-3.png

我们通过上面这张图片（81px^81px）来看传入不同个数的参数是如何分割这张图片的；

1个参数

/* border-image-slice: slice */
border-image-slice: 27; 
border: 30px solid transparent;
padding: 20px;
border-image-source:url([https://mdn.mozillademos.org/files/4127/border.png](https://mdn.mozillademos.org/files/4127/border.png));
로그인 후 복사

 

CSS 반투명 테두리 구현 예에 대한 자세한 설명(그림)

图4-4.png

CSS 반투명 테두리 구현 예에 대한 자세한 설명(그림)

图4-5.png(效果图)

2个参数（参考图4-3.png）

/* border-image-slice: vertical horizontal */
border-image-slice: 40 40.5; 
border: 30px solid transparent;
padding: 20px;
border-image-source:url([https://mdn.mozillademos.org/files/4127/border.png](https://mdn.mozillademos.org/files/4127/border.png));
로그인 후 복사

 

CSS 반투명 테두리 구현 예에 대한 자세한 설명(그림)

图4-6.png

CSS 반투명 테두리 구현 예에 대한 자세한 설명(그림)

图4-7.png(效果图)

3个参数

/* border-image-slice: top horizontal bottom */
border-image-slice: 27 40 27; 
border: 30px solid transparent;
padding: 20px;
border-image-source:url([https://mdn.mozillademos.org/files/4127/border.png](https://mdn.mozillademos.org/files/4127/border.png));
로그인 후 복사

 

CSS 반투명 테두리 구현 예에 대한 자세한 설명(그림)

图4-8.png（效果图）

4个参数(参考图4-2.png)

/* border-image-slice: top right bottom left */
border-image-slice: 27 40 27 27;
border: 30px solid transparent;
padding: 20px;
border-image-source:url([https://mdn.mozillademos.org/files/4127/border.png](https://mdn.mozillademos.org/files/4127/border.png));
로그인 후 복사

 

CSS 반투명 테두리 구현 예에 대한 자세한 설명(그림)

图4-9.png（效果图）

4.3 border-image-width: [ | | | auto ]{1,4}

语法：

border-image-width: all                        /* One-value syntax */       
E.g. border-image-width: 3;
border-image-width: vertical horizontal        /* Two-value syntax */  
E.g. border-image-width: 2em 3em;
border-image-width: top horizontal bottom      /* Three-value syntax */    
E.g. border-image-width: 5% 15% 10%;
border-image-width: top right bottom left      /* Four-value syntax */  
E.g. border-image-width: 5% 2em 10% auto;
로그인 후 복사

 

设置边框图片的width，如果超出了设置的border-width,会向内扩展；查看下方示例，比较（图4-10.png && 图4-11.png）；

示例：

border: 30px solid transparent;
padding: 20px;
border-image-source: url("https://mdn.mozillademos.org/files/4127/border.png");
border-image-slice: 27;
로그인 후 복사

 

CSS 반투명 테두리 구현 예에 대한 자세한 설명(그림)

图4-10.png

border: 30px solid transparent;
padding: 20px;
border-image-source:url([https://mdn.mozillademos.org/files/4127/border.png](https://mdn.mozillademos.org/files/4127/border.png));
border-image-slice: 27;
border-image-width: 1 2 1 1;
로그인 후 복사

 

CSS 반투명 테두리 구현 예에 대한 자세한 설명(그림)

图4-11.png

4.4 border-image-outset: [ | ]{1,4}

语法：

/* border-image-outset: sides */
border-image-outset: 30%;
/* border-image-outset:vertical horizontal */
border-image-outset: 10% 30%;
/* border-image-outset: top horizontal bottom */
border-image-outset: 30px 30% 45px;
/* border-image-outset:top right bottom left  */
border-image-outset: 7px 12px 14px 5px;
로그인 후 복사

 

效果是将边框图片延伸到盒子外面，查看下放示例，比较（图4-12.png && 图4-13.png）；

示例:

border: 30px solid transparent;
 padding: 20px;
 border-image-source:url([https://mdn.mozillademos.org/files/4127/border.png](https://mdn.mozillademos.org/files/4127/border.png));
 border-image-slice: 27;
 margin: 60px;
로그인 후 복사

 

CSS 반투명 테두리 구현 예에 대한 자세한 설명(그림)

图4-12.png

border: 30px solid transparent;
padding: 20px;
border-image-source:url([https://mdn.mozillademos.org/files/4127/border.png](https://mdn.mozillademos.org/files/4127/border.png));
border-image-slice: 27;
margin: 60px;
border-image-outset: 2 1 1 1;
로그인 후 복사

 

CSS 반투명 테두리 구현 예에 대한 자세한 설명(그림)

图4-13.png

4.4 border-image-repeat: [ stretch | repeat | round ]{1,2}

值（value） 说明
stretch 默认初始值 ，；拉伸
repeat 平铺
round 整数次平铺

语法：

border-image-repeat: type                      /* One-value syntax */       
E.g. border-image-value: stretch;
border-image-repeat: horizontal vertical       /* Two-value syntax */       
E.g. border-image-width: round space;
로그인 후 복사

 

위 내용은 CSS 반투명 테두리 구현 예에 대한 자세한 설명(그림)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
css
원천：php.cn
이전 기사：CSS를 사용하여 그림 돋보기 효과를 구현하는 예에 대한 자세한 설명(그림) 다음 기사：CSS에서 수평 센터링/수직 센터링을 달성하는 몇 가지 방법
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
CSS 마인드맵 코스웨어는 어디에 있나요? 코스웨어
에서 2024-04-16 10:10:18
0
0
1335
페이지가 갑자기 CSS나 부트스트랩을 가져올 수 없습니다. 그래서 저는 페이지를 개발 중입니다. 어제 일부 작업을 했는데 잘 작동했고, 오늘은 나머지 작업을 계속했는데 모든 것이 괜찮습니다. 일반 HTML 페이지로 열려고...
에서 2024-04-06 21:58:04
0
1
800
Javafx에서 인라인 CSS 스타일을 동적으로 수정합니다. 응용프로그램이 최대화되었을 때 창의 배경 이미지를 변경하려고 합니다. 내 배경은 인라인 CSS를 사용하여 설정됩니다. 스타일에 대해 두 개의 다른 변수와 if 문...
에서 2024-04-06 20:57:16
0
1
487
CSS에서 부동 요소를 수평이 아닌 수직으로 쌓는 방법은 무엇입니까? 한쪽에는 기본 콘텐츠가 있고 다른 한쪽에는 추가 콘텐츠가 있는 두 개의 열로 구성된 웹페이지를 만들려고 합니다. 하지만 float 속성을 사용하여 추가 열을 왼쪽...
에서 2024-04-06 20:45:26
0
2
386
다른 CSS 코드가 무엇이든 관계없이 Flexbox의 텍스트를 수직 중앙에 강제로 배치할 수 있는 방법이 있나요? 제가 개발 중인 웹사이트에 사용되는 더 큰 CSS 코드의 일부인 다음 CSS 코드가 있습니다. .cards-u{display:flex;flex-wrap:wrap;...
에서 2024-04-06 20:41:51
0
1
518
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿