내부 상자와 테두리에 둥근 모서리를 만들려면 어떻게 해야 합니까?

내부 상자 및 테두리의 둥근 모서리 달성

문제 이해

목표는 둥근 모서리와 테두리가 둥근 상자를 만드는 것입니다. 둥근 테두리가 있습니다. background-clip 속성을 사용하면 테두리의 둥근 모서리를 얻을 수 있습니다. 그러나 내부 상자는 직사각형으로 유지됩니다.

내부 상자 둥근 모서리 달성

내부 상자의 모서리를 둥글게 하려면 border-radius 속성을 사용할 수 있습니다. 내부 테두리 반경은 외부 테두리 반경과 테두리 너비의 차이로 계산됩니다. 따라서 내부 테두리 반경은 다음과 같습니다.

inner border radius = outer border radius - border width

테두리 너비가 테두리 반경보다 크면 내부 테두리 반경이 음수가 되어 모서리가 반전됩니다. 따라서 내부 테두리 반경을 계산할 때 테두리 너비를 고려해야 합니다.

코드 수정

제공된 코드에서 테두리 너비는 5px, 외부 테두리 반경은 10px입니다. 위 공식을 사용하면 내부 테두리 반경은 다음과 같습니다.

inner border radius = 10px - 5px = 5px

수정된 CSS는 다음과 같습니다.

.radius-all {
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}

.template-bg {
  background: #FFF;
}

.template-border {
  border: 5px solid rgba(255, 255, 255, 0.2);
}

추가 고려 사항

• 둥근 모서리를 방지하려면 외부 테두리인 경우 -vendor-Background-clip 속성을 border-box로 설정해야 합니다.
• 색상 오버레이는 16진수 색상 코드를 10진수 값으로 변환하고 필요한 계산을 수행하여 불투명도를 줄이는 방법을 사용하여 JavaScript에 적용할 수 있습니다.
• 둥근 테두리는 별도의 상자 요소를 사용하거나 생성하여 내부 상자와 외부 상자 모두에 적용할 수 있습니다. 내부 상자에 직접 테두리를 추가합니다.
• 둥근 테두리 클래스를 만들어 여러 상자에 둥근 테두리를 적용할 수 있습니다. 효율적으로.

위 내용은 내부 상자와 테두리에 둥근 모서리를 만들려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!