av日日欢,啪啪啪呜吗一区二区

1. CSS3漸變

漸變: 有規(guī)律的漸漸變化,在前端中通常指顏色的變化的實(shí)現(xiàn)方式. 通常使用在所有接受圖像的屬性上.(替代圖片),意義是創(chuàng)建一張圖片

gradient可以應(yīng)用在所有接受圖像的屬性上

1.1 分類:

線性漸變(linear-gradient)變化的方向是一條直線

徑向漸變(radial-gradient)變化的方向是從圓心向四周運(yùn)動(dòng)運(yùn)動(dòng)

1.2. 線性漸變 (linear-gradient)

用于創(chuàng)建一個(gè)表示兩種或多種顏色線性漸變的圖片。

1.2.1 參數(shù)值:

第一個(gè)參數(shù): 漸變方向

從哪到哪發(fā)生漸變

關(guān)鍵詞:
- to left 設(shè)置漸變?yōu)閺挠业阶?. 相當(dāng)于: 270deg
  to right 設(shè)置漸變從左到右。相當(dāng)于: 90deg
  to top 設(shè)置漸變從下到上。相當(dāng)于: 0deg
  to bottom 默認(rèn)）：設(shè)置漸變從上到下。相當(dāng)于: 180deg。這是默認(rèn)值，等同于留空不寫。
- 對角漸變:to top left / to top right / to bottom right / to bottom left
角度值: 單位:deg

(0deg = to top) 順時(shí)針旋轉(zhuǎn)

第二個(gè)參數(shù): 顏色,位置 (百分比| 數(shù)值)

規(guī)定哪種顏色從開始發(fā)生漸變效果

比如:red 10%

第三個(gè)參數(shù): 顏色,位置 (百分比| 數(shù)值)

規(guī)定哪種顏色從開始發(fā)生漸變效果

比如: blue 20%
后面反復(fù)繼續(xù)
例子:

linear-gradient（30deg, red 10%, green 10%）

1.2.2 參數(shù)省略

第一個(gè)參數(shù)可以省略,默認(rèn)從上往下,

后續(xù)每個(gè)參數(shù)描述某個(gè)關(guān)鍵點(diǎn)的位置的顏色,兩個(gè)關(guān)鍵點(diǎn)之間漸變.

background-image: linear-gradient(#6fc 0%,red 100%);

1.2.3 漸變平鋪

repeating-linear-gradient：重復(fù)的(線性漸變)
.repeating-radial-gradient：重復(fù)的(徑向漸變)

1.2.4 帶圖片和透明度的漸變

background: linear-gradient(to right, rgba(255,255,255,0),  rgba(255,255,255,1)),url(abc.jpg);

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link rel="stylesheet" href="./index.css">
  <title>Document</title>
  <style>
    #box {
      width: 500px;
      height: 500px;
      border: 2px solid #000;
      margin: 10px auto;
      /* background-image:linear-gradient(30deg,red 20%,blue 80%); */
      /* background-image:repeating-linear-gradient( 180deg,red 0%,red 10%,blue 10%,blue 20%,yellow 20%,yellow 30%);(重復(fù)的線性漸變)    */
      /* background-image:repeating-linear-gradient( 180deg,red 0%,red 15%,blue 30%); */
      /* 漸變遮罩，圖片上蓋一層半透明的顏色 */
      background-image: linear-gradient(135deg, rgba(255, 0, 0, .5) 0, rgba(0, 0, 255, .6) 200px, rgba(0, 0, 0, 0) 300px), url(./images/222.jpg)
        /* 線性漸變方向不寫，默認(rèn)從上往下漸變，關(guān)鍵字to top ,to left；0是從下往上，角度值30deg 。百分?jǐn)?shù)表示漸變開始和結(jié)束的位置，也可以使用像素漸變，如果漸變距離超出元素，則超出部分不顯示，默認(rèn)切掉了 */
    }

    /* 0度是從下往上，30度是左下往右上，90度是向右，180度是從上向下（默認(rèn)） */
  </style>
</head>

<body>
  <div id="box"></div>
</body>

</html>

1.3. 徑向漸變(radio-gradient)

