CSS를 사용하여 텍스트 삭제 효과를 얻는 방법

웹 디자인에서는 페이지의 아름다움과 흥미를 높이기 위해 몇 가지 특수 효과가 필요할 수 있습니다. 예를 들어 중요한 정보를 강조하거나 특정 내용을 강조하기 위해 텍스트 효과가 필요할 수 있습니다. 그 중 하나는 텍스트 취소선입니다. 일부 텍스트에 취소선을 쳐 해당 텍스트가 더 이상 유효하지 않거나 관련성이 없음을 나타냅니다. 이 기사에서는 CSS를 사용하여 텍스트 삭제 효과를 얻는 방법을 소개합니다.

1. text-dressing: line-through;

텍스트 삭제 효과를 얻으려면 text-장식 속성을 사용하고 값을 line-through로 설정할 수 있습니다. 이 속성은 일반적으로 텍스트에 밑줄을 긋는 데 사용되지만 텍스트를 삭제하는 데에도 사용할 수 있습니다. 다음은 샘플 코드입니다.

<p class="delete">这是一段被删除的文本。</p>

.delete {
  text-decoration: line-through;
}

이 예에서는 "delete"라는 클래스를 p 요소에 추가하고 해당 텍스트 장식 속성 값을 line-through로 설정합니다. 즉, 이 텍스트 내에서 단어가 삭제되었음을 나타내기 위해 취소선이 표시됩니다. 이는 텍스트 삭제 효과를 얻는 가장 기본적이고 간단한 방법입니다.

2. 취소선 색상, 스타일 및 두께 사용자 정의

스타일에서는 취소선 색상, 스타일 및 두께를 추가로 사용자 정의할 수 있습니다. 일반적으로 사용되는 속성은 텍스트 장식 색상, 텍스트 장식 스타일 및 텍스트 장식 두께입니다. 다음은 샘플 코드입니다.

<p class="delete" style="text-decoration-color: red; text-decoration-style: dotted; text-decoration-thickness: 2px;">这是一段自定义线样式、线粗细和线颜色的被删除文本。</p>

.delete {
  text-decoration-color: red;
  text-decoration-style: dotted;
  text-decoration-thickness: 2px;
}

이 예에서는 p 요소에 "delete"라는 클래스도 추가하지만 이번에는 텍스트 스타일의 추가 속성을 사용합니다. 취소선 색상은 빨간색으로, 스타일은 점선으로, 두께는 2픽셀로 설정했습니다. 이렇게 하면 웹 페이지의 특정 요구 사항에 맞게 필요에 따라 텍스트 제거 스타일을 개인화할 수 있습니다.

3. 의사 요소::before 및 ::after를 사용하세요

텍스트 장식 속성을 사용하는 것 외에도 의사 요소::before 및 ::after를 사용하여 텍스트 삭제 효과를 얻을 수도 있습니다. 다음은 샘플 코드입니다.

<p class="delete">这是一段使用伪元素实现的被删除文本。</p>

.delete::before,
.delete::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    border-top: 1px solid #000;
}

.delete::before {
    transform: rotate(-45deg);
}

.delete::after {
    transform: rotate(45deg);
}

이 예에서는 의사 요소 ::before 및 ::after를 사용하여 취소선을 만듭니다. 이러한 요소의 content 속성은 공백으로 설정되고 위치는 절대값으로 설정되어 텍스트와 겹칠 수 있습니다. 이러한 요소에 테두리 선을 추가한 다음 45도 회전하여 취소선 모양을 만들었습니다.

요약

웹페이지를 디자인할 때 텍스트 삭제 효과는 적절한 장면과 대사를 묘사하는데 도움을 줄 수 있는 매우 유용한 효과입니다. 이 기사에서는 텍스트 삭제 효과를 얻는 세 가지 방법, 즉 텍스트 장식 속성, 사용자 정의 스타일 및 의사 요소 사용을 소개했습니다. 이 기사가 웹 디자인의 유연성과 재미를 높이는 데 도움이 되기를 바랍니다.

위 내용은 CSS를 사용하여 텍스트 삭제 효과를 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!