CSS のグラデーション、シャドウ、フィルターの詳細

この記事では、線形グラデーション、放射状グラデーション、円錐形グラデーション、その他の関連問題など、css のグラデーション、シャドウ、フィルターに関する関連知識を提供します。

# 推奨学習:

css ビデオ チュートリアル

#1. CSS グラデーションの最初の紹介

CSS Gradient は、gradient で表される特殊なタイプの image で、2 つ以上の色間の段階的な遷移で構成されます。

3 つのグラデーション タイプ:

Linear:
• linear-gradient() 関数によって作成されます
Radial:
• radial によって作成されます-gradient() 関数は
を作成します。 円錐:
• conic-gradient() 関数によって作成されます。

ps:

repeat を使用することもできます。 - Linear-gradient() 関数と repeat-radial-gradient() 関数は、繰り返しグラデーションを作成します。

グラデーションは、背景など、

image が使用される場所であればどこでも使用できます。

2. CSS 線形グラデーション

2.1 線形グラデーションの概要

• 手順
  線形グラデーションを作成するには、 just 2 つの色を指定するだけです。これをカラー ストップといいます。少なくとも 2 つのカラー ストップを指定します。開始点と方向 (または角度)、グラデーション効果も設定できます。
#構文

• #

  background-image: linear-gradient(direction(方向), color1(颜色值), color2(颜色值), ...);
#2.2 線形グラデーションの適用

2.2.1 線形グラデーション - 上から下 (デフォルト)

コード例

• <style>
      .box {
          width: 300px;
          height: 100px;
          background-image: linear-gradient(red, yellow);
      }</style>
  
  
      <p></p>
  

  • 効果は次のとおりです。次のように

##2.2.2 線形グラデーション - 左から右へ

コード例

• background-image: linear-gradient(to right, red, yellow);

  • 効果は次のとおりです

##2.2. 3 線形グラデーション - 対角

コード例

• background-image: linear-gradient(to bottom right, red, yellow);

  効果は次のとおりです

2.2.4 線形グラデーション - 角度の設定

##説明

If グラデーションの方向をより正確に制御したい場合は、グラデーションの特定の角度を設定できます。

• 角度を使用する場合、

  0deg
  はグラデーション方向が下から上であることを意味し、
  • 90deg
  はグラデーション方向が左から右であることを意味し、このような正の角度は法線です。時計回りの方向。また、負の角度は反時計回りを意味します。
  • コード例

background-image: linear-gradient(180deg, red, yellow);

効果は次のとおりです

2.2.5 線形グラデーション - 複数のカラーストップの使用

コード例

background-image: linear-gradient(red, yellow, green);

#効果は次のとおりです

##2.2.6 線形グラデーション - 線形の繰り返しgradient

説明

repeat-linear-gradient()

この関数は、線形グラデーションを繰り返すために使用されます。

• • コード例

  background-image: repeating-linear-gradient(red, yellow 10px);

効果は次のとおりです

3. CSS 放射状グラデーション

3.1 放射状グラデーションの概要

説明

放射状グラデーションは、中心点から外側に放射状に広がる点を除けば、線形グラデーションと似ています。

中心点の位置を指定でき、円形または楕円形に設定することもできます。

• #構文
  • #

    background-image: radial-gradient(shape(设置形状，默认为椭圆形), size(最远角), position(中心), color1(颜色值), color2(颜色值));

• #3.2 放射状グラデーションの適用
  3.2.1 放射状グラデーション - 等間隔のカラー スケール (デフォルト)
  コード例

<style>
    .box {
        width: 300px;
        height: 100px;
        background-image: radial-gradient(red, yellow, green);
    }</style>


    <p></p>

効果は次のとおりです。次のとおりです。

• • 3.2.2 異なる間隔の放射状グラデーション カラー スケール

コード例

background-image: radial-gradient(red 10%, yellow 20%, green 50%);

効果は次のとおりです

• • ##3.2.3 放射状グラデーションセット形状

  コード例