用來展示由原點(diǎn)（漸變中心）輻射開的顏色漸變。

使用方式:

radial-gradient( shape [size ]?[at <position>,]?<color-stop>[,<color-stop>]+)

1.3.1 參數(shù):

radial-gradient( shape [size ] at[position ],color 位置,color 位置，+)

鏡像漸變：圓/橢圓半徑 at 圓心，顏色位置，顏色位置

shape 形狀
- circle(圓)
- ellipse(橢圓,默認(rèn))
- 形狀后面可以跟半徑值

shape size: 半徑

圓形的半徑圓只有一個(gè)值，橢圓有兩個(gè)值，px | 關(guān)鍵詞

關(guān)鍵詞:
- closest-side：圓心到最近的邊
  closest-corner：圓心到最近的角【
  farthest-side：圓心到離圓心最遠(yuǎn)的邊
  farthest-corner(默認(rèn))：圓心到離圓心最遠(yuǎn)的角

position 確定圓心的位置

X坐標(biāo)，Y縱坐標(biāo)；如果只提供一個(gè)，第二值默認(rèn)為50%，即center

值:
- px %
- X關(guān)鍵詞：left：左 center：中 right：右
- Y關(guān)鍵詞：top：上 center：中 bottom：下

color-stop: 顏色位置

從中心到外部的顏色漸變范圍

background-image: radial-grandient(circle,red,blue);

沒有數(shù)值范圍的時(shí)候顏色均分,從圓心開始到矩形最遠(yuǎn)的點(diǎn)均分顏色,然后繞圓心畫圓染色,支持很多很多顏色

實(shí)例:

radial-gradient(ellipse 100% 100% at 300px  300px, #f00 10%, #ff0 20%, #080 100%)

1.3.2 重復(fù)徑向漸變

原點(diǎn)放射漸變的圖像。它類似于并且采取相同的論據(jù)，但它重復(fù)無限地在各個(gè)方向上停止顏色以覆蓋整個(gè)容器。

漸變平鋪repeating-漸變屬性

background: repeating-radial-gradient(red 0px ,red 20px,blue 20px,blue 40px);

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link rel="stylesheet" href="./index.css">
  <title>Document</title>
  <style>
    #box {
      width: 500px;
      height: 300px;
      border: 2px solid #000;
      margin: 10px auto;
      /*  background-image:radial-gradient( red ,blue); 默認(rèn)漸變到最遠(yuǎn)的角 */
      /*background-image:radial-gradient( red 50%,blue);/*  從50%的位置開始漸變 */
      /*background-image:radial-gradient(circle,red,blue);正圓漸變*/
      /* background-image:radial-gradient(circle closest-side at 200px 100px,red,blue);圓心水平200px 垂直100px位置，圓心也可以用關(guān)鍵字left center。 半徑是最近的邊closest-side，半徑也可以是具體數(shù)值 */
      /* background-image:repeating-radial-gradient(circle closest-side at 200px 100px,red 20px,blue 40px);重復(fù)的徑向漸變 */
      /* 徑向漸變做圖片的遮罩 */
      background-image: repeating-radial-gradient(circle closest-side at 200px 100px, rgba(255, 0, 0, .5) 20px, rgba(0, 0, 255, .5) 40px), url(./images/333.jpg);
    }
  </style>
</head>

<body>
  <div id="box"></div>
</body>

</html>

2. 遮罩 mask

了解一下

2..1 屬性值:

-webkit-mask-image：; 遮罩圖片
- url(‘’)
- linear-gradient
- radial-gradient
任何類型圖片都是可以的,只是說不透明的圖片我們看不到后面的背景
-webkit-mask-repeat 遮罩平鋪

屬性值
- 默認(rèn)repeat,
- no-repeat
- repeat-x
- repeat-y
- 行為類似于background-repeat
-webkit-mask-position 遮罩位置

屬性值:關(guān)鍵詞 | % | length

和background-position支持的屬性值表現(xiàn)一模一樣
-webkit-mask-size 遮罩尺寸

值:% | length

