ホームページ  >  記事  >  ウェブフロントエンド  >  CSSで影を追加する方法

CSSで影を追加する方法

藏色散人
藏色散人オリジナル
2021-05-27 11:52:003666ブラウズ

CSS で影を追加する方法: 1. 「box-shadow」属性を使用してボックスに 1 つ以上の影を追加します; 2. 「text-shadow」属性を通じてテキストに影を設定します。

CSSで影を追加する方法

この記事の動作環境: Windows7 システム、HTML5&&CSS3 バージョン、DELL G3 コンピューター

CSS で影を追加するにはどうすればよいですか?

box-shadow プロパティは、ボックスに 1 つ以上の影を追加します。

ヒント: 美しいスケーラブルなボタンを作成するには、border-image-* プロパティを使用してください。

構文

box-shadow: h-shadow v-shadow blur spread color inset;

コメント: box-shadow は、ボックスに 1 つ以上の影を追加します。このプロパティは、シャドウのコンマ区切りのリストで、それぞれ 2 ~ 4 個の長さの値、オプションのカラー値、およびオプションの inset キーワードで指定されます。省略された長さの値は 0 です。

CSSで影を追加する方法

コード例:

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:300px;
height:100px;
background-color:#ff9900;
-moz-box-shadow: 10px 10px 5px #888888; /* 老的 Firefox */
box-shadow: 10px 10px 5px #888888;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

効果:

CSSで影を追加する方法

text-shadow 属性をテキストセットのシャドウ。

構文

text-shadow: h-shadow v-shadow blur color;

コメント: text-shadow プロパティは、テキストに 1 つ以上の影を追加します。このプロパティは、シェードのカンマ区切りのリストで、各シェードは 2 つまたは 3 つの長さの値とオプションの色の値で指定されます。省略された長さは 0 です。

CSSで影を追加する方法

コード例:

<!DOCTYPE html>
<html>
<head>
<style>
h1
{
text-shadow: 5px 5px 5px #FF0000;
}
</style>
</head>
<body>
<h1>文本阴影效果!</h1>
</body>
</html>

効果:

CSSで影を追加する方法

推奨事項: "HTML ビデオ チュートリアル >>《css ビデオ チュートリアル

以上がCSSで影を追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。