CSS3渐变阴影遮罩

心存美好 2023-03-28 原文

1. CSS3渐变

渐变: 有规律的渐渐变化,在前端中通常指颜色的变化的实现方式. 通常使用在所有接受图像的属性上.(替代图片),意义是创建一张图片

gradient可以应用在所有接受图像的属性上

1.1 分类:

线性渐变(linear-gradient)变化的方向是一条直线

径向渐变(radial-gradient)变化的方向是从圆心向四周运动运动

1.2. 线性渐变 (linear-gradient)

用于创建一个表示两种或多种颜色线性渐变的图片。

1.2.1 参数值:

第一个参数: 渐变方向

从哪到哪发生渐变

关键词:
- to left 设置渐变为从右到左 . 相当于: 270deg
  to right 设置渐变从左到右。相当于: 90deg
  to top 设置渐变从下到上。相当于: 0deg
  to bottom 默认）：设置渐变从上到下。相当于: 180deg。这是默认值，等同于留空不写。
- 对角渐变:to top left / to top right / to bottom right / to bottom left
角度值: 单位:deg

(0deg = to top) 顺时针旋转

第二个参数: 颜色,位置 (百分比| 数值)

规定哪种颜色从开始发生渐变效果

比如:red 10%

第三个参数: 颜色,位置 (百分比| 数值)

规定哪种颜色从开始发生渐变效果

比如: blue 20%
后面反复继续
例子:

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

1.2.2 参数省略

第一个参数可以省略,默认从上往下,

后续每个参数描述某个关键点的位置的颜色,两个关键点之间渐变.

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

1.2.3 渐变平铺

repeating-linear-gradient：重复的(线性渐变)
.repeating-radial-gradient：重复的(径向渐变)

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%);(重复的线性渐变)    */
      /* 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)
        /* 线性渐变方向不写，默认从上往下渐变，关键字to top ,to left；0是从下往上，角度值30deg 。百分数表示渐变开始和结束的位置，也可以使用像素渐变，如果渐变距离超出元素，则超出部分不显示，默认切掉了 */
    }

    /* 0度是从下往上，30度是左下往右上，90度是向右，180度是从上向下（默认） */
  </style>
</head>

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

</html>

1.3. 径向渐变(radio-gradient)

用来展示由原点（渐变中心）辐射开的颜色渐变。

使用方式:

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

1.3.1 参数:

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

镜像渐变：圆/椭圆半径 at 圆心，颜色位置，颜色位置

shape 形状
- circle(圆)
- ellipse(椭圆,默认)
- 形状后面可以跟半径值

shape size: 半径

圆形的半径圆只有一个值，椭圆有两个值，px | 关键词

关键词:
- closest-side：圆心到最近的边
  closest-corner：圆心到最近的角【
  farthest-side：圆心到离圆心最远的边
  farthest-corner(默认)：圆心到离圆心最远的角

position 确定圆心的位置

X坐标，Y纵坐标；如果只提供一个，第二值默认为50%，即center

值:
- px %
- X关键词：left：左 center：中 right：右
- Y关键词：top：上 center：中 bottom：下

color-stop: 颜色位置

从中心到外部的颜色渐变范围

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

没有数值范围的时候颜色均分,从圆心开始到矩形最远的点均分颜色,然后绕圆心画圆染色,支持很多很多颜色

实例:

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

1.3.2 重复径向渐变

原点放射渐变的图像。它类似于并且采取相同的论据，但它重复无限地在各个方向上停止颜色以覆盖整个容器。

渐变平铺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); 默认渐变到最远的角 */
      /*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位置，圆心也可以用关键字left center。 半径是最近的边closest-side，半径也可以是具体数值 */
      /* background-image:repeating-radial-gradient(circle closest-side at 200px 100px,red 20px,blue 40px);重复的径向渐变 */
      /* 径向渐变做图片的遮罩 */
      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 遮罩平铺

属性值
- 默认repeat,
- no-repeat
- repeat-x
- repeat-y
- 行为类似于background-repeat
-webkit-mask-position 遮罩位置

属性值:关键词 | % | length

和background-position支持的属性值表现一模一样
-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: 用长度值来定义倒影与对象之间的间隔,可以为负值

length | percentage

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

<url>：使用绝对或相对地址指定遮罩图像。
. linear-gradient：使用线性渐变创建遮罩图像。
. radial-gradient：使用径向(放射性)渐变创建遮罩图像。
repeating-linear-gradient：使用重复的线性渐变创建背遮罩像。
. repeating-radial-gradient：使用重复的径向(放射性)渐变创建遮罩图像。
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