遮罩圖片的大小

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link rel="stylesheet" href="./index.css">
  <title>Document</title>
  <style>
    #box {
      width: 500px;
      height: 500px;
      border: 2px solid black;
      margin: 10px auto;
      background: url(./images/333.jpg) no-repeat 0 0/cover;
      /* 遮罩,需要加兼容前綴 。圖片不透明的地方能看到底圖，透明的地方不能看到底圖*/
      /* 遮罩可以寫多張圖片，可以是漸變 */
      -webkit-mask-image: url(./images/apple.png), linear-gradient(to right, rgba(255, 0, 0, 0), rgba(0, 0, 255, 1));
      -webkit-mask-repeat: no-repeat;
      /* 多張圖片分別寫位置 */
      -webkit-mask-position: 0;
      -webkit-mask-size: 50%;
    }
  </style>
</head>

<body>
  <div id="box"></div>
</body>

</html>

3、box-reflect() 倒影

box-reflect：none | direction offset mask-box-image

3.1. direction 倒影在對象的位置

above 上
below 下
left 左
right 右

3.2. offset: 用長度值來定義倒影與對象之間的間隔,可以為負(fù)值

length | percentage

3.3. mask-box-image: 遮罩圖像

<url>：使用絕對或相對地址指定遮罩圖像。
. linear-gradient：使用線性漸變創(chuàng)建遮罩圖像。
. radial-gradient：使用徑向(放射性)漸變創(chuàng)建遮罩圖像。
repeating-linear-gradient：使用重復(fù)的線性漸變創(chuàng)建背遮罩像。
. repeating-radial-gradient：使用重復(fù)的徑向(放射性)漸變創(chuàng)建遮罩圖像。
none：無遮罩圖像

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link rel="stylesheet" href="./index.css">
  <title>Document</title>
  <style>
    #box {
      width: 300px;
      height: 300px;
      border: 2px solid black;
      margin: 320px auto;
      background: url(./images/333.jpg) no-repeat 0 0/cover;
      /* 倒影-webkit-box-reflec方向:上above 右right 下below 左left。倒影間隔 20px。倒影遮罩圖片*/
      -webkit-box-reflect: above 20px url(./images/apple.png);
      /* 倒影也可以使用圖片遮罩、漸變遮罩 */
      -webkit-box-reflect: below 20px linear-gradient(to top, rgba(0, 0, 0, 1), rgba(81, 14, 14, 0));
    }
  </style>
</head>

<body>
  <div id="box"></div>
</body>

</html>

4. 盒子陰影 box-shadow

給盒子添加陰影表現(xiàn)效果，仿佛有光打到盒子上
和原盒子一樣大小，包含border

4.1 屬性值

h-shadow 水平偏移量。允許負(fù)值（必需）
v-shadow 垂直偏移量。允許負(fù)值（必需）
blur 模糊半徑（可選。）
spread 陰影的大小（可選。）
color 陰影的顏色（可選。）
outset 外部陰影（默認(rèn)）內(nèi)部陰影（inset可選）

4.2 屬性值介紹

水平,垂直偏移量長度單位
模糊半徑
指陰影由完全的顏色到消失的長度，類于似漸變的長度。默認(rèn)是0
陰影大小

默認(rèn)是0，和原來一樣大，單位px，正數(shù)表示放大，負(fù)數(shù)表示縮小
顏色

陰影顏色
inset/ outset，

默認(rèn)outset外陰影，可以寫inset改成內(nèi)陰影，不遮擋文字遮擋盒子，遮擋背景,可用逗號分隔，類似背景漸變，可疊加

4.3 寫法

box-shadow: h-shadow v-shadow blur spread color outset

box-shadow:10px 10px 5px 10px #000 outset

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link rel="stylesheet" href="./index.css">
  <title>Document</title>
  <style>
    #box {
      width: 300px;
      height: 100px;
      border: 1px solid black;
      background-color: pink;
      /* box-shadow: 0 0px 10px 0px black inset;  內(nèi)陰影，默認(rèn)外陰影 */
      box-shadow: 5px 6px 20px 2px black;
    }
  </style>
</head>

<body>
  <div id="box"></div>
</body>

5. 文字陰影 text-shadow

定義文字的陰影

5.1 屬性值

