首頁 > web前端 > css教學 > 詳細介紹CSS漸層、陰影和濾鏡

詳細介紹CSS漸層、陰影和濾鏡

WBOY
發布: 2022-02-10 18:14:31
轉載
3953 人瀏覽過

本篇文章為大家帶來了關於css中漸變、陰影和濾鏡的相關知識,其中包括了線性漸變、徑向漸變、圓錐漸變等等相關問題,希望對大家有幫助。

詳細介紹CSS漸層、陰影和濾鏡

推薦學習:css影片教學

#一、初識CSS 漸層

CSS 漸進image類型的一種特殊類型以gradient表示,由兩種或多種顏色之間的漸進過渡組成。

三種漸變類型:

  • 線性:由linear-gradient()函數建立
  • 徑向:由radial -gradient()函數建立
  • 圓錐:由conic-gradient()函數建立

ps:也可以使用repeating- linear-gradient()repeating-radial-gradient()函數建立重複漸變。

漸層可以在任何使用image的地方使用,例如在背景中。

二、CSS 線性漸變

2.1 介紹線性漸變

  • 說明

    • 要建立線性漸變,只需指定兩種顏色即可,這些稱為色標,至少指定兩個色標,還可以設定起點和方向(或角度)以及漸變效果。
  • 語法

    • background-image: linear-gradient(direction(方向), color1(颜色值), color2(颜色值), ...);
      登入後複製

#2.2 線性漸層應用

    • # #2.2.1 線性漸變- 從上到下(預設)

程式碼範例詳細介紹CSS漸層、陰影和濾鏡

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


    <p></p>
登入後複製

  • 效果如下

    • 2.2.2 線性漸進式- 從左到右

程式碼範例詳細介紹CSS漸層、陰影和濾鏡

background-image: linear-gradient(to right, red, yellow);
登入後複製

  • 效果如下

    • 2.2. 3 線性漸變- 對角線

程式碼範例詳細介紹CSS漸層、陰影和濾鏡

#
background-image: linear-gradient(to bottom right, red, yellow);
登入後複製

    ##效果如下
    • 2.2.4 線性漸變- 設定角度
  • 如果你想要更精確地控制漸層的方向,你可以為漸層設定一個具體的角度。

      在使用角度的時候,
    • 0deg
    • 代表漸變方向為從下到上,
    • 90deg

      代表漸變方向為從左到右,諸如此類正角度都屬於順時針方向。而負角度意味著逆時針方向。

程式碼範例

詳細介紹CSS漸層、陰影和濾鏡

background-image: linear-gradient(180deg, red, yellow);
登入後複製

    效果如下
    • 2.2.5 線性漸層- 使用多個色標
程式碼範例

詳細介紹CSS漸層、陰影和濾鏡

background-image: linear-gradient(red, yellow, green);
登入後複製

    效果如下
    #2.2.6 線性漸層-重複線性漸層
  • #說明
    • repeating-linear-gradient()

      函數用來重複線性漸層。

程式碼範例

詳細介紹CSS漸層、陰影和濾鏡

background-image: repeating-linear-gradient(red, yellow 10px);
登入後複製

效果如下

    • 三、CSS 徑向漸層
    3.1 介紹徑向漸層
  • ##說明

    • #徑向漸變類似於線性漸變,不同的地方是徑向漸變從中心點向外輻射。
    可以指定該中心點的位置,也可以將它們設為圓形或橢圓形。

語法

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

    • 3.2 徑向漸層應用

詳細介紹CSS漸層、陰影和濾鏡

#3.2.1 徑向漸層-均勻間隔的色標(預設)
  • 程式碼範例
    <style>
        .box {
            width: 300px;
            height: 100px;
            background-image: radial-gradient(red, yellow, green);
        }</style>
    
    
        <p></p>
    
    登入後複製

詳細介紹CSS漸層、陰影和濾鏡

    • 效果如下
3.2.2 徑向漸層-不同間距的色標

詳細介紹CSS漸層、陰影和濾鏡

程式碼範例

  • 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 徑向漸層-設定漸層的中心###########說明## #######您可以使用關鍵字、百分比或絕對長度、長度和百分比值重複來定位漸變的中心(如果只有一個),否則按照從左到右的位置順序。 ###############程式碼範例#########
      background-image: radial-gradient(at 10% 30%, red 10%, yellow 20%, green 50%);
      登入後複製
      #########效果如下###

詳細介紹CSS漸層、陰影和濾鏡

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

  • 代码示例

    • background-image: repeating-radial-gradient(black, black 5px, #fff 5px, #fff 10px);
      登入後複製
    • 效果如下

    詳細介紹CSS漸層、陰影和濾鏡

四、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>
      
      登入後複製
    • 效果如下

詳細介紹CSS漸層、陰影和濾鏡

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

  • 代码示例

    • background-image: conic-gradient(at 30% 20%, red,yellow);
      登入後複製
    • 效果如下

詳細介紹CSS漸層、陰影和濾鏡

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

  • 代码示例

    • background-image: conic-gradient(red, orange, yellow, green, teal, blue, purple);
      登入後複製
    • 效果如下

      詳細介紹CSS漸層、陰影和濾鏡

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

  • 代码示例

    • background-image: repeating-conic-gradient(red 10%, yellow 20%);
      登入後複製
    • 效果如下

詳細介紹CSS漸層、陰影和濾鏡

五、CSS 渐变补充知识

5.1 创建实线

  • 说明

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

    • background: linear-gradient(to bottom left, red 50%, yellow 50%);
      登入後複製
    • 效果如下

詳細介紹CSS漸層、陰影和濾鏡

5.2 使用透明度

  • 说明

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

    • background-image: linear-gradient(to right, transparent, red);
      登入後複製
    • 效果如下

詳細介紹CSS漸層、陰影和濾鏡

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>
      
      登入後複製
    • 效果如下

詳細介紹CSS漸層、陰影和濾鏡

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

  • 代码示例

    • box-shadow: -5px 0 5px 0px #000, 0 -5px 5px 0px #000;
      登入後複製
    • 效果如下

詳細介紹CSS漸層、陰影和濾鏡

2.2.3 box-shadow属性-模拟边框

  • 代码示例

    • box-shadow: 0px 0px 0px 10px #000, 0px 0px 0px 20px red;
      登入後複製
    • 效果如下

      詳細介紹CSS漸層、陰影和濾鏡

2.2.4 box-shadow属性-内阴影

  • 代码示例

    • box-shadow: 0px 0px 30px 10px red inset;
      登入後複製
    • 效果如下

      詳細介紹CSS漸層、陰影和濾鏡

三、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>
      
      登入後複製
    • 效果如下

詳細介紹CSS漸層、陰影和濾鏡

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>
          
        登入後複製

詳細介紹CSS漸層、陰影和濾鏡

  • 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>
      
      登入後複製
    • 效果如下

詳細介紹CSS漸層、陰影和濾鏡

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

(学习视频分享:css视频教程web前端教程

以上是詳細介紹CSS漸層、陰影和濾鏡的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
css
來源:csdn.net
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板