border-radius 이외의 CSS 둥근 테두리를 만드는 방법 공유

CSS3의 border-radius 속성을 사용하여 둥근 테두리를 만드는 것은 매우 쉽습니다. 그러나 브라우저 호환성 문제는 다루기가 쉽지 않습니다. 여기서는 border-radius 이외의 CSS 둥근 테두리를 만드는 방법을 요약하겠습니다.

CSS3의 border-radius
는 p+CSS를 사용하여 둥근 테두리를 생성하는데, 현재는 p+CSS의 둥근 테두리 중 하나가 CSS3을 사용하는 것입니다. 둥근 모서리를 시뮬레이션하기 위해 레이아웃을 사용하는 것입니다.
먼저 CSS3를 사용하는 첫 번째 방법에 대해 이야기하겠습니다. 전제는 브라우저가 CSS3를 지원한다는 것입니다. 제가 본 많은 웹사이트는 CSS3를 사용하여 직접 생성된 둥근 모서리에 지나지 않습니다. 즉, 완고해지자.

CSS3를 사용하면 네 모서리를 모두 둥글게 지정하거나 특정 모서리를 둥글게 지정할 수 있는데, 이는 매우 편리합니다. 코드는 다음과 같습니다.

#round {     
    background-color: #000;     
    border: 1px solid #000;     
    -moz-border-radius: 10px;     
    -webkit-border-radius: 10px;     
    color:#fff;     
}     

#indie {     
    background-color: #000;     
    border: 1px solid #000;     
    -moz-border-radius-topright: 10px;     
    -moz-border-radius-bottomright: 10px;     
    -webkit-border-top-left-radius: 10px;     
    -webkit-border-bottom-left-radius: 10px;     
    color:#fff;     
}

< ;p id="round">

둥근 테두리

부분적으로 둥근 모서리

border-radius를 사용하지 않고 둥근 모서리 달성
CSS3에서는 border-radius 속성을 사용하여 둥근 사각형을 쉽게 설정할 수 있습니다. 그러나 이 속성은 IE8 이하에서는 지원되지 않습니다. 이전 버전의 브라우저에서 적응형 너비 및 높이 둥근 사각형을 얻으려면 다음 세 가지 방법을 사용할 수 있습니다.

1. 배경 이미지를 사용하여 둥근 모서리 만들기

배경 이미지를 사용하여 너비와 높이가 조정되는 둥근 직사각형을 만듭니다. 먼저 잘라야 합니다. 4개의 둥근 모서리 이미지 그런 다음 4개의 둥근 모서리 이미지를 직사각형의 4개 모서리에 배치하면 완료됩니다. 총 5개의 p 태그, 1개의 컨테이너 p 및 4개의 둥근 모서리 배경 p가 필요합니다. 이해하기 쉽나요?

구체적인 구현 측면에서 일부 세부 사항에 주의할 필요가 있습니다. 직사각형 컨테이너 p의 경우:

상단 및 하단 패딩의 크기는 최소한 둥근 모서리의 높이로 설정됩니다.
위치는 상대 위치로 설정됩니다.
장소 콘텐츠.
4개의 둥근 모서리 배경 p의 경우:

각각의 둥근 모서리 배경 이미지를 각각 설정합니다.
절대로 컨테이너 직사각형의 네 모서리에 위치합니다.
배경 이미지를 표시하려면 너비와 높이 값을 설정해야 합니다.
둥근 이미지의 너비와 높이가 5픽셀이라고 가정합니다. 구체적인 코드는 다음과 같습니다.

<p class="content">
    <p class="top-left"></p>
    <p class="top-right"></p>
    <p class="btm-left"></p>
 <p class="btm-right"></p>
</p>

.content {   
 position: relative;   
 padding: 5px;   
}   
.top-left,   
.top-rightright,   
.btm-left,   
.btm-rightright {   
 position: absolute;   
 width: 5px;   
 height: 5px;   
}   
.top-left {   
 top: 0;   
 left: 0;   
 background: url(imgs/top-left.png) no-repeat top left;   
}   
.top-rightright {   
 top: 0;   
 rightright: 0;   
 background: url(imgs/top-rightright.png) no-repeat top left;   
}   
.btm-left {   
 bottombottom: 0;   
 left: 0;   
 background: url(imgs/btm-left.png) no-repeat top left;   
}   
.btm-rightright {   
 bottombottom: 0;   
 rightright: 0;   
 background: url(imgs/btm-rightright.png) no-repeat top left;   
}

순수한 CSS+p를 사용한 둥근 사각형

이 방법의 원리는 픽셀 포인트를 사용하여 호를 그려 필렛을 시뮬레이션하는 것입니다. 단순화를 위해 여기에서는 모서리 반경이 3px인 예를 사용합니다. 여기서 둥근 사각형의 배경색은 분홍색이고 사각형의 테두리는 검정색입니다. 왼쪽 상단 모서리의 둥근 모서리가 아래 그림과 같이 확대됩니다.

여기서 직사각형의 위쪽과 아래쪽에는 높이 1px의 세로로 배열된 3개의 p가 필요합니다. 둥근 모서리를 시뮬레이션하기 위해 함께 사용됩니다. 구체적인 구현은 다음과 같습니다.

