여러 CSS 블랙 기술

여기서 검은 기술은 실제로 잘 알려지지 않았지만 특정 문제를 해결하는 데 매우 유용한 CSS의 일부 속성입니다.

Border-radius

기본적으로 많은 사람들이 다음과 같이 사용하기 때문에 많은 개발자가 이 border-radius를 정확하게 알지 못할 것입니다.

.box {
  border-radius: 4px;
}

약간 고급형 약간은 이렇습니다:

.box {
  border-radius: 4px 6px 6px 4px;
}

그러나 궁극적인 블랙 기술은 다음과 같이 사용됩니다:

.box {
  border-radius: 5px 5px 3px 2px / 5px 5px 1px 3px;
}

네, 8개의 값을 지정할 수 있습니다. 본 적이 없나요? 걱정하지 마세요. 구체적인 설명은 다음과 같습니다.

슬래시 앞의 숫자는 가로 방향에 영향을 주고, 슬래시 뒤의 숫자는 세로 방향에 영향을 줍니다.

outline-offset

많은 개발자들이 CSS를 작성할 때 다음 문장에 익숙할 것이라고 믿습니다.

input {
    outline : none;
}
input:focus {
    outline : none;
}

이것은 입력 입력 상자입니다. 기본 파란색 선 프레임을 제거합니다. 사실 여기서 또 언급할 점은 CSS에 윤곽선 오프셋 속성이 있다는 것입니다. 이 속성에서는 기본 와이어프레임의 거리를 다음과 같이 설정할 수 있습니다.

input {
    outline-offset: 4px ;
}

윤곽선의 거리 변화를 확인할 수 있습니다.

클래스 선언

다음 클래스 선언은 누구나 익숙할 것입니다.

.col-8 {
}

물론 별거 아니지만 이렇게 쓰면 어떨까요?

.♥ {
  color: hotpink;
}
.★ {
  color: yellow;
}

그럼 어떻게 보이나요?

<div class="♥ ★"></div>

유니코드라면 이렇게 클래스를 선언할 수 있습니다.

연속된 여러 요소 선택

ol li:nth-child(n+7):nth-child(-n+14) {
  background: lightpink;
}
/** Or Safari Way **/
ol li:nth-child(-n+14):nth-child(n+7) {
  background: lightpink;
}

위의 작성 방법은 실제로 ol 아래의 7~14번째 li 요소를 선택할 수 있습니다.

유사 클래스 단일 태그 설정

HTML에는 0c6dc11e160d3b678d68754cc175188a, f32b48428a809b51f04d3228cdf461fa 등 몇 가지 일반적인 단일 태그가 있습니다.

다음 예는 f32b48428a809b51f04d3228cdf461fa을 수정하는 것입니다.

hr:before {
    content: "♪♪";
}
hr:after {
    content: " This is an <hr> element";
}

예, 핵심은 두 가지 의사 클래스(before 및 :after)를 사용하는 것입니다. 그런데 여기서 실제로 이 두 가상 클래스를 사용하여 e8e496c15ba93d81f6ea4fe5f55a2244 및 2cdf5bf648cf2f33323966d7f58a7f3f를 수정할 수 있지만 전제는 이 두 클래스의 표시 속성을 다음과 같이 설정한다는 것입니다. >속성은 대소문자를 구분합니다

display: block

HTML을 작성할 때 다음과 유사한 코드가 있는 경우:

그런 다음 CSS 수정을 위해 속성 선택기를 사용합니다.

<div class="box"></div>
<input type="email">

그러한 진술은 의심할 여지 없이 효과적일 것입니다. 그러나 이렇게 선언하면 결과는 다음과 같습니다.

div[class="box"] {
  color: blue;
}
input[type="email"] {
  border: solid 1px red;
}

이것이 대문자가 된 후에는 첫 번째 class="BOX"가 f13bdbf66c0aac01a871c67dfae743d8, 두 번째 type="EMAIL"은 여전히 ​​e8dc7451c84937575e38c52150e3cc83을 수정합니다. 따라서 속성 선택기를 사용할 때는 대문자 사용 문제에 주의하세요.

div[class="box"] {
  color: blue;
}
input[type="email"] {
  border: solid 1px red;
}