CSS3 개요 속성

CSS3 관련 기사를 읽는 동안 CSS 스타일을 사용하여 "+" 더하기 기호 효과를 얻는 방법을 보았습니다.

여기서 새로운 CSS3 속성인 개요를 접하게 되었는데, 중국어로 번역하면 "개요"입니다.

Grammar ：outline:outlineWidthoutlineStyleoutlineColor;

예: 개요:5px 단색 파란색;

그리고 내 테스트에 따르면 여기의 5px, 단색 및 파란색은 디스플레이 효과에 영향을 주지 않고 마음대로 바꿀 수 있습니다.

그리고 이 속성은 박스 모델의 일부이므로 공간을 차지하지 않으며 사용 시 너비, 높이 등을 계산할 필요가 없습니다. 브라우저 지원도 좋습니다: ie8+, 다른 주류 브라우저도 이를 지원합니다. Firefox는 border-radius

와 동일한 외곽선 반경도 지원합니다.

"+" 예를 보면

<p>第一个方法是使用outline－offset的向内偏移结合border实现的，不兼容所有IE，safari上也有点问题，要用chrome查看才行</p>
<p class="use-outline-offset"></p>


<style>
.use-outline-offset{
  margin-left: auto;
  margin-right: auto;
  width: 200px;
  height: 200px;
  border:40px solid #000000;
  background-color:#cccccc;
  outline-width:40px;
  outline-style:dotted;
  outline-offset:-80px;
  box-sizing: border-box;
}
</style>

에는 음수 값이 지원되는 outlook-offset 속성도 언급되어 있습니다. 이것은 AI의 경로와 오프셋 경로를 생각나게 합니다. 음수 값은 안쪽으로 오프셋됩니다. 따라서 "+" 기호 효과가 구현됩니다.

outline-offset 속성은 IE를 제외한 모든 주류 브라우저에서 지원됩니다(테스트 후에는 실제로 지원되지 않습니다).

그러나 이 속성은 공간을 많이 차지하지 않으며 작업 효율성을 향상시킬 수 있으며 윤곽선 오프셋과 결합하면 예상치 못한 효과를 얻을 수 있습니다.

위 내용은 CSS3 개요 속성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!