첫 번째 p는 위 그림에서 직사각형의 검은색 위쪽 테두리입니다. 시뮬레이션된 모서리 반경이 3px이므로 p의 왼쪽 및 오른쪽 여백은 3px로 설정되어 있습니다. 배경색은 검정색으로 설정됩니다.
두 번째 p의 좌우 여백은 2px로 설정하고, 좌우 테두리는 1px 검은색 선으로, 배경색은 분홍색으로 설정했습니다.
세 번째 p의 좌우 여백은 1px로 설정하고, 좌우 테두리는 1px 검은색 선으로, 배경색은 분홍색으로 설정했습니다.
둥근 직사각형 아래에 있는 두 개의 둥근 모서리는 위의 세 p를 역순으로 배열한 것입니다.
직사각형 콘텐츠 영역의 p에는 왼쪽 및 오른쪽 테두리와 배경색만 설정하면 됩니다.
구체적인 코드는 다음과 같습니다

<p class="wrapper">
    <p class="r1"></p>
 <p class="r2"></p>
 <p class="r3"></p>
 <p class="content">aaaaa</p>
 <p class="r3"></p>
 <p class="r2"></p>
 <p class="r1"></p>
</p>

.r1 {   
 height: 1px;   
 margin: 0 3px;   
 background-color: #111;   
}   
.r2 {   
 height: 1px;   
 margin: 0 2px;   
 background-color: #f4b4b4;   
 border-left: 1px solid #111;   
 border-right: 1px solid #111;   
}   
.r3 {   
 height: 1px;   
 margin: 0 1px;   
 background-color: #f4b4b4;   
 border-left: 1px solid #111;   
 border-right: 1px solid #111;   
}   
.content {   
 background-color: #f4b4b4;   
 border-left: 1px solid #111;   
 border-right: 1px solid #111;   
}

이 방법의 장단점 분석 :

배경 이미지를 사용하지 않습니다. , HTTP 요청 수를 줄입니다.
나중에 관리하면 좋지만 둥근 사각형의 픽셀이 늘어나면 의미없는 p코드도 기하급수적으로 늘어나게 됩니다.
구현된 둥근 직사각형에는 제한이 있습니다.
단색의 둥근 모서리만 얻을 수 있습니다.

3. CSS 테두리를 사용하여 사다리꼴을 그려 둥근 모서리를 시뮬레이션합니다.

테두리 속성을 설정하면 아래와 같은 효과를 얻을 수 있습니다. :

p의 4개의 테두리에 상대적으로 큰 너비 값을 설정하면 위 그림의 첫 번째 패턴과 같은 4개의 사다리꼴을 얻을 수 있습니다.
이를 바탕으로; , p를 설정하면 p의 높이 값을 0으로 설정한 후 위 그림의 두 번째 패턴과 같이 사다리꼴과 이등변삼각형을 얻을 수 있습니다.
p의 너비와 높이를 로 설정하면; 0, 위쪽과 왼쪽만 설정됩니다. 테두리를 설정하면 직각삼각형 2개가 나오는데, 그림의 세 번째 패턴도 마찬가지입니다.
이를 바탕으로 테두리 중 하나의 색상을 설정합니다. 투명하게 하면 네 번째 패턴과 같은 것을 얻을 수 있습니다. 직각 삼각형도 얻을 수 있습니다.
코드는 다음과 같습니다:

<p class="box1"></p>
<p class="box2"></p>
<p class="box3"></p>
<p class="box4"></p>

.box1 {   
 height: 20px;   
 width: 20px;   
 border-top: 20px solid red;   
 border-right: 20px solid green;   
 border-bottom: 20px solid blue;   
 border-left: 20px solid yellow;   
}   
.box2 {   
 height: 0;   
 width: 20px;   
 border-top: 20px solid red;   
 border-right: 20px solid green;   
 border-bottom: 20px solid blue;   
 border-left: 20px solid yellow;   
}   
.box3 {   
 height: 0;   
 width: 0;   
 border-top: 50px solid red;   
 /* border-right: 20px solid green; */
 /* border-bottom: 20px solid blue; */
 border-left: 50px solid yellow;   
}   
.box4 {   
 height: 0;   
 width: 0;   
 border-top: 50px solid red;   
 /* border-right: 20px solid green; */
 /* border-bottom: 20px solid blue; */
 border-left: 50px solid transparent;   
}

已经知道了如何通过 border 画出梯形了，那又该如何利用梯形模拟圆角矩形呢？很简单，只要在矩形的上面和下面各放上一个梯形，就能得到圆角矩形了。原理嘛就是利用梯形的左右两个斜边模拟圆角啦，直接上效果图：

具体代码如下：

<p class="wrapper">
    <p class="top"></p>
 <p class="content">
     <p>利用border画出梯形，模拟圆角</p>
 </p>
 <p class="bottom"></p>
</p>

p {   
 box-sizing: border-box;   
}   
.top {   
 height: 0;   
 border-top: 3px solid transparent;   
 border-bottom: 3px solid #111;   
 border-left: 3px solid transparent;   
 border-right: 3px solid transparent;   
}   
.bottombottom {   
 height: 0;   
 border-top: 3px solid #111;   
 border-bottom: 3px solid transparent;   
 border-left: 3px solid transparent;   
 border-right: 3px solid transparent;   
}   
.content {   
 color: #fff;   
 background-color: #111;   
}   
.wrapper {   
 width: 200px;   
 margin: 0 auto;   
}

위 내용은 border-radius 이외의 CSS 둥근 테두리를 만드는 방법 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!