집 > 기사 > 웹 프론트엔드 > 여러 배경 시뮬레이션 동적 테두리 구현

여러 배경 시뮬레이션 동적 테두리 구현

php中世界最好的语言원래의: 2018-03-22 15:53:232029검색

이번에는 다중 배경 시뮬레이션 동적 테두리 구현을 소개하겠습니다. 다중 배경 시뮬레이션 동적 테두리를 구현하기 위한 주의 사항은 무엇입니까?

우선 달성할 렌더링을 살펴보겠습니다

구현 방법은 다음과 같습니다

가장 먼저 생각한 것은 테두리 속성인데 테두리 속성은 길이를 설정할 수 없습니다. 테두리를 사용하여 구현하는 경우 이를 시뮬레이션하기 위해 다른 요소를 사용해야 하므로 더욱 번거롭습니다. 그러던 중 누군가가 인터넷에서 테두리를 시뮬레이션하기 위해 CSS3 다중 배경을 사용하는 것을 본 적이 있다는 사실이 갑자기 생각나서 한 번 시도해 보았습니다.

css3 background

CSS3에서는 배경을 일부 수정했습니다. 가장 눈에 띄는 것은 4개의 새로운 속성을 추가할 뿐만 아니라 현재 속성을 조정하고 향상시키는 것입니다.

1. 다중 배경 이미지

CSS3에서는 하나의 레이블 요소에 여러 배경 이미지를 적용할 수 있습니다. 코드는 css2.0 버전과 유사하지만 참조된 이미지를 "," 쉼표로 구분해야 합니다. 첫 번째 이미지는 요소의 상단에 위치한 배경이며 다음과 같이 그 아래에 다음 배경 이미지가 차례로 표시됩니다.

background-image: url(top-image.jpg), url(middle-image.jpg), url(bottom-image.jpg);

2. 새 속성: 배경 클립

이 토론을 통해 원래의 이미지가 무엇인지 다시 살펴보겠습니다. 기사 시작 부분에서 언급한 배경이 테두리에 의해 가려지는 문제에 대해. 배경 클립을 추가하면 배경 표시 위치를 완벽하게 제어할 수 있습니다.

속성 값은 다음과 같습니다.

background-clip: border; 배경이 테두리 테두리 아래에 표시되기 시작합니다.

background-clip: padding; 테두리 테두리 아래가 아닌 패딩 아래에 배경이 표시되기 시작합니다.

background-clip: content; 배경은 테두리나 패딩 아래가 아닌 콘텐츠 영역 아래에 표시되기 시작합니다.

background-clip: no-clip; 기본 속성 값은 background-clip: border와 유사합니다.

3. 새 속성: Background Origin

이 속성은

배경 위치와 함께 사용해야 합니다. . background-position을 사용하여 테두리, 패딩 또는 콘텐츠 상자 콘텐츠 영역에서 위치를 계산할 수 있습니다. (Background-clip과 유사)

Background-origin: 테두리 테두리 위치에서 시작

background-origin: 패딩 위치에서 시작

background-origin: 콘텐츠 상자에서 시작; 콘텐츠 영역 위치 계산

background-clip과 background-origin의 차이점은 웹사이트 www.CSS3.info에 잘 분석되어 설명되어 있습니다.

4. 새로운 속성: 배경 크기

배경 크기 속성은 배경 이미지를 재설정하는 데 사용됩니다.

다음과 같은 여러 속성 값이 있습니다.

배경 이미지를 포함하여 레이블 요소에 맞게 축소합니다(주로 픽셀 비율).

배경 크기: 배경 이미지를 확대하고 전체 레이블로 확장합니다. 요소 크기(주로 픽셀 비율)

background-size: 100px 100px; 배경 이미지 크기 조정을 나타냅니다.

background-size: 50% 100%; 이미지 크기 조절

CSS 3 사양 사이트에 가시면 간단한 사례 설명을 보실 수 있습니다.

5 새로운 속성: Background Break CSS3에서는 레이블 요소를 여러 영역으로 나눌 수 있으며(예: 인라인 요소가 여러 줄에 걸쳐 표시되도록 허용) background-break 속성은 배경이 다른 영역에 표시되도록 제어할 수 있습니다. . 속성 값:

Background-break: 연속; 이 속성은 기본값이며 영역 사이의 간격을 무시합니다. (이미지를 적용하는 것은 하나의 영역으로 취급하는 것과 같습니다.)

Background-break: 경계 상자 ; 지역 간

Background-break: each-box; 对每一个独立的标签区域进行背景的重新划分。

6、背景颜色的调整

background-color属性在css3版本里面稍微做了增强，除了指定background color背景颜色之外，还可以对不使用的标签元素背景图片进行去色处理。

background-color: green / blue;此例子里，这背景颜色可能是绿色，然而，如果底部背景图片无效的话，蓝色将代替绿色来显示。如果你没有指定某个颜色的话，它将其视为透明。

7、背景重复的调整

css2里当设置背景的时候，它经常被标签元素截取而显示不全，css3介绍了2个新属性来修复此问题。 space：图片以相同的间距平铺且填充整个标签元素 round：图片自动缩放直到适应且填充整个标签元素

CSS 3 specifications网站对background-repeat: space的使用就是一个现成的例子。

8、Background Attachment 的调整

Background Attachment有了一个新属性值:local,当标签元素滚动时它才有效(如设置overflow:scroll;)，当background-attachment设置为scroll时，背景图片是不随内容滚条滚动的。现在，有了background-attachment:local，就可以做到让背景随元素内容滚动而滚动了。

css3 多背景模拟元素边框

我们这里主要使用了background-img、background-size 和 background-position 三个属性。

background-image: [background-image], [background-image], [background-image]; 
background-position: [background-position], [background-position], [background-position]; 
background-repeat: [background-repeat], [background-repeat], [background-repeat];

简写形式如下：

background: [background-image] [background-position] [background-repeat], 
[background-image] [background-position] [background-repeat], 
[background-image] [background-position] [background-repeat];

现在我们用多背景来模拟一个元素的边框

/*CSS*/
.exammple {
    background: linear-gradient(0, #108b96 2px, #108b96 2px) no-repeat, 
                linear-gradient(-90deg, #108b96 2px, #108b96 2px) no-repeat, 
                linear-gradient(-180deg, #108b96 2px, #108b96 2px) no-repeat, 
                linear-gradient(-270deg, #108b96 2px, #108b96 2px) no-repeat;
    background-size: 100% 2px, 2px 100%, 100% 2px, 2px 100%;
    background-position: left top, right top, right bottom, left bottom;
}

<p class="exammple"></p>

我们用四个渐变的背景来模拟四个边框（为什么我们要用渐变而不是直接的Color呢？这是由于Css的多背景只能是background-image, background-color不支持多个值,所有即便是纯色的边框，我们也只能使用渐变）。

接下来我们让边框动起来

/*CSS*/
.exammple {
    transition: ease-in .3s;
    background: linear-gradient(0, #108b96 2px, #108b96 2px) no-repeat, 
                linear-gradient(-90deg, #108b96 2px, #108b96 2px) no-repeat, 
                linear-gradient(-180deg, #108b96 2px, #108b96 2px) no-repeat, 
                linear-gradient(-270deg, #108b96 2px, #108b96 2px) no-repeat;
    background-size: 0 2px, 2px 0, 0 2px, 2px 0;
    background-position: left top, right top, right bottom, left bottom;
}
.exammple:hover {
    background-size: 100% 2px,  2px 100%, 100% 2px, 2px 100%;
}

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

여러 배경 시뮬레이션 동적 테두리 구현

관련 기사