CSS3 テキスト効果

CSS3では、Webページをより美しく快適にするリッチテキスト修飾効果が追加されています。一般的に使用される CSS3 テキストプロパティを以下に示します。

CSS3 テキストプロパティ

プロパティテキストオーバーフロー処理

word-wrap long 単語または URL を強(qiáng)制的に分割する

box-shadow ボックスに 1 つ以上の影を追加する

word-break 自動(dòng)行折り返しの処理方法を指定します

text-shadow 屬性

CSS3 では、text -shadow 屬性を使用してテキストの影効果を?qū)g現(xiàn)できます。

構(gòu)文:
text-shadow:x-offset y-offset Blur color;

説明:

x-offset: (水平シャドウ) はシャドウの水平オフセット距離を表し、単位は次のようになります。 px、em、パーセンテージなど。値が正の場(chǎng)合、影は右にオフセットされます。値が負(fù)の場(chǎng)合、影は左にオフセットされます。 y-offset: (垂直影) は、影の垂直オフセット距離を表します。 px、em、またはパーセント待機(jī)のいずれかです。値が正の場(chǎng)合、影は下に移動(dòng)します。値が負(fù)の場(chǎng)合、影は上に移動(dòng)します。 blur: (ぼかし距離) は影のぼかしの程度を示し、単位は px、em、です。またはパーセンテージ。ブラー値を負(fù)にすることはできません。値が大きいほど影はぼやけ、値が小さいほど影はより鮮明になります。もちろん、影のぼかし効果が必要ない場(chǎng)合は、ぼかし値を 0 に設(shè)定できます。

color: (影の色) は影の色を表します。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文網(wǎng)(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プロパティはボックスシャドウに適しています

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文網(wǎng)(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中文網(wǎng)(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中文網(wǎng)(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: マークに省略記號(hào) (...) を使用するかどうかオブジェクト內(nèi)のテキストオーバーフロー

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文網(wǎng)(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">
  不顯示省略標(biāo)記，而是簡(jiǎn)單的裁切條
</div>
<br><br>
<div class="test_demo_ellipsis">
  當(dāng)對(duì)象內(nèi)文本溢出時(shí)顯示省略標(biāo)記
</div>
</body>
</html>

CSS3 行折り返しword-wrap

単語が長(zhǎng)すぎて領(lǐng)域內(nèi)に収まらない場(chǎng)合は、領(lǐng)域外に拡張されます:

CSS3 Word Break プロパティを使用すると、単語を途中で分割することになる場(chǎng)合でも、テキストを強(qiáng)制的に折り返すことができます:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文網(wǎng)(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將完全向后兼容，所以沒有必要修改的設(shè)計(jì)來讓它們繼續(xù)運(yùn)作。
    網(wǎng)絡(luò)瀏覽器也還將繼續(xù)支持CSS2。CSS3主要的影響是將可以使用新的可用的選擇器和屬性，
    這些會(huì)允許實(shí)現(xiàn)新的設(shè)計(jì)效果（譬如動(dòng)態(tài)和漸變），而且可以很簡(jiǎn)單的設(shè)計(jì)出現(xiàn)在的設(shè)計(jì)效果（比如說使用分欄）。
  </p>
</body>
</html>

CSS3 Word Break

CSS3 Word Breaking プロパティは改行ルールを指定します:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文網(wǎng)(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"> 為什么大羅如此讓球迷念念不忘？我們喜愛一個(gè)球星或一支球隊(duì)多少會(huì)有情愫寄托在內(nèi)。</p>
<p class="test2"> 為什么大羅如此讓球迷念念不忘？我們喜愛一個(gè)球星或一支球隊(duì)多少會(huì)有情愫寄托在內(nèi)。</p>
</body>
</html>

學(xué)び続ける

||

新しいファイル

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(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>

提出するリセットコード
自動(dòng)運(yùn)転