给盒子添加阴影表现效果，仿佛有光打到盒子上
和原盒子一样大小，包含border

4.1 属性值

h-shadow 水平偏移量。允许负值（必需）
v-shadow 垂直偏移量。允许负值（必需）
blur 模糊半径（可选。）
spread 阴影的大小（可选。）
color 阴影的颜色（可选。）
outset 外部阴影（默认）内部阴影（inset可选）

4.2 属性值介绍

水平,垂直偏移量长度单位
模糊半径
指阴影由完全的颜色到消失的长度，类于似渐变的长度。默认是0
阴影大小

默认是0，和原来一样大，单位px，正数表示放大，负数表示缩小
颜色

阴影颜色
inset/ outset，

默认outset外阴影，可以写inset改成内阴影，不遮挡文字遮挡盒子，遮挡背景,可用逗号分隔，类似背景渐变，可叠加

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;  内阴影，默认外阴影 */
      box-shadow: 5px 6px 20px 2px black;
    }
  </style>
</head>

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

5. 文字阴影 text-shadow

定义文字的阴影

5.1 属性值

h-shadow 水平偏移量。允许负值（必需）
v-shadow 垂直偏移量。允许负值（必需）
blur 模糊半径（可选。）
color 阴影的颜色（可选。）

类似于box-shadow;不支持缩放和内外阴影，可叠加逗号分隔

阴影叠加: 先渲染前面的，再渲染后面的

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;/*两个阴影*/

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;

有关CSS3渐变阴影遮罩的更多相关文章