/* 设置为圆形形状 */background-image: radial-gradient(circle, red 10%, yellow 20%, green 50%);

効果は次のとおりです。

• • ##3.2.4 放射状グラデーション - グラデーションの中心を設定します
  手順

キーワード、パーセンテージ、または絶対的な長さ、長さ、およびパーセンテージ値の繰り返し (1 つしかない場合) を使用して、グラデーションの中心を配置できます。それ以外の場合は、左から右の位置の順序で配置します。

コード例

• background-image: radial-gradient(at 10% 30%, red 10%, yellow 20%, green 50%);

  • 効果は次のとおりです

3.2.5 径向渐变-重复径向渐变

• 代码示例

  • background-image: repeating-radial-gradient(black, black 5px, #fff 5px, #fff 10px);

  • 效果如下

  

四、CSS 圆锥渐变

4.1 介绍圆锥渐变

• 说明

  • 圆锥渐变类似于径向渐变，两者均为圆形，并使用元素的中心作为色标的源点。
  • 它是围绕中心点按照扇形方向进行旋转的渐变。

• 语法

  • background-image: conic-gradient(from angle(表示起始的角度,默认为从上到下) at position(设置圆锥中心点的位置), start-color(定义开始颜色), stop-color(定义结束颜色))

4.2 圆锥渐变的应用

4.2.1 圆锥渐变-顺时针方向旋转（默认方式）

• 代码示例

  • <style>
        .box {
            width: 300px;
            height: 300px;
            background-image: conic-gradient(red,yellow);
        }</style>
    
    
        <p></p>
    

  • 效果如下

4.2.2 圆锥渐变-设置渐变的中心点

• 代码示例

  • background-image: conic-gradient(at 30% 20%, red,yellow);

  • 效果如下

4.2.3 圆锥渐变-使用多个色标

• 代码示例

  • background-image: conic-gradient(red, orange, yellow, green, teal, blue, purple);

  • 效果如下

    

4.2.4 圆锥渐变-重复圆锥渐变

• 代码示例

  • background-image: repeating-conic-gradient(red 10%, yellow 20%);

  • 效果如下

五、CSS 渐变补充知识

5.1 创建实线

• 说明

  • 要在不同颜色之间创建一条单一的硬线，即不同颜色的颜色不是不同的，可以将不同的位置颜色设置为相同

• 代码示例

  • background: linear-gradient(to bottom left, red 50%, yellow 50%);

  • 效果如下

5.2 使用透明度

• 说明

  • 如需添加透明度，我们使用 rgba() 函数来定义色标。 rgba() 函数中的最后一个参数可以是 0 到 1 的值，它定义颜色的透明度：0 表示全透明，1 表示全彩色（无透明）。
  • 也可以使用 transparent参数，代表全透明。

• 代码示例

  • background-image: linear-gradient(to right, transparent, red);

  • 效果如下

CSS 阴影

一、初识 CSS 阴影

CSS阴影主要的作用是可以让页面中的文字和元素具有立体的效果，从而被突出出来。

两种阴影属性：

• box-shadow：用于给元素添加阴影
• text-shadow：用于给文本添加阴影

ps：还有一个 filter 滤镜的函数drop-shadow()也可以添加阴影，它主要用于给透明图像的非透明部分添加阴影效果。

二、box-shadow属性

2.1 介绍box-shadow属性

• 说明

  • 用于在元素的框架上添加阴影效果，还可以在同一个元素上设置多个阴影效果，用逗号隔开。

• 语法

  • box-shadow: OffsetX(水平偏移), OffsetY(垂直偏移), Blur(模糊半径), Spread(扩展距离，阴影的尺寸), Color(阴影颜色), Position(阴影位置，默认在外部(outset));

2.2 box-shadow属性的应用

2.2.1 box-shadow属性-基本使用

• 代码示例

  • <style>
        .box {
            width: 300px;
            height: 300px;
            background-color: yellow;
            box-shadow: 10px 10px;
        }</style>
    
    
        <p></p>
    

  • 效果如下

2.2.2 box-shadow属性-多重阴影与定向阴影

• 代码示例

  • box-shadow: -5px 0 5px 0px #000, 0 -5px 5px 0px #000;

  • 效果如下

2.2.3 box-shadow属性-模拟边框

• 代码示例

  • box-shadow: 0px 0px 0px 10px #000, 0px 0px 0px 20px red;

  • 效果如下

    

2.2.4 box-shadow属性-内阴影

• 代码示例

  • box-shadow: 0px 0px 30px 10px red inset;

  • 效果如下

    

三、text-shadow属性

3.1 介绍text-shadow属性

• 说明

  • 为文字添加阴影，也可以添加多个阴影，用逗号隔开。

• 语法

  • text-shadow: OffsetX(水平偏移), OffsetY(垂直偏移), Blur(模糊半径),  Color(阴影颜色));

