집 >웹 프론트엔드 >CSS 튜토리얼 >CSS3의 새로운 기능에 대한 모양 요약

CSS3의 새로운 기능에 대한 모양 요약

小云云원래의: 2017-12-22 16:53:491620검색

css3는 많은 새로운 기능을 갖춘 CSS의 업그레이드 버전입니다. 이 글에서는 CSS3의 새로운 기능 적용에 대한 형태 요약을 주로 소개하는데, 이는 실용적인 가치가 매우 높습니다. 그것은 모두에게 도움이 될 수 있습니다.

1. 적응형 타원

테두리 반경 기능:

가로 및 세로 반경을 별도로 지정할 수 있으며 값은 백분율일 수 있습니다. /(슬래시)를 사용하여 이 두 값을 구분하세요. (적응형 너비 타원 구현 가능).
가로 및 세로 반경을 네 가지 각도로 별도로 지정할 수도 있습니다(반타원 구현 가능)
쿼터 타원, 주로 가로 및 세로 반경 조정

샘플 코드:

.wrap{
            border-radius: 50% / 30%;
            width: 60px;
            height: 80px;
            background: yellow;
        }
        .wrap02{
            width: 60px;
            height: 80px;
            background: yellow;
            border-radius: 50% / 100% 100% 0 0;
        }
        .wrap03{
            width: 60px;
            height: 80px;
            background: yellow;
            border-radius: 100% 0 0 0;
        }

2. 편평한 사변형

은 왜곡을 위해 변환의 SkewX에 적용되어야 합니다
주된 문제는 컨테이너가 편평한 사변형이 되고 내부 텍스트와 요소는 수직으로 표시됩니다
embedded 요소를 설정하고 기울이기를 사용하여 내부 요소를 반대로 비틀어보세요. 인라인 요소에는 변환을 적용할 수 없으므로 중첩된 내부 요소는 블록이어야 합니다.
왜곡을 위해 의사 요소 사용(:before)

.wrap{
            width: 80px;
            height: 40px;
            transform: skewX(-45deg);
            background: yellow;
        }
        .wrap>p{
            transform: skewX(45deg); 
        }
        .btn{
            position: relative;
            padding: 10px;
        }
        .btn:before{
            content: &#39;&#39;;
            position: absolute;
            top: 0px;
            left: 0px;
            right: 0px;
            bottom: 0px;
            z-index: -1;
            background: #85a;
            transform: skewX(-45deg);
        }

3. 마름모

요소의 중첩을 적용하고 외부 내부 요소는 다음과 같이 회전합니다.
전체 이미지가 전체 외부 p만 채울 수 있도록 내부 요소의 최대 너비를 100%로 설계합니다.
scale 속성은 배율을 제어합니다. 이미지의 중심이고 기본값은 중심입니다. 점은 확대/축소 원점입니다(피타고라스 정리가 사용됩니다. 변환 원점을 추가로 지정하지 마십시오).

.wrap{
            width: 200px;
            transform: rotate(-45deg);
            overflow: hidden;
        }
        .wrap > img{
            transform: rotate(45deg) scale(1.42); 
            max-width: 100%;
        }

4. 모서리 자르기 효과

선형 그라데이션을 사용하면 각도, 다중 값 및 그라데이션 투명도를 설정할 수 있습니다.
효과가 배경과 겹치지 않도록 배경 크기 및 배경 반복 속성 설정에도 주의해야 합니다.

.wrap{
            width: 200px;
            height: 100px;
            background: #58a;
            background: linear-gradient(-135deg, transparent 15px, #58a 0px) top right,
            linear-gradient(135deg,transparent 15px, #655 0px) top left,
            linear-gradient(-45deg, transparent 15px, #58a 0px) bottom right, 
            linear-gradient(45deg, transparent 15px, #655 0px) bottom left;
            background-size: 50% 50%;
            background-repeat: no-repeat;
        }

테두리 이미지를 사용할 수 있습니다. 모서리 절단 및 설정을 수행하려면 border-image-slice 값(그림 테두리가 안쪽으로 오프셋됨)
border-image는 svg를 사용하여 그림을 만듭니다.
border는 너비 + 투명도와 테두리 이미지를 설정합니다. -슬라이스가 안쪽으로 오프셋됩니다. 이렇게 하면 테두리와 모서리 테두리가 생성됩니다.
배경 클립: 패딩 상자로 설정해야 합니다. 그렇지 않으면 배경이 테두리까지 확장됩니다.

.wrapSvg{
            border:15px solid transparent;
            border-image: 1 url(&#39;data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="3" height="3" fill="%2358a"><polygon points="0,1 1,0 2,0 3,1 3,2 2,3 1,3 0,2"/></svg>&#39;);
            margin-top: 50px;
            width: 200px;
            height: 100px; 
            background: #58a;
            background-clip: padding-box;
        }

기타 솔루션

clip-path 속성을 사용하지만 완전히 지원되지 않습니다.
css4는 코너 절단을 지원하기 위해 코너 경로 속성을 직접 제공합니다

5 . 사다리꼴 패턴

변환의 기본 원리를 이해하세요

a와 d는 크기 조정을 나타내며 0이 될 수 없습니다. c와 b는 기울기를 제어합니다. e와 f는 변위를 제어합니다. ,0, 0,1,x,y)

scale(scale): 행렬(x,0,0,y,0,0);
skew(skew): 행렬(1,tany, tanx,1 ,0,0), 입력이 deg(각도)이므로 각도를 라디안 값으로 변환해야 합니다
rotate(회전): 행렬(cosN,sinN,-sinN,cosN,0, 0), 각도는 로 변환됩니다. 위 값을 라디안 단위로 적용하는 것은
변환 원점 값과 관련이 있으며 이는 상단, 하단, x, y, z의 세 가지 좌표계를 지정할 수 있습니다.

관찰자로부터의 거리를 나타냅니다. 관찰된 개체에

원근 거리가 개체에서 멀수록 개체가 더 작게 나타납니다
원근은 변형된 요소의 상위 또는 조상에만 설정할 수 있습니다. 브라우저가 원근을 생성하기 때문입니다.
3D 변형에는 왜곡 속성이 없습니다.

6. 간단한 원형 차트

애니메이션 원형 차트, 효과는 다음과 같습니다.

구현 단계는 다음과 같습니다.

画出一个yellowgreen的圆，并利用linear-gradient设置background-image的值，实现两种颜色各显示一半的功能：

然后加入一个伪元素，继承父级（真实元素）的背景色，然后用rotate旋转即可

要利用margin-left让其靠左
利用transform-origin设置其旋转定位点

动画展示代码如下：

@keyframes spin{
            to{ transform: rotate(.5turn); }
        }
        @keyframes bg{
            50%{ background-color: #655; }
        }
        .wrap{
            width: 100px; height: 100px;
            border-radius: 50%;
            background: yellowgreen;
            background-image: linear-gradient(to right, transparent 50%, #655 0); 
        } 
        .wrap::before{
            content: &#39;&#39;;
            display: block;
            margin-left: 50%;
            background-color: inherit;
            height: 100%; 
            border-radius: 0 100% 100% 0 / 50%;
            transform-origin: left;
            animation:spin 3s linear infinite,
                bg 6s step-end infinite;
        }

CSS3의 새로운 기능에 대한 모양 요약

관련 기사