CSS3 텍스트 효과
CSS3에는 몇 가지 새로운 텍스트 기능이 포함되어 있습니다.
이 장에서는 다음 텍스트 속성에 대해 배웁니다.
text-shadow
box-shadow
text-overflow
word-wrap
-
단어- break
브라우저는
CSS3 text Shadow
을 지원합니다. CSS3에서 text-shadow 속성은 텍스트 그림자에 적합합니다.
가로 그림자, 세로 그림자, 흐림 거리 및 그림자 색상을 지정합니다.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
h1
{
text-shadow: 5px 5px 5px #FF0000;
}
</style>
</head>
<body>
<h1>Text-shadow effect!</h1>
<p><b>注意:</b> Internet Explorer 9 以及更早版本的浏览器不支持 text-shadow属性.</p>
</body>
</html>인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
CSS3 box-shadow 속성
CSS3의 CSS3 box-shadow 속성은 box Shadow
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
div
{
width:300px;
height:100px;
background-color:yellow;
box-shadow: 10px 10px 5px #888888;
}
</style>
</head>
<body>
<div></div>
</body>
</html>인스턴스 실행»
"인스턴스 실행" 버튼을 클릭하여 온라인 인스턴스 보기
다음 그림자에 색상 추가
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
div {
width: 300px;
height: 100px;
padding: 15px;
background-color: yellow;
box-shadow: 10px 10px grey;
}
</style>
</head>
<body>
<div>This is a div element with a box-shadow</div>
</body>
</html>인스턴스 실행»
온라인 예제를 보려면 "인스턴스 실행" 버튼을 클릭하세요
다음 그림자에 흐림 효과 추가
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
div {
width: 300px;
height: 100px;
padding: 15px;
background-color: yellow;
box-shadow: 10px 10px 5px grey;
}
</style>
</head>
<body>
<div>This is a div element with a box-shadow</div>
</body>
</html>인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
두 가상 요소에 그림자 효과를 추가할 수도 있습니다 ::before and::after
Example
<!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: 100%;
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="rock600x400.jpg" alt="Norway" width="600" height="400">
</div>
</body>
</html>예제 실행»
온라인 예제를 보려면 "예제 실행" 버튼을 클릭하세요
사용의 특별한 경우 그림자는 카드 효과입니다
예
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
div.card {
width: 250px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align: center;
}
div.header {
background-color: #4CAF50;
color: white;
padding: 10px;
font-size: 40px;
}
div.container {
padding: 10px;
}
</style>
</head>
<body>
<h2>卡片</h2>
<p>box-shadow 属性用来可以创建纸质样式卡片:</p>
<div class="card">
<div class="header">
<h1>1</h1>
</div>
<div class="container">
<p>January 1, 2016</p>
</div>
</div>
</body>
</html>텍스트 카드
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
CSS3 텍스트 오버플로 속성
CSS3 텍스트 오버플로 속성은 오버플로 내용이 사용자에게 표시되는 방법을 지정합니다.
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
div.polaroid {
width: 250px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align: center;
}
div.container {
padding: 10px;
}
</style>
</head>
<body>
<h2> 卡片</h2>
<p>box-shadow属性可以用来创建纸质样式卡片:</p>
<div class="polaroid">
<img src="rock600x400.jpg" alt="Norway" style="width:100%">
<div class="container">
<p>Hardanger, Norway</p>
</div>
</div>
</body>
</html>예제 실행»
온라인 예제를 보려면 "예제 실행" 버튼을 클릭하세요
CSS3의 줄 바꿈
단어가 너무 길어서 영역 안에 들어갈 수 없으면 바깥으로 확장됩니다.
CSS3에서 wordwrap 속성을 사용하면 텍스트를 강제로 줄 바꿈할 수 있습니다. 이는 중간에 단어를 분할하는 경우에도 마찬가지입니다. :
CSS 코드는 다음과 같습니다.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
div.test
{
white-space:nowrap;
width:12em;
overflow:hidden;
border:1px solid #000000;
}
</style>
</head>
<body>
<p>以下 div 容器内的文本无法完全显示，可以看到它被裁剪了。</p>
<p>div 使用 "text-overflow:ellipsis":</p>
<div class="test" style="text-overflow:ellipsis;">This is some long text that will not fit in the box</div>
<p>div 使用 "text-overflow:clip":</p>
<div class="test" style="text-overflow:clip;">This is some long text that will not fit in the box</div>
<p>div 使用自定义字符串 "text-overflow: >>"(只在 Firefox 浏览器下有效):</p>
<div class="test" style="text-overflow:'>>';">This is some long text that will not fit in the box</div>
</body>
</html>Run Instance»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.
CSS3 Word Breaking
CSS3 Word Breaking 속성은 줄 바꿈 규칙:
CSS 코드는 다음과 같습니다.
예제
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
p.test
{
width:11em;
border:1px solid #000000;
word-wrap:break-word;
}
</style>
</head>
<body>
<p class="test"> This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p>
</body>
</html>예제 실행»
온라인 예제를 보려면 "예제 실행" 버튼을 클릭하세요
| Properties | Description | CSS |
|---|---|---|
| hanging-tempoation | 사양 점 문자가 와이어프레임 외부에 있는지 여부. | 3 |
| punkation-trim | 은 구두점 문자를 자를지 여부를 지정합니다. | 3 |
| text-align-last | 마지막 줄 또는 강제 개행 직전 줄의 정렬 방법을 설정합니다. | 3 |
| text-emphasis | 요소의 텍스트에 강조 표시와 강조 표시의 전경색을 적용합니다. | 3 |
| text-justify | text-align이 "justify"로 설정된 경우 사용되는 정렬 방법을 지정합니다. | 3 |
| text-outline | 텍스트의 개요를 지정합니다. | 3 |
| text-overflow | 텍스트가 포함 요소를 오버플로할 때 발생하는 상황을 지정합니다. | 3 |
| text-shadow | 텍스트에 그림자를 추가하세요. | 3 |
| text-wrap | 텍스트 줄 바꿈 규칙을 지정합니다. | 3 |
| word-break | 중국어, 일본어 및 한국어가 아닌 텍스트에 대한 줄 바꿈 규칙을 지정합니다. | 3 |
| word-wrap | 을 사용하면 분할할 수 없는 긴 단어를 나누어 다음 줄로 줄 바꿈할 수 있습니다. | 3 |
