From 5414be9d2da2e36544c8e2283a4b1eec8771842d Mon Sep 17 00:00:00 2001 From: qianguyihao Date: Sun, 6 Oct 2019 14:39:23 +0800 Subject: [PATCH] =?UTF-8?q?add:=20clip-path=20=E5=B1=9E=E6=80=A7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 02-CSS基础/02-CSS属性：背景属性.md | 529 +++++++++++++++++++++++++++- 02-CSS基础/12-CSS3属性详解（一）.md | 439 +---------------------- 03-CSS进阶/02-CSS中的非布局样式.md | 14 + 3 files changed, 541 insertions(+), 441 deletions(-) diff --git a/02-CSS基础/02-CSS属性：背景属性.md b/02-CSS基础/02-CSS属性：背景属性.md index e160031..c0e759f 100644 --- a/02-CSS基础/02-CSS属性：背景属性.md +++ b/02-CSS基础/02-CSS属性：背景属性.md @@ -6,7 +6,8 @@ ## background 的常见背景属性 -CSS样式中，常见的背景属性有以下几种：（经常用到，要记住） + +**css2.1** 中，常见的背景属性有以下几种：（经常用到，要记住） - `background-color:#ff99ff;` 设置元素的背景颜色。 @@ -24,6 +25,16 @@ CSS样式中，常见的背景属性有以下几种：（经常用到，要记 - 另外还有一个综合属性叫做`background`，它的作用是：将上面的多个属性写在一个声明中。 +**CSS3** 中，新增了一些background属性： + +- background-origin + +- background-clip 背景裁切 + +- background-size 调整尺寸 + +- 多重背景 + 上面这几个属性经常用到，需要记住。现在我们逐个进行讲解。 ## background-color：背景颜色的表示方法 @@ -222,7 +233,6 @@ PS：padding的区域也是有背景图的。 ![](http://img.smyhvae.com/2015-10-03-css-22.png) - ## `background-position`属性 `background-position`属性指的是**背景定位**属性。公式如下： @@ -352,7 +362,520 @@ background属性和border一样，是一个综合属性，可以将多个属性 ![](http://img.smyhvae.com/20170813_1515.png) -PS：以后的CSS3内容中，我们会接触到更多的background属性： background-origin、background-clip、background-size（在CSS2.1背景图片是不能调整尺寸，IE9开始兼容）、多背景。 +## `background-size`属性：背景尺寸 + +`background-size`属性：设置背景图片的尺寸。 + +格式举例： + +```javascript + /* 宽、高的具体数值 */ + background-size: 500px 500px; + + /* 宽高的百分比（相对于容器的大小） */ + background-size: 50% 50%; // 如果两个属性值相同，可以简写成：background-size: 50%; + + background-size: 100% auto; //这个属性可以自己试验一下。 + + /* cover：图片始终填充满容器，且保证长宽比不变。图片如果有超出部分，则超出部分会被隐藏。 */ + background-size: cover; + + /* contain：将图片完整地显示在容器中，且保证长宽比不变。可能会导致容器的部分区域为空白。 */ + background-size: contain; +``` + +这里我们对属性值 `cover` 和 `contain` 进行再次强调： + +- `cover`：图片始终**填充满**容器，且保证**长宽比不变**。图片如果有超出部分，则超出部分会被隐藏。 + +- `contain`：将图片**完整地**显示在容器中，且保证**长宽比不变**。可能会导致容器的部分区域留白。 + +代码举例：（这张图片本身的尺寸是 1080 * 1350） + +```html + + + + + + + Document + + + + +
+
+
+
+ +
+ + + +``` + +效果如下： + +![](http://img.smyhvae.com/20191006_1350.png) + +## 背景原点：`background-origin` 属性 + +`background-origin` 属性：控制背景从什么地方开始显示。 + +格式举例： + +```javascript + + /* 从 padding-box 内边距开始显示背景图 */ + background-origin: padding-box; //默认值 + + /* 从 border-box 边框开始显示背景图 */ + background-origin: border-box; + + /* 从 content-box 内容区域开始显示背景图 */ + background-origin: content-box; + +``` + +如果属性值设置成了`border-box`，那边框部分也会显示图片哦。 + +如下图所示： + +![](http://img.smyhvae.com/20180207_2115.png) + +## `background-clip`属性：设置元素的背景（背景图片或颜色）是否延伸到边框下面 + +格式举例： + +`background-clip: content-box;` 超出的部分，将裁剪掉。属性值可以是： + + - `border-box` 超出 border-box 的部分，将裁剪掉 + + - `padding-box` 超出 padding-box 的部分，将裁剪掉 + + - `content-box` 超出 content-box 的部分，将裁剪掉 + +假设现在有这样的属性设置： + +```javascript + background-origin: border-box; + + background-clip: content-box; +``` + +上方代码的意思是，背景图片从**边框部分**开始加载，但是呢，超出**内容区域**的部分将被裁减掉。 + +## 同时设置多个背景 + +我们可以给一个盒子同时设置多个背景，用以逗号隔开即可。可用于自适应局。 + +代码举例： + +```html + + + + + + + + +
+ + +``` + +实现效果如下： + +![](http://img.smyhvae.com/20180207_2140.gif) + +上方代码中，我们其实给盒子设置了五张小图，拼成的一张大图。当改变浏览器窗口大小时，可以自适应布局。 + +## 渐变：background-image + +渐变是CSS3当中比较丰富多彩的一个特性，通过渐变我们可以实现许多炫丽的效果，有效的减少图片的使用数量，并且具有很强的适应性和可扩展性。 + +渐变分为： + +- 线性渐变：沿着某条直线朝一个方向产生渐变效果。 + +- 径向渐变：从一个**中心点**开始沿着**四周**产生渐变效果。 + +- 重复渐变。 + +见下图： + +![](http://img.smyhvae.com/20180208_1140.png) + +### 线性渐变 + +格式： + +```javascript + + background-image: linear-gradient(方向, 起始颜色, 终止颜色); + + background-image: linear-gradient(to right, yellow, green); +``` + +参数解释： + +- 方向可以是：`to left`、`to right`、`to top`、`to bottom`、角度`30deg`（指的是顺时针方向30°）。 + +格式举例： + +```html + + + + + + + + +
+
+
+
+
+
+ + +``` + +效果如下： + +![](http://img.smyhvae.com/20180207_2222.png) + +**举例**：按钮 + +```html + + + + + CSS3 渐变 + + + +
+ 导航1 + 导航2 + 导航3 + 导航4 + 导航5 + 导航6 +
+ + +``` + +效果： + +![](http://img.smyhvae.com/20180207_2301.png) + +### 径向渐变 + +格式： + +``` + background-image: radial-gradient(辐射的半径大小, 中心的位置, 起始颜色, 终止颜色); + + background-image: radial-gradient(100px at center,yellow ,green); + +``` + +解释：围绕中心点做渐变，半径是150px，从黄色到绿色做渐变。 + +中心点的位置可以是：at left right center bottom top。如果以像素为单位，则中心点参照的是盒子的左上角。 + +当然，还有其他的各种参数。格式举例： + +```html + + + + + + + + +
+
+
+
+
+ + +``` + +效果如下： + +![](http://img.smyhvae.com/20180207_2256.png) + +**举例：**利用径向渐变和边框圆角的属性，生成按钮。代码如下： + + +```html + + + + + CSS3 渐变 + + + +
+
+ + +``` + +效果如下： + +![](http://img.smyhvae.com/20180208_1133.png) + +上图中，给第二个div设置的透明度是从0到0.5。如果设置的透明度是从0到0，则样式无变化，和第一个div一样。如果设置的透明度是从1到1，则盒子是全黑的。 + +## clip-path：裁剪出元素的部分区域做展示 + +`clip-path`属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示，区域外的隐藏。 + +虽然`clip-path`不是背景属性，但往往会结合背景属性一起使用，达到一些效果。 + +举例：（鼠标悬停时，放大裁剪的区域） + +```css + .div1 { + width: 320px; + height: 320px; + border: 1px solid red; + background: url(http://img.smyhvae.com/20191006_1410.png) no-repeat; + background-size: cover; + + /* 裁剪出圆形区域 */ + clip-path: circle(50px at 100px 100px); + transition: clip-path .4s; + } + .div1:hover{ + /* 鼠标悬停时，裁剪出更大的圆形 */ + clip-path: circle(80px at 100px 100px); + } +``` + +`clip-path`属性的好处是，即使做了任何裁剪，**容器的占位大小是不变的**。比如上方代码中，容器的占位大小一直都是 320px * 320px。这样的话，也方便我们做一些动画效果。 + +`clip-path: polygon()`举例： + +![](http://img.smyhvae.com/20191006_1430.png) + +另外，还可以引入 svg 图形，这里就不详细展开了。 ## 我的公众号 diff --git a/02-CSS基础/12-CSS3属性详解（一）.md b/02-CSS基础/12-CSS3属性详解（一）.md index 674c691..4e777b0 100644 --- a/02-CSS基础/12-CSS3属性详解（一）.md +++ b/02-CSS基础/12-CSS3属性详解（一）.md @@ -171,7 +171,7 @@ CSS3 对盒模型做出了新的定义，即允许开发人员**指定盒子宽 单个属性的写法： -``` +```css border-top-left-radius: 60px 120px; //参数解释：水平半径 垂直半径 border-top-right-radius: 60px 120px; @@ -358,443 +358,6 @@ CSS3 对盒模型做出了新的定义，即允许开发人员**指定盒子宽 ``` - - -## 背景属性 - -背景属性在 CSS3 中也得到很大程度的增强，比如背景图片尺寸、背景裁切区域、背景定位参照点、多重背景等。 - -### 背景尺寸：`background-size`属性 - -`background-size`属性：设置背景图片的尺寸。 - -格式举例： - -```javascript - /* 宽、高的具体数值 */ - background-size: 500px 500px; - - /* 宽高的百分比 */ - background-size: 50% 50%; // 如果两个属性值相同，可以简写成：background-size: 50%; - - background-size: 100% auto; //这个属性可以自己试验一下。 - - /* cover：会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。 */ - background-size: cover; - - /* contain：会自动调整缩放比例，保证图片始终完整显示在背景区域。 */ - background-size: contain; -``` - -这里我们对属性值 `cover` 和 `contain`进行再次强调： - -- `cover`：会自动调整缩放比例，保证图片始终**填充满**背景区域，如有**溢出部分**则会被隐藏。也就是说，保证背景图片完全覆盖盒子，但不能保证完整显示。 - -- `contain`：会自动调整缩放比例，保证图片始终**完整显示**在背景区域。也就是说，保证背景图片最大化地在盒子里，**等比例**显示，但不保证能铺满盒子。 - - -### 背景原点：`background-origin` 属性 - -`background-origin` 属性：控制背景从什么地方开始显示。 - -格式举例： - -```javascript - - /* 从 padding-box 内边距开始显示背景图 */ - background-origin: padding-box; //默认值 - - /* 从 border-box 边框开始显示背景图 */ - background-origin: border-box; - - /* 从 content-box 内容区域开始显示背景图 */ - background-origin: content-box; - -``` - -如果属性值设置成了`border-box`，那边框部分也会显示图片哦。 - -如下图所示： - -![](http://img.smyhvae.com/20180207_2115.png) - -### 背景裁剪：`background-clip`属性 - -格式举例： - -`background-clip: content-box;` 超出的部分，将裁剪掉。属性值可以是： - - - `border-box` 超出 border-box 的部分，将裁剪掉 - - - `padding-box` 超出 padding-box 的部分，将裁剪掉 - - - `content-box` 超出 content-box 的部分，将裁剪掉 - -假设现在有这样的属性设置： - - -```javascript - background-origin: border-box; - - background-clip: content-box; -``` - -上方代码的意思是，背景图片从**边框部分**开始加载，但是呢，超出**内容区域**的部分将被裁减掉。 - -### 同时设置多个背景 - -我们可以给一个盒子同时设置多个背景，用以逗号隔开即可。可用于自适应局。 - -代码举例： - -```html - - - - - - - - -
- - -``` - -实现效果如下： - -![](http://img.smyhvae.com/20180207_2140.gif) - -上方代码中，我们其实给盒子设置了五张小图，拼成的一张大图。当改变浏览器窗口大小时，可以自适应布局。 - -## 渐变：background-image - -渐变是CSS3当中比较丰富多彩的一个特性，通过渐变我们可以实现许多炫丽的效果，有效的减少图片的使用数量，并且具有很强的适应性和可扩展性。 - -渐变分为： - -- 线性渐变：沿着某条直线朝一个方向产生渐变效果。 - -- 径向渐变：从一个**中心点**开始沿着**四周**产生渐变效果。 - -- 重复渐变。 - -见下图： - -![](http://img.smyhvae.com/20180208_1140.png) - -### 线性渐变 - -格式： - -```javascript - - background-image: linear-gradient(方向, 起始颜色, 终止颜色); - - background-image: linear-gradient(to right, yellow, green); -``` - -参数解释： - -- 方向可以是：`to left`、`to right`、`to top`、`to bottom`、角度`30deg`（指的是顺时针方向30°）。 - -格式举例： - -```html - - - - - - - - -
-
-
-
-
-
- - -``` - -效果如下： - -![](http://img.smyhvae.com/20180207_2222.png) - -**举例**：按钮 - -```html - - - - - CSS3 渐变 - - - -
- 导航1 - 导航2 - 导航3 - 导航4 - 导航5 - 导航6 -
- - -``` - -效果： - -![](http://img.smyhvae.com/20180207_2301.png) - -### 径向渐变 - -格式： - -``` - background-image: radial-gradient(辐射的半径大小, 中心的位置, 起始颜色, 终止颜色); - - background-image: radial-gradient(100px at center,yellow ,green); - -``` - -解释：围绕中心点做渐变，半径是150px，从黄色到绿色做渐变。 - -中心点的位置可以是：at left right center bottom top。如果以像素为单位，则中心点参照的是盒子的左上角。 - -当然，还有其他的各种参数。格式举例： - -```html - - - - - - - - -
-
-
-
-
- - -``` - -效果如下： - -![](http://img.smyhvae.com/20180207_2256.png) - -**举例：**利用径向渐变和边框圆角的属性，生成按钮。代码如下： - - -```html - - - - - CSS3 渐变 - - - -
-
- - -``` - -效果如下： - -![](http://img.smyhvae.com/20180208_1133.png) - -上图中，给第二个div设置的透明度是从0到0.5。如果设置的透明度是从0到0，则样式无变化，和第一个div一样。如果设置的透明度是从1到1，则盒子是全黑的。 - CSS3的更多属性，且看下文继续。 ## 我的公众号 diff --git a/03-CSS进阶/02-CSS中的非布局样式.md b/03-CSS进阶/02-CSS中的非布局样式.md index c758710..9c22f80 100644 --- a/03-CSS进阶/02-CSS中的非布局样式.md +++ b/03-CSS进阶/02-CSS中的非布局样式.md @@ -120,4 +120,18 @@ css 中的字体族可以理解成是某一类字体。常见的字体族可以 - 替代方案：针对性加 class +## CSS 效果 + +我们可以利用 CSS 实现各种效果，常见的效果属性有： + +- box-shadow：盒子的阴影 + +- text-shadow：文本的阴影 + +- border-radius + +- background + +- clip-path +