CSS3에는 리치 텍스트 수정 효과가 추가되어 웹페이지를 더욱 아름답고 편안하게 만들어줍니다. 일반적으로 사용되는 CSS3 텍스트 속성은 다음과 같습니다.
CSS3 텍스트 속성
속성 >text-shadow
텍스트 오버플로 처리
box-shadow 상자에 하나 이상의 그림자를 추가합니다
단어 -break 자동 줄 바꿈 처리 방법을 지정합니다. text-shadow 속성구문:
text-shadow:x-offset y-offset 흐림 색상;설명:
x-offset: (수평 그림자)는 그림자의 수평 오프셋 거리를 나타내며 단위는 px, em 또는 백분율 등이 될 수 있습니다. 값이 양수이면 그림자는 오른쪽으로 오프셋되고, 값이 음수이면 그림자는 왼쪽으로 오프셋됩니다.y-offset: (수직 그림자)는 그림자의 수직 오프셋 거리를 나타냅니다. , 단위는 px, em 또는 백분율 등이 될 수 있습니다. 값이 양수이면 그림자가 아래쪽으로 이동하고, 값이 음수이면 그림자가 위쪽으로 이동합니다.
blur: (흐림 거리)는 그림자의 흐림 정도를 나타내며 단위는 px입니다. em 또는 백분율 등. 흐림 값은 음수일 수 없습니다. 값이 클수록 그림자가 더 흐려지고, 값이 작을수록 그림자가 더 선명해집니다. 물론 그림자 흐림 효과가 필요하지 않은 경우 흐림 값을 0으로 설정할 수 있습니다. color: (그림자의 색상)은 그림자의 색상을 나타냅니다.<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style type="text/css">
p{
text-align:center;
margin:0;
font-family: helvetica,arial,sans-serif;
color:#999;
font-size:80px;
font-weight:bold;
text-shadow:10px 10px #333;
}
</style>
</head>
<body>
<p>Text Shadow</p>
</body>
</html>box-shadow 속성CSS3의 CSS3 box-shadow 속성은 box Shadows에 적합합니다<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style type="text/css">
div
{
width:300px;
height:100px;
background-color:red;
box-shadow: 10px 10px 5px blue;
}
</style>
</head>
<body>
<div></div>
</body>
</html> 그림자에 흐림 효과 추가
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style type="text/css">
div
{
width:300px;
height:100px;
background-color:red;
box-shadow: 10px 10px 15px grey;;
}
</style>
</head>
<body>
<div></div>
</body>
</html>또한 ::before 및 ::after 의사 요소
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
#boxshadow {
position: relative;
-moz-box-shadow: 1px 2px 4px rgba(0, 0, 0,0.5);
-webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
padding: 10px;
background: white;
}
/* Make the image fit the box */
#boxshadow img {
width: 90%;
border: 1px solid #8a4419;
border-style: inset;
}
#boxshadow::after {
content: '';
position: absolute;
z-index: -1; /* hide shadow behind image */
-webkit-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
width: 70%;
left: 15%; /* one half of the remaining 30% */
height: 100px;
bottom: 0;
}
</style>
</head>
<body>
<div id="boxshadow">
<img src="https://img.php.cn/upload/course/000/000/008/5801821694a3b224.jpg" alt="Norway" width="300" height="200">
</div>
</body>
</html>text-overflow 속성
< 🎜에 그림자 효과를 추가할 수도 있습니다. >text-overflow: 개체 내에서 텍스트의 오버플로를 나타내기 위해 생략 표시(...)를 사용할지 여부<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style type="text/css">
.test_demo_clip{text-overflow:clip; overflow:hidden; white-space:nowrap; width:200px; height:50px; background:#ccc;}
.test_demo_ellipsis{text-overflow:ellipsis; overflow:hidden; white-space:nowrap; width:200px; height:50px; background:#ccc;}
</style>
</head>
<body>
<div class="test_demo_clip">
不显示省略标记，而是简单的裁切条
</div>
<br><br>
<div class="test_demo_ellipsis">
当对象内文本溢出时显示省略标记
</div>
</body>
</html>CSS3 줄 바꿈 word-wrap
단어가 너무 길어서 영역 내부에 들어갈 수 없으면 외부로 확장됩니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style type="text/css">
p.test
{
width:11em;
border:2px solid blue;
word-wrap:break-word;
}
</style>
</head>
<body>
<p class="test">
CSS3将完全向后兼容，所以没有必要修改的设计来让它们继续运作。
网络浏览器也还将继续支持CSS2。CSS3主要的影响是将可以使用新的可用的选择器和属性，
这些会允许实现新的设计效果（譬如动态和渐变），而且可以很简单的设计出现在的设计效果（比如说使用分栏）。
</p>
</body>
</html> CSS3 단어 나누기
CSS3 단어 분리 속성은 줄바꿈 규칙을 지정합니다:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style type="text/css">
p.test1
{
width:9em;
border:1px solid #000000;
word-break:keep-all;
}
p.test2
{
width:9em;
border:1px solid #000000;
word-break:break-all;
}
</style>
</head>
<body>
<p class="test1"> 为什么大罗如此让球迷念念不忘？我们喜爱一个球星或一支球队多少会有情愫寄托在内。</p>
<p class="test2"> 为什么大罗如此让球迷念念不忘？我们喜爱一个球星或一支球队多少会有情愫寄托在内。</p>
</body>
</html>