h-shadow 水平偏移量。允許負(fù)值（必需）
v-shadow 垂直偏移量。允許負(fù)值（必需）
blur 模糊半徑（可選。）
color 陰影的顏色（可選。）

類似于box-shadow;不支持縮放和內(nèi)外陰影，可疊加逗號分隔

陰影疊加: 先渲染前面的，再渲染后面的

text-shadow:2px 2px 0px red, 2px 2px 4px green; 先渲染后面的，再渲染前面的

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link rel="stylesheet" href="./index.css">
  <title>Document</title>
  <style>
    #box {
      width: 600px;
      height: 100px;
      font-size:50px;
      text-shadow: 2px 2px 5px pink;
      margin:20px;
    }
  </style>
</head>

<body>
  <div id="box">HELLO WORLD</div>
</body>

</html>

5.2 文本陰影案例:

1. 層疊

color:red; 
font-size:100px; 
font-weight:bold; 
text-shadow:2px 2px 0px white, 4px 4px 0px red;/*兩個(gè)陰影*/

2. 光暈

color:white; 
font-size:100px; 
text-shadow:0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;

3. 火焰文字

text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e; 
font-family:Verdana, Geneva, sans-serif; 
font-size:100px; 
font-weight:bold; 
color:white;

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

CSS3漸變陰影遮罩

CSS3漸變陰影遮罩

1. CSS3漸變

1.1 分類:

1.2. 線性漸變 (linear-gradient)

1.2.1 參數(shù)值:

1.2.2 參數(shù)省略

1.2.3 漸變平鋪

1.2.4 帶圖片和透明度的漸變

1.3. 徑向漸變(radio-gradient)

使用方式:

1.3.1 參數(shù):

shape 形狀

shape size: 半徑

position 確定圓心的位置

color-stop: `顏色位置`

1.3.2 重復(fù)徑向漸變

2. 遮罩 mask

2..1 屬性值:

`-webkit-mask-image：;` 遮罩圖片

`-webkit-mask-repeat` 遮罩平鋪

`-webkit-mask-position` 遮罩位置

`-webkit-mask-size` 遮罩尺寸

3、box-reflect() 倒影

3.1. direction 倒影在對象的位置

3.2. offset: 用長度值來定義倒影與對象之間的間隔,可以為負(fù)值

3.3. mask-box-image: 遮罩圖像

4. 盒子陰影 box-shadow

4.1 屬性值

4.2 屬性值介紹

4.3 寫法

5. 文字陰影 text-shadow

5.1 屬性值

5.2 文本陰影案例:

1. 層疊

2. 光暈

3. 火焰文字

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

CSS3漸變 陰影 遮罩

1. CSS3漸變

1.1 分類:

1.2. 線性漸變 (linear-gradient)

1.2.1 參數(shù)值:

1.2.2 參數(shù)省略

1.2.3 漸變平鋪

1.2.4 帶圖片和透明度的漸變

1.3. 徑向漸變(radio-gradient)

使用方式:

1.3.1 參數(shù):

shape 形狀

shape size: 半徑

position 確定圓心的位置

color-stop: 顏色 位置

1.3.2 重復(fù)徑向漸變

2. 遮罩 mask

2..1 屬性值:

-webkit-mask-image：; 遮罩圖片

-webkit-mask-repeat 遮罩平鋪

-webkit-mask-position 遮罩位置

-webkit-mask-size 遮罩尺寸

3、box-reflect() 倒影

3.1. direction 倒影在對象的位置

3.2. offset: 用長度值來定義倒影與對象之間的間隔,可以為負(fù)值

3.3. mask-box-image: 遮罩圖像

4. 盒子陰影 box-shadow

4.1 屬性值

4.2 屬性值介紹

4.3 寫法

5. 文字陰影 text-shadow

5.1 屬性值

5.2 文本陰影案例:

1. 層疊

2. 光暈

3. 火焰文字

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

CSS3漸變陰影遮罩

color-stop: `顏色位置`

`-webkit-mask-image：;` 遮罩圖片

`-webkit-mask-repeat` 遮罩平鋪

`-webkit-mask-position` 遮罩位置

`-webkit-mask-size` 遮罩尺寸

3、box-reflect() 倒影