CSS3는 웹 디자인 및 레이아웃에 사용되는 스타일 시트 언어로, 풍부한 기능과 강력한 기능을 갖추고 있습니다. 그중 취소선은 일반적으로 삭제된 텍스트나 내용을 나타내는 데 사용되는 일반적인 효과입니다. 이 기사에서는 CSS3를 사용하여 취소선을 작성하는 방법을 소개합니다.
텍스트 장식 속성은 취소선 효과를 포함한 텍스트 장식 효과를 설정하는 데 사용됩니다. 해당 값을 line-through로 설정하면 취소선 효과를 얻을 수 있습니다. 예를 들어 다음 CSS 코드는 다음과 같습니다.
.delete {
text-decoration: line-through;
}이 스타일은 클래스 이름이 delete인 요소에 적용되므로 모든 텍스트 콘텐츠에 취소선 효과가 적용됩니다.
텍스트 장식 속성을 사용하여 취소선 효과를 설정하는 것 외에도 CSS3에서는 취소선 스타일을 사용자 정의하여 더욱 아름답고 개인화할 수 있는 다양한 방법을 제공합니다.
2.1 취소선 색상 설정
텍스트 장식 색상 속성을 통해 취소선 색상을 설정합니다. 예:
.delete {
text-decoration: line-through;
text-decoration-color: red;
}이 스타일은 클래스 이름이 delete인 요소에 적용되어 모든 텍스트에 취소선 색상을 부여합니다. 내용은 빨간색입니다.
2.2 취소선 위치를 설정하세요
text-꾸밈-위치 속성을 통해 취소선 위치를 설정하세요. 기본적으로 취소선은 텍스트 중앙에 있습니다. 이 속성을 사용하여 취소선의 위쪽 및 아래쪽 오프셋을 설정할 수 있습니다.
.delete {
text-decoration: line-through;
text-decoration-position: under;
}이 스타일은 모든 텍스트 내용의 취소선 위치가 텍스트 아래에 있도록 클래스 이름이 delete인 요소에 적용됩니다.
2.3 취소선 너비 설정
text-design-thickness 속성을 통해 취소선 너비를 설정합니다. 기본적으로 취소선 너비는 1px입니다. 이 속성을 사용하여 취소선의 너비를 변경할 수 있습니다.
.delete {
text-decoration: line-through;
text-decoration-thickness: 2px;
}이 스타일은 클래스 이름이 삭제된 요소에 적용되어 모든 텍스트 내용의 취소선 너비가 2픽셀이 됩니다.
취소선 효과를 설정하기 위해 텍스트 장식 속성을 사용하는 것 외에도 CSS3에서는 의사 요소를 사용하여 취소선 효과를 얻을 수도 있습니다. 의사 요소의 콘텐츠 속성을 공백으로 설정하고 너비, 색상, 위치 및 기타 속성을 설정하면 취소선 효과를 얻을 수 있습니다. 예를 들어, 다음 CSS 코드:
.delete::after {
content: "";
display: block;
width: 100%;
height: 1px;
background-color: black;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}이 스타일은 클래스 이름이 delete인 요소의 의사 요소에 적용되어 너비가 1px이고 텍스트 아래에 검정색 색상의 취소선이 표시됩니다.
요약
텍스트 장식 속성, 사용자 정의 취소선 스타일 및 의사 요소를 통해 취소선 효과를 쉽게 얻을 수 있습니다. 읽기 환경 고려 사항이나 SEO 최적화와 같은 일부 특수한 시나리오에서는 취소선이 적용되지 않습니다. 사용 시 구체적인 상황에 따라 고려해야 합니다.
위 내용은 CSS3 쓰기 삭제의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!