CSS3でボックスシャドウを実装するにはどうすればよいですか? CSS3の影効果-CSSチュートリアル-php.cn

CSS3でボックスシャドウを実装するにはどうすればよいですか? CSS3の影効果

云罗郡主

リリース： 2018-11-09 14:59:50

オリジナル

5058 人が閲覧しました

CSS画像に影を追加するにはどうすればよいですか? CSS3でボックスシャドウを実装するにはどうすればよいですか? CSSに触れたばかりの友人の中には、このような疑問を持つ人も多いと思います。この章では、CSS3 のシャドウ効果と CSS3 でボックスシャドウを実装する方法を紹介します。困っている友人は参考にしていただければ幸いです。

CSS3 は、テキストまたは要素への影の追加をサポートしています。影属性は次の 2 種類に分類されます。

テキストシャドウ

ボックスシャドウ

1: テキストシャドウ

テキストに影効果を追加する CSS3 をサポートします。。テキストにドロップシャドウ効果を追加する例を次に示します:

<html>
   <head>
      <style>
         h1 {
            text-shadow: 2px 2px;
         }
         h2 {
            text-shadow: 2px 2px red;
         }
         h3 {
            text-shadow: 2px 2px 5px red;
         }
         h4 {
            color: white;
            text-shadow: 2px 2px 4px #000000;
         }
         h5 {
            text-shadow: 0 0 3px #FF0000;
         }
         h6 {
            text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
         }
         p {
            color: white;
            text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
         }
      </style>
   </head>
   <body>
      <h1>www.php.cn</h1>
      <h2>www.php.cn</h2>
      <h3>www.php.cn</h3>
      <h4>www.php.cn</h4>
      <h5>www.php.cn</h5>
      <h6>www.php.cn</h6>
      <p>www.php.cn</p>
   </body>
</html>

ログイン後にコピー

効果は次のとおりです:

CSS3でボックスシャドウを実装するにはどうすればよいですか? CSS3の影効果

2: ボックスシャドウ

要素のシャドウ効果にドロップシャドウを追加するために使用されます。以下は要素にシャドウ効果を追加する例です:

<html>
   <head>
      <style>
         div {
            width: 300px;
            height: 100px;
            padding: 15px;
            background-color: red;
            box-shadow: 10px 10px;
         }
      </style>
   </head>
   <body>
      <div>这是一个带有box-shadow的div元素</div>
   </body>
</html>

ログイン後にコピー

効果は次のとおりです:

CSS3でボックスシャドウを実装するにはどうすればよいですか? CSS3の影効果