CSS의 개요 분석(예제 포함)

이 글의 내용은 CSS의 개요 분석에 관한 것입니다(예제 포함). 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

라디오 버튼 색상을 변경하는 css 방법 구현에서 Tab 키를 통해 포커스를 얻는 기본 라디오 버튼의 효과를 시뮬레이션하려고 합니다. 여기에는 이전 노출 때문에 종종 무시되는 속성인 개요가 포함됩니다. 좀 모호한 부분이 있어서 이번 글에서는 좀 더 깊이 공부해 볼 생각입니다^_^

Spec의 기능은 이렇게 설명되어 있습니다

function

은 시각적 개체의 윤곽선(테두리)을 만드는 데 사용됩니다. -요소의 상자)(예: 양식 버튼 등고선 등)

테두리와 다름

1. 외곽선은 문서 공간을 차지하지 않습니다.

2. 외곽선은 반드시 직사각형이 아닙니다.

특정 속성 설명

/* 轮廓线颜色 
 * invert表示为颜色反转，即使轮廓在不同的背景颜色中都可见 
 */
outline-color: invert | <color_name> | <hex_number> | <rgb_number> | inherit
/* 轮廓线样式 */
outline-style: none | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit
/* 轮廓线宽度 */
outline-width: medium | thin | thick | <length> | inherit
/* 一次性设置轮廓线的颜色、样式 和 宽度 */
outline: <outline-color> <outline-style> <outline-width>;
/* 轮廓线的偏移量，大于0则轮廓扩大，小于0则轮廓缩小 */
outline-offset: 0px;</outline-width></outline-style></outline-color></length></rgb_number></hex_number></color_name>

악마는 세부 사항에 있습니다

호환성

개요는 CSS2.1 사양이므로 IE6/7/8(Q)에서는 IE8에서 올바른 DOCTYPE 작성을 지원하지 않습니다. 개요 속성.
IE에서는 윤곽선 오프셋이 지원되지 않습니다.

IE6/7/8(Q)에서 윤곽선 숨기기

IE6/7/8(Q)에서 윤곽선 효과를 숨기려면 요소에 hideFocus 속성을 추가하기만 하면 됩니다.

outline:0과 개요:none의 차이점

Chrome에서 다음 코드를 실행하세요

<style>
 .outline0{
   outline: 0;
 }
 .outline-none{
   outline: none;
 }
</style>
<a>outline: 0</a>
<a>outline: none</a>
<script>
  const $ = document.querySelector.bind(document)
  const print = console.log.bind(console)
  const cssProps = ["outline-width", "outline-style", "outline-color"]
  const slctrs = [".outline0", ".outline-none"]
     
  slctrs.forEach(slctr => {
    styles = window.getComputedStyle($(slctr))
      cssProps.forEach(cssProp => {
        print("%s, %s is %s", slctr, cssProp, styles[cssProp])
      })
    })
</script>

결과:

.outline0, outline-width is 0px
.outline0, outline-style is none
.outline0, outline-color is rgb(0, 0, 238)
.outline-none, outline-width is 0px
.outline-none, outline-style is none
.outline-none, outline-color is rgb(0, 0, 238)

outline은 단일 또는 여러 개의 특정 개요 속성을 설정하는 데 더 편리한 API만 제공하므로 개요:0 효과는 본질적으로 개요:없음과 동일합니다.

둥근 모서리를 만들 수는 없습니다

테두리 반경이 있으므로 CSS를 통해 둥근 직사각형, 원 및 기타 그래픽을 만들 수 있습니다. 또한 모서리가 둥글다. 그럼 아웃라인도 둥근 모서리를 만들 수 있나요? 대답은 '아니요'입니다. 왜냐하면 아웃라인의 기능은 요소가 차지하는 공간의 윤곽을 잡아주는 것이기 때문입니다. 비록 그래픽적인 시각적 반올림은 border-radius를 통해 이루어지지만, 요소가 차지하는 위치와 공간은 전혀 변하지 않았으며 여전히 각진 사각형입니다. .

<style>
  .round{
    width: 100px;
    height: 100px;
    background: yellow;
    border-radius: 50%;
    outline: solid 1px red;
  }
</style>

아웃라인의 차이점

Chrome에서 아웃라인은 현재 요소 자체(border-box)가 차지하는 위치 공간을 식별하는 것으로 제한되지만, FireFox에서는 아웃라인이 차지하는 위치 공간도 포함합니다. 하위 요소.

<style>
  .outline{
    width: 13px;
    height: 13px;
    outline: 1px solid red;
  }
</style>
<p></p>
<script>
  const el = document.querySelector(".outline")
  el.textContent = !!~navigator.appVersion.indexOf("Chrome") ? "Chrome" : "FireFox"
</script>

위 내용은 CSS의 개요 분석(예제 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!