CSS3 テキスト効果

CSS3 には、いくつかの新しいテキスト機能が含まれています。

この章では、次のテキストのプロパティについて学習します:

text-shadow
box-shadow
text-overflow
word-wrap
言葉- Break

ブラウザは

CSS3テキストシャドウをサポートしています

CSS3では、text-shadowプロパティがテキストシャドウに適しています。

Text shadow effect!

水平方向の影、垂直方向の影、ぼかし距離、および影の色を指定します:

インスタンス

<!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 の box-shadow プロパティはボックスシャドウに適用されます

インスタンス

<!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>

インスタンスを実行する»スタンス」ボタンにオンラインインスタンスを表示します

次に影に色を追加します

インスタンス

<!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>

インスタンスを実行する»オンラインの例を表示するには、[インスタンスを実行] ボタンをクリックします

次へ影にぼかし効果を追加します

例

<!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>

例の実行»「例の実行」ボタンをクリックしてオンライン例を表示します

2 つの疑似要素に影効果を追加することもできます::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: 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コードは次のとおりです：

rtance

rreee

runインスタンス»

オンラインインスタンスを表示する「run instance」ボタンをクリックして

css3単語breakings3単語breaking属性を指定します。改行ルール:

CSS コードは次のとおりです:

例

<!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>

例の実行»
[例の実行] ボタンをクリックしてオンライン例を表示します

プロパティhanging-punctuationpunctuation-trimtext-align-lasttext-emphasistext-justifytext-outlinetext-overflowtext-shadowtext-wrapword-breakword-wrap

← CSS3 グラデーション

CSS3フォント →

提出する

PHP中国語ウェブサイト

説明	CSS
仕様ドット文字がワイヤーフレームの外側にあるかどうか。	3
は、句読点文字をトリミングするかどうかを指定します。	3
最終行または強制改行の直前の行をどのように配置するかを設定します。	3
強調マークと強調マークの前景色を要素のテキストに適用します。	3
text-align が "justify" に設定されている場合に使用される配置方法を指定します。	3
テキストのアウトラインを指定します。	3
テキストが含まれている要素からオーバーフローした場合の動作を指定します。	3
テキストに影を追加します。	3
テキストの行折り返しルールを指定します。	3
中国語、日本語、韓国語以外のテキストの改行ルールを指定します。	3
を使用すると、分割できない長い単語を分割して次の行に折り返すことができます。	3