• 注意

  • text-shadow没有扩展距离属性值，阴影位置属性值。

3.2 text-shadow属性的应用

3.2.1 text-shadow属性-基本使用

• 代码示例

  • <style>
        .box {
            width: 300px;
            height: 300px;
            background-color: yellow;
            text-shadow: 0px 0px 5px red;
        }</style>
    
    
        <p>hello world</p>
    

  • 效果如下

text-shadow属性基本与box-shadow属性一样，就不多举例了

CSS 滤镜

一、初识 CSS 滤镜

滤镜这两个字我相信大家都很熟悉，平时爱自拍，拍照的同学肯定都会打开滤镜修饰一下图片吧，那么CSS滤镜也是这样，直接用filter属性来修饰图像。

二、CSS 滤镜方法

• blur()：模糊

  • 可以任何长度单位，值为 0 显示原图，值越大越模糊

• brightness()：亮度

  • 百分比，可用 0~1 代替，值为 0 显示全黑，值为 100% 显示原图

• contrast()：对比度

  • 百分比，可用 0~1 代替，值为 0 显示全黑，值为 100% 显示原图

• drop-shadow()：阴影

  • 说明

    • 与box-shadow属性类似
    • 没有内阴影效果
    • 不能阴影叠加

  • 代码示例

    •   /* 代码示例 */
        <style>
            .box1 {
                width: 300px;
                height: 300px;
                border: 3px solid red;
                box-shadow: 5px 5px 10px 0 black;
            }
        
            .box2 {
                width: 300px;
                height: 300px;
                border: 3px solid red;
                filter: drop-shadow(5px 5px 10px black);
            }
        </style>
        
        
            <p></p>
            <p></p>
        

• grayscale()：灰度

  • 百分比，可用 0~1 代替，值为 0 显示原图，值为 100% 显示全灰

• hue-rotate()：色相旋转

  • 角度，值为 0 显示原图，值为 0~360deg 减弱原图色彩，

• invert()：反相

  • 百分比，可用 0~1 代替，值为 0 显示原图，值为 100% 完全反转原图色彩

• opacity()：透明度

  • 百分比，可用 0~1 代替，值为 0 显示透明，值为 100% 显示原图

• saturate()：饱和度

  • 百分比，可用 0~1 代替，值为 0 完全不饱和原图，值为 100% 显示原图

• sepia()：褐色

  • 百分比，可用 0~1 代替，值为 0 显示原图，值为 100% 显示褐色

三、CSS 滤镜的应用

3.1 CSS滤镜-将图片设置为灰色

• 代码示例

  • <style>
        .box {
            filter: grayscale(1);
        }</style>
    
    
        <p>
            <img  alt="CSS のグラデーション、シャドウ、フィルターの詳細" >
        </p>
    

  • 效果如下

具体的滤镜调制方法可以参照CSSgram的官网进行学习

（学习视频分享：css视频教程、web前端教程）

以上がCSS のグラデーション、シャドウ、フィルターの詳細の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。