ruby - capybara field.has_css?匹配器 - 2
我在MiniTest::Spec和Capybara中使用以下规范:find_field('Email').must_have_css('[autofocus]')检查名为“电子邮件”的字段是否具有autofocus属性。doc说如下:has_css?(path,options={})ChecksifagivenCSSselectorisonthepageorcurrentnode.据我了解，字段“Email”是一个节点，因此调用must_have_css绝对有效!我做错了什么？最佳答案通过JonasNicklas得到了答案:No
css - 用 watir 检查标签类？ - 2
我有一个div，它根据表单是否正确提交而改变。我想知道是否可以检查类的特定元素？开始元素看起来像这样。如果输入不正确，添加错误类。最佳答案试试这个:browser.div(:id=>"myerrortest").class_name更多信息:http://watir.github.com/watir-webdriver/doc/Watir/HTMLElement.html#class_name-instance_method另一种选择是只查看具有您期望的类的div是否存在browser.div((:id=>"myerrortes
ruby-on-rails - Assets 管道损坏 : Not compiling on the fly css and js files - 2
我开始了一个新的Rails3.2.5项目，Assets管道不再工作了。CSS和Javascript文件不再编译。这是尝试生成Assets时日志的输出:StartedGET"/assets/application.css?body=1"for127.0.0.1at2012-06-1623:59:11-0700Servedasset/application.css-200OK(0ms)[2012-06-1623:59:11]ERRORNoMethodError:undefinedmethod`each'fornil:NilClass/Users/greg/.rbenv/versions/1
ruby-on-rails - Rails - 理解 application.js 和 application.css - 2
rails新手。只是想了解\assests目录中的这两个文件。例如，application.js文件有如下行://=requirejquery//=requirejquery_ujs//=require_tree.我理解require_tree。只是将所有JS文件添加到当前目录中。根据上下文，我可以看出requirejquery添加了jQuery库。但是它从哪里得到这些jQuery库呢？我没有在我的Assets文件夹中看到任何jquery.js文件——或者直接在我的整个应用程序中没有看到任何jquery.js文件？同样，我正在按照一些说明安装TwitterBootstrap(http:
css - Rails 4.1 和 Bootstrap 3 字形图标不工作 - 2
我正在尝试消除使用Bootstrap3的Rails4元素中的glyphicon错误。我没有使用任何Bootstrapgem将其添加到Assets管道中。我手动将bootstrap.css和bootstrap.js添加到各自的app/assets目录下，分别添加到application.css和application.js什么的我现在在网络浏览器的控制台中看到以下内容:GEThttp://localhost:3000/fonts/glyphicons-halflings-regular.woff404(NotFound)localhost/:1GEThttp://localhost:30
css - rails 萨斯 : variables are not passed with @import - 2
我有一个使用twitterbootstrap和sass的Rails元素。scss文件结构化到文件夹中，所以我有更好的概述。现在我想为包含我的颜色等的全局变量定义一个文件，并将这些值传递给其他文件，这样我就有更少的冗余代码。虽然所有代码都已正确导入和应用，变量不起作用。这是当前的设置:样式表/application.css.scss/**=require_self*=require_tree*//*stylesheets/||–base/||–_reset.scss#Reset/normalize||–_typography.scss#Typographyrules||–componen
css - Jekyll 和自定义 CSS - 2
有没有一种方法可以在jekyll站点中包含自定义css标签，同时将markdown用于入口文件？例如，当我想突出显示某个段落时？最佳答案 Markdown和YAMLFrontMatter都内置了这个。但你可以自己制作。比如说，您有foo.css想要包含在某些帖子中。在_posts/2013-02-03-higligting-foo.markdown中:---css:footitle:"DrupalImagecachesecurityvulnarabilitywithDDOSattackexplained"tags:[drupal,
css - 检测到 Sass 更改但 style.css 仅在我保存时每 5 到 7 次被覆盖 - 2
我在一台Windows764位机器上使用Sass和Ruby(最新版本)，我正在我的家庭服务器上处理一个共享文件夹。(但是，我不得不承认问题本身也出现在服务器上，因为我试图安装Ruby并直接-watch服务器上的文件)。问题如下:如果我第一次保存，检测到变化，我的style.css被直接覆盖。之后，我总是需要保存多达7次才能覆盖style.css。每次都会检测到更改，但不会编译任何内容。这是一个屏幕:>>>Sassiswatchingforchanges.PressCtrl-Ctostop.overwritestyle.css>>>Changedetectedto:E:/Websites
ruby - 用于 CSS3 跨浏览器兼容性的 SASS 插件？ - 2
是否有一个SASS扩展可以采用SASS样式表，找到中性属性(例如border-radius)并为其输出所有特定于供应商的属性(例如-webkit-border-radius等)自动？我真的不想手动创建所有混入，也不想手动编写代码。我确定一定有这样的扩展名，但我找不到它。帮忙？最佳答案有一个非常好的gem可以满足您的需求。它叫做Bourbon它不会用特定于供应商的css替换您的css，因为它可以像SASS一样工作。它基本上是一个正确生成跨浏览器css的mixin集合。关于ruby-用
ruby-on-rails - 是否有一个库可以自动进行 CSS spriting？ - 2
CSSSpriting确实可以提高性能，但它并不是最容易阅读和维护的东西。是否有任何工具可以让我单独对图像进行编码，然后将它们聚合起来并用正确的蒙太奇子集替换HTML？我特别考虑RubyonRails插件，但如果有其他语言的包，我很乐意移植它。最佳答案 SmartSprites试一试。关于ruby-on-rails-是否有一个库可以自动进行CSSspriting？，我们在StackOverflow上找到一个类似的问题： https://stackoverf

CSS3渐变阴影遮罩

1. CSS3渐变

1.1 分类:

1.2. 线性渐变 (linear-gradient)

1.2.1 参数值:

1.2.2 参数省略

1.2.3 渐变平铺

1.2.4 带图片和透明度的渐变

1.3. 径向渐变(radio-gradient)

使用方式:

1.3.1 参数:

shape 形状

shape size: 半径

position 确定圆心的位置

color-stop: `颜色位置`

1.3.2 重复径向渐变

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: 用长度值来定义倒影与对象之间的间隔,可以为负值

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

4. 盒子阴影 box-shadow

4.1 属性值

4.2 属性值介绍

4.3 写法

5. 文字阴影 text-shadow

5.1 属性值

5.2 文本阴影案例:

1. 层叠

2. 光晕

3. 火焰文字

有关CSS3渐变阴影遮罩的更多相关文章

随机推荐

CSS3渐变 阴影 遮罩

1. CSS3渐变

1.1 分类:

1.2. 线性渐变 (linear-gradient)

1.2.1 参数值:

1.2.2 参数省略

1.2.3 渐变平铺

1.2.4 带图片和透明度的渐变

1.3. 径向渐变(radio-gradient)

使用方式:

1.3.1 参数:

shape 形状

shape size: 半径

position 确定圆心的位置

color-stop: 颜色 位置

1.3.2 重复径向渐变

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: 用长度值来定义倒影与对象之间的间隔,可以为负值

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

4. 盒子阴影 box-shadow

4.1 属性值

4.2 属性值介绍

4.3 写法

5. 文字阴影 text-shadow

5.1 属性值

5.2 文本阴影案例:

1. 层叠

2. 光晕

3. 火焰文字

有关CSS3渐变 阴影 遮罩的更多相关文章

随机推荐

CSS3渐变阴影遮罩

color-stop: `颜色位置`

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

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

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

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

有关CSS3渐变阴影遮罩的更多相关文章