CSS3 で放射状のグラデーション効果を繰り返す方法を実現する方法-CSSチュートリアル-php.cn

CSS3 で放射状のグラデーション効果を繰り返す方法を実現する方法

藏色散人

リリース： 2021-04-20 15:38:14

オリジナル

5461 人が閲覧しました

CSS3 で繰り返し放射状グラデーション効果を実現する方法: 最初に HTML サンプルファイルを作成し、最後に「repeat-radial-gradient」属性を使用して繰り返し放射状グラデーション効果を実現します。。

CSS3 で放射状のグラデーション効果を繰り返す方法を実現する方法

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

css3 のグラデーション効果には、線形グラデーション、放射状グラデーション、繰り返し線形グラデーション、繰り返し放射状グラデーションが含まれます。これらのグラデーション効果により、Web ページのコンテンツをよりカラフルにすることができます。

CSS3 で放射状のグラデーション効果を繰り返す方法を実現する方法

おすすめ学習:「CSS3 Tutorial」

それでは、前回の記事でご紹介させていただきました css3 は、線形グラデーション効果、放射状グラデーション効果、および繰り返し線形グラデーション効果を実装します。

それでは引き続き、CSS3 で放射状の繰り返しグラデーションを実装する方法を簡単な例とともに紹介していきます。

コード例は次のとおりです。

<!DOCTYPE>
<html>
<meta charset="utf-8">
<head>
    <title>CSS3创建重复径向渐变效果示例</title>
    <style type="text/css">
        .container{
            text-align:center;
            padding:20px 0;
            width:960px;
            margin: 0 auto;
        }
        .container div{
            width:200px;
            height:150px;
            display:inline-block;
            margin:2px;
            color:#ec8007;
            vertical-align: top;
            line-height: 230px;
            font-size: 20px;
        }
         .repeating-radial{
            background:repeating-radial-gradient(#4b6c9c, #5ac4ed 5px, #fff 5px, #fff 10px);
        }

    </style>
</head>
<body>
<div class="container">
       <div class="repeating-radial">重复径向渐变</div>
</div>
</body>
</html>

ログイン後にコピー

繰り返し放射状グラデーション効果は次のとおりです。

CSS3 で放射状のグラデーション効果を繰り返す方法を実現する方法