css3に影効果はありますか？-フロントエンドQ&A-php.cn

css3に影効果はありますか？

WBOY

リリース： 2022-04-22 18:22:12

オリジナル

1500 人が閲覧しました

css3 には影効果があります。1. テキストの影効果。「text-shadow」属性を使用するだけです。構文は「text-shadow: 水平と垂直...」です。2.シャドウボックス効果。「box-shadow」属性を使用するだけです。構文は「box-shadow: horizontal andvertical...」です。

css3に影効果はありますか？

このチュートリアルの動作環境: Windows 10 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

css3 には影効果がありますか?

1.「text-shadow」属性はテキストの影を表します

構文は

text-shadow:水平阴影 垂直阴影 模糊程度 颜色

ログイン後にコピー

です。

text -shadow 属性は、1 つ以上のシャドウテキストを接続します。プロパティはシャドウで、2 つまたは 3 つごとの長さの値と、オプションの色の値をカンマで区切って指定します。期限切れの長さは 0 です。

例は次のとおりです:

<html>
<head>
<meta charset="utf-8"> 
<title>123</title> 
<style>
h1 {text-shadow:2px 2px #FF0000;}
</style>
</head>
<body>
<h1>Text-shadow effect</h1>
<p><b>注意:</b>IE 9及更早版本的浏览器不支持 text-shadow 属性.</p>
</body>
</html>

ログイン後にコピー

出力結果:
css3に影効果はありますか？

2. "box-shadow" はボックスシャドウを表します

構文は

box-shadow:水平阴影 垂直阴影 模糊距离 大小

ログイン後にコピー

です。 boxShadow プロパティは、ボックスに 1 つ以上のドロップダウンシャドウを追加します。このプロパティは、シェードのコンマ区切りのリストで、各シェードは 2 ～ 4 個の長さの値、オプションのカラー値、およびオプションの inset キーワードによって指定されます。省略された長さの値は 0 です。

例は次のとおりです:

<html>
<head>
<meta charset="utf-8"> 
<title>123</title> 
<style> 
div
{
width:300px;
height:100px;
background-color:yellow;
box-shadow: 10px 10px 5px #888888;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

ログイン後にコピー

出力結果:

css3に影効果はありますか？