十个CSS3高级属性绘制技巧(linear-gradient、radial-gradient、background-size、clip-path）

linear-gradient

radial-gradient

background-size

background-origin

background-clip

border-radius

box-shadow

text-shadow

Filter

clip-path

1. linear-gradient

1.1 概述

developer.mozilla.org/zh-CN/docs/…

语法: 可以使用角度或者关键字；

background: linear-gradient(color-stop1, color-stop2, …)

background: linear-gradient(direction, color-stop1, color-stop2, …)

background: linear-gradient(angle, color-stop1, color-stop2);

参数：

第一个参数:指定渐变方向，可以用“角度”的关键词或“英文”来表示：to/top、bottom、left、right

第一个参数省略时，默认为“180deg”，等同于“to bottom”。

第二个和第三个参数，表示颜色的起始点和结束点，可以有多个颜色值。

1.2 浏览器支持

表格中的数字表示支持该函数的第一个浏览器版本号。

"webkit" 或 "moz" 或 "o" 指定的数字为支持该函数的第一个版本号前缀。 linner-support

1.3示例

// 1、线性渐变默认是从上到下
.box1{
  background:linear-gradient(red,green);
  background:-webkit-linear-gradient(red,green);
}

// 2、从一个方向到另一个方向（to/left 、right 、bottom、top）
.box2 {
  background:linear-gradient(to left,red,green);
  background:-webkit-linear-gradient(to left,red,green);
}

// 3、对角的，两个方向可以进行组合，比如下面的就是从左上角到右下角
.box3 {
  background:linear-gradient(to left top,red,green);
  background:-webkit-linear-gradient(to left top,red,green);
}

// 4、还可以是角度
.box4 {
  background:linear-gradient(90deg,red,green);
  background:-webkit-linear-gradient(90deg,red,green);
}

1-eg

2. radial-gradient

2.1 概述

developer.mozilla.org/zh-CN/docs/…

径向渐变：默认的形状是椭圆，至少得有两个颜色值。

形状：ellipse 椭圆（默认），circle（圆）

background: radial-gradient(#e66465, #9198e5);
background: radial-gradient(closest-side, #3f87a6, #ebf8e1, #f69d3c);
background: radial-gradient(circle at 100%, #333, #333 50%, #eee 75%, #333 75%);
background: radial-gradient(ellipse at top, #e66465, transparent),
            radial-gradient(ellipse at bottom, #4d9f0c, transparent);

关键字用于描述边缘轮廓的具体位置。以下为关键字常量：

常量	描述
`closest-side`	渐变的边缘形状与容器距离渐变中心点最近的一边相切（圆形）或者至少与距离渐变中心点最近的垂直和水平边相切（椭圆）。
`closest-corner`	渐变的边缘形状与容器距离渐变中心点最近的一个角相交。
`farthest-side`	与closest-side相反，边缘形状与容器距离渐变中心点最远的一边相切（或最远的垂直和水平边）。
`farthest-corner`	渐变的边缘形状与容器距离渐变中心点最远的一个角相交。

背景 - 纹理、图案、渐变、雪碧图动画、背景图尺寸适应

2.2 浏览器支持

表格中的数字表示支持该函数的第一个浏览器版本号。

"webkit" 或 "moz" 或 "o" 指定的数字为支持该函数的第一个版本号前缀。 2-support 兼容语法：

background: -webkit-radial-gradient(circle farthest-side at center,red,blue);/* Safari 5.1-6.0 */
background:      -o-radial-gradient(circle farthest-side at center,red,blue); /* Opera 11.6-12.0 */
background:    -moz-radial-gradient(circle farthest-side at center,red,blue);/* Firefox 3.6-15 */
background:         radial-gradient(circle farthest-side at center,red,blue);/* 标准语法 */

2.3 示例

.box1{
      background: radial-gradient(cyan 0%,transparent 20%,salmon 40%);
    }
    .box2 {
      width: 200px;
      height: 200px;
      border-radius: 50%;
      border: 10px solid rgba(255,255,255,0.6);
      background: radial-gradient(circle,#fff 30%,transparent 0),#00caf5;
      background-size: 30px 30px;
    }
    .box3 {
      width: 200px;
      height: 200px;
      border-radius: 50%;
      border: 10px solid rgba(255,255,255,0.6);
      background: radial-gradient(circle,#fff 30%,transparent 0) 0 0,
      radial-gradient(circle,#fff 30%,transparent 0) 15px 15px,
      #00caf5;
      background-size: 30px 30px;
    }
    .box4 {
      width: 200px;
      height: 200px;
      border-radius: 50%;
      border: 1px solid #00caf5;
      box-shadow: 0 0 0 10px rgba(255,255,255,0.8) inset;
      background: radial-gradient(circle,#00caf5 9px,transparent 10px),
      repeating-radial-gradient(ellipse,#00caf5 0,#00caf5 4px,transparent 5px,transparent 20px,#00caf5 21px,#00caf5 25px,transparent 26px, transparent 50px),
      #fff;
      background-size: 30px 30px,90px 90px;
    }

2-eg

3. background-size

3.1 概述

developer.mozilla.org/zh-CN/docs/…

检索或设置对象的背景图像的尺寸大小。

该属性提供2个参数值(特性值cover和contain除外)。

如果提供两个，第一个用于定义背景图像的宽度，第二个用于定义背景图像的高度。

如果只提供一个，该值将用于定义背景图像的宽度，第2个值默认为auto，即高度为auto，此时背景图以提供的宽度作为参照来进行等比缩放。

取值情况：

length：用长度值指定背景图像大小。不允许负值。
percentage：用百分比指定背景图像大小。不允许负值。
auto：背景图像的真实大小。
cover：将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。
contain：将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。

3.2 浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。

3-support

3.3 示例

<div class="bg-image"></div>

.bg-image {
  width: 300px;
  height: 300px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
  background-image: url("https://th.bing.com/th/id/R18f60f2fa500828b92af97a4ca400740?rik=4a3ixRZt0LTEBw&riu=http%3a%2f%2fpic.netbian.com%2fuploads%2fallimg%2f170516%2f120052-1494907252e25b.jpg&ehk=GkohFw0bI5iRcJhcpzlE87DaPoGrTUiQ7j6SgBu9KvI%3d&risl=&pid=ImgRaw");
}

4. background-origin

4.1 概述

developer.mozilla.org/zh-CN/docs/…

background-origin 规定了指定背景图片background-image 属性的原点位置的背景相对区域.

设置或检索对象的背景图像计算 background-position 时的参考原点(位置)

取值：

padding-box：从padding区域（含padding）开始显示背景图像。
border-box：从border区域（含border）开始显示背景图像。
content-box：从content区域开始显示背景图像。

4.2 浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。

4.3 示例

div {
  border: 1px solid black;
  padding: 35px;
  background-image: url('/i/bg_flower.gif');
  background-repeat: no-repeat;
  background-position: left;
}
#div1 {
  background-origin: border-box;
}
#div2 {
  background-origin: content-box;
}

5. background-clip

5.1 概述

developer.mozilla.org/zh-CN/docs/…

指定对象的背景图像向外裁剪的区域

padding-box：从padding区域（不含padding）开始向外裁剪背景。

border-box：从border区域（不含border）开始向外裁剪背景。

content-box：从content区域开始向外裁剪背景。

text: 从前景内容的形状（比如文字）作为裁剪区域向外裁剪，如此即可实现使用背景作为填充色之类的遮罩效果

5.2 浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。

5.3 示例

6. border-radius

6.1 概述

developer.mozilla.org/zh-CN/docs/…

作用:

圆角矩形

圆形

半圆/扇形

一些奇怪的角角

含义: 设置或检索对象使用圆角边框

提供2个参数，2个参数以“/”分隔，每个参数允许设置1~4个参数值，第1个参数表示水平半径，第2个参数表示垂直半径，如第2个参数省略，则默认等于第1个参数

水平半径：如果提供全部四个参数值，将按上左(top-left)、上右(top-right)、下右(bottom-right)、下左(bottom-left)的顺序作用于四个角。

垂直半径也遵循以上4点。

取值情况:

四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。

三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角

两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角

一个值：四个圆角值相同

6.2 浏览器支持

6.3 示例

border-radius:2em;

等价于：

border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;

border-radius: 2em 1em 4em / 0.5em 3em;

等价于：

border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;

7. box-shadow

7.1 概述

developer.mozilla.org/zh-CN/docs/…

作用:

营造层次感(立体感)

充当没有宽度的边框

特殊效果

含义: 设置或检索对象阴影

none：无阴影

length ①：第1个长度值用来设置对象的阴影水平偏移值。可以为负值

length ②：第2个长度值用来设置对象的阴影垂直偏移值。可以为负值

length ③：如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值

length ④：如果提供了第4个长度值则用来设置对象的阴影外延值。可以为负值

color：设置对象的阴影的颜色。

inset：设置对象的阴影类型为内阴影。该值为空时，则对象的阴影类型为外阴影。

语法:

box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];

7.2 浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。

带 -webkit- 或 -moz- 的数字表示使用前缀的首个版本

7.3 示例：扔到桌子上面的图片

body {
  margin: 30px;
  background-color: #E9E9E9;
}
div.polaroid {
  width: 284px;
  padding: 10px 10px 20px 10px;
  border: 1px solid #BFBFBF;
  background-color: white;
  /* Add box-shadow */
  box-shadow: 2px 2px 3px #aaaaaa;
}
div.rotate_left {
  float: left;
  -ms-transform: rotate(7deg); /* IE 9 */
  -moz-transform: rotate(7deg); /* Firefox */
  -webkit-transform: rotate(7deg); /* Safari and Chrome */
  -o-transform: rotate(7deg); /* Opera */
  transform: rotate(7deg);
}
div.rotate_right {
  float: left;
  -ms-transform: rotate(-8deg); /* IE 9 */
  -moz-transform: rotate(-8deg); /* Firefox */
  -webkit-transform: rotate(-8deg); /* Safari and Chrome */
  -o-transform: rotate(-8deg); /* Opera */
  transform: rotate(-8deg);
}

<div class="polaroid rotate_left">
  <img src="../assets/images/ballade_dream.jpeg" alt="郁金香" width="284" height="213"/>
  <p class="caption">上海鲜花港的郁金香，花名：Ballade Dream。</p>
</div>

<div class="polaroid rotate_right">
  <img src="../assets/images/longlong.jpeg" alt="朱一龙" width="284" height="213"/>
  <p class="caption">朱一龙，中国内地男演员、歌手。</p>
</div>

8. text-shadow

8.1 概述

developer.mozilla.org/zh-CN/docs/…

作用:

立体感

印刷品质感

含义: 设置或检索对象中文本的文字是否有阴影及模糊效果

none：无阴影

length ①：第1个长度值用来设置对象的阴影水平偏移值。可以为负值

length ②：第2个长度值用来设置对象的阴影垂直偏移值。可以为负值

length ③：如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值

color ：设置对象的阴影的颜色

语法：

text-shadow: h-shadow v-shadow blur color;

注释：text-shadow 属性向文本添加一个或多个阴影。该属性是逗号分隔的阴影列表，每个阴影有两个或三个长度值和一个可选的颜色值进行规定。省略的长度是 0。

值	描述
h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊的距离。
color	可选。阴影的颜色。

8.2 浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。

8.3 示例

h1 {
  color: white;
  text-shadow: 2px 2px 4px #000000;
}

/*简单阴影*/
.red-text-shadow {
  text-shadow: red 0 -2px;
}

/*多重阴影*/
.white-with-blue-shadow {
  text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue;
  color: white;
  font: 1.5em Georgia, "Bitstream Charter", "URW Bookman L", "Century Schoolbook L", serif;
}

<h1>白色文本的阴影效果！</h1>
<p class="red-text-shadow">
  Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam,
  eaque ipsa quae ab illo
  inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
</p>
<p class="white-with-blue-shadow">
  Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam,
  eaque ipsa quae ab illo inventore
  veritatis et quasi architecto beatae vitae dicta sunt explicabo.
</p>

9. Filter

9.1 概述

developer.mozilla.org/zh-CN/docs/…

filter CSS属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像，背景和边框的渲染。

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

none：默认值，没有效果。

blur(px)：给图像设置高斯模糊，"radius"一值设定高斯函数的标准差，或者是屏幕上以多少像素融在一起，所以值越大越模糊；如果没有设定值，则默认是0；这个参数可设置css长度值，但不接受百分比值。

brightness(%)：给图片应用一种线性乘法，使其看起来更亮或更暗。如果值是0%，图像会全黑。值是100%，则图像无变化。其他的值对应线性乘数效果。值超过100%也是可以的，图像会比原来更亮。如果没有设定值，默认是1。

contrast(%): 调整图像的对比度。值是0%的话，图像会全黑。值是100%，图像不变。值可以超过100%，意味着会运用更低的对比。若没有设置值，默认是1

drop-shadow (h-shadow v-shadow blur spread color)：给图像设置一个阴影效果

grayscale(%)：将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0；

hue-rotate(deg)：给图像应用色相旋转。"angle"一值设定图像会被调整的色环角度值。值为0deg，则图像无变化。若值未设置，默认值是0deg。该值虽然没有最大值，超过360deg的值相当于又绕一圈

invert(%) ：反转输入图像。值定义转换的比例。100%的价值是完全反转。值为0%则图像无变化。值在0%和100%之间，则是效果的线性乘子。若值未设置，值默认是0

opacity(%)：转化图像的透明程度。值定义转换的比例。值为0%则是完全透明，值为100%则图像无变化。值在0%和100%之间，则是效果的线性乘子，也相当于图像样本乘以数量。若值未设置，值默认是1。该函数与已有的opacity属性很相似，不同之处在于通过filter，一些浏览器为了提升性能会提供硬件加速。

saturate(%)：转换图像饱和度。值定义转换的比例。值为0%则是完全不饱和，值为100%则图像无变化。其他值，则是效果的线性乘子。超过100%的值是允许的，则有更高的饱和度。若值未设置，值默认是1。

sepia(%)：将图像转换为深褐色。值定义转换的比例。值为100%则完全是深褐色的，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0；

url()：URL函数接受一个XML文件，该文件设置了一个SVG滤镜，且可以包含一个锚点来指定一个具体的滤镜元素，filter: url(svg-url#element-id)

9.2 浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。

带 -webkit- 的数字表示使用前缀的首个版本。

注释：较旧版本的 Internet Explorer（4. 0到 8.0）支持已弃用的非标准 "filter" 属性。当需要 IE8 及更低版本的支持时，主要用于不透明度。

9.3 示例

<p>调整图像的亮度：</p>
<img class="highlight" src="../assets/images/ballade_dream.jpeg" alt="Tulip" width="300" height="300">

<p>背景模糊：</p>
<div class="bg-blur-box">
  <img class="background" src="../assets/images/longlong.jpeg" alt="Tulip" width="300" height="200">
  <img class="circle" src="../assets/images/longlong.jpeg" alt="Tulip" width="200" height="200">
</div>

<p>对图像应用模糊效果：</p>
<img class="blur" src="../assets/images/ballade_dream.jpeg" alt="Tulip" width="300" height="300">

img.highlight {
  filter: brightness(200%);
}
.bg-blur-box {
  position: relative;
  width: 300px;
  height: 200px;
  margin: 1rem 0;
}
img.background {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  filter: blur(5px);
}
img.circle {
  border-radius: 50%;
  display: block;
  margin: 0 auto;
  height: 120px;
  max-width: 40%;
}
img.blur {
  filter: blur(5px);
}

10. clip-path

10.1 概述

developer.mozilla.org/zh-CN/docs/…

clip-path生成器 www.html.cn/tool/css-cl…

元素的表现属性 clip-path 为其定义或关联一条剪切路径。

属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏

对容器进行裁剪

常见几何图形

自定义路径

语法：

clip-path: clip-source|basic-shape|margin-box|border-box|padding-box|content-box|fill-box|stroke-box|view-box|none;

值	描述
clip-source	定义指向 SVG 元素的 URL。
basic-shape	把元素剪裁为基础形状：圆、椭圆、多边形或星形。
margin-box	使用 margin box 作为引用框。
border-box	使用 border box 作为引用框。
padding-box	使用 padding box 作为引用框。
content-box	使用 content box 作为引用框。
fill-box	利用对象边界框（object bounding box）作为引用框。
stroke-box	使用笔触边界框（stroke bounding box）作为引用框。
view-box	使用 SVG 视口作为引用框。
none	默认值。不创建的剪切路径。

10.2 浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。

注意Edge 仅在 SVG 元素（不支持 HTML 元素）上支持 clip-path。

10.3 示例

.box {
  width: 600px;
  height: 300px;
  display: flex;
  flex-direction: row
}

/*圆形circle（半径at圆心坐标）*/
.circle {
  width: 100px;
  height: 100px;
  background: #0cc;
  -webkit-clip-path: circle(50% at 50% 50%);
}

/*椭圆形ellipse（长、短轴半径at圆心坐标）*/
.ellipse {
  width: 100px;
  height: 100px;
  background: #aaa;
  -webkit-clip-path: ellipse(25% 50% at 50% 50%);
}

/*内置矩形inset (上右下左的边距round上右下左圆角)*/
.inset {
  width: 100px;
  height: 100px;
  background: #99f;
  -webkit-clip-path: inset(10px 20px 30px 10px round 20px 5px 50px 0);
}

/*正三角形*/
.triangle {
  width: 100px;
  height: 87px;
  background: #c00;
  -webkit-clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
}

/*正方形*/
.square {
  width: 100px;
  height: 100px;
  background: #069;
  -webkit-clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%);
}

<div id="box" class="box">
  <div class="circle"></div>
  <div class="ellipse"></div>
  <div class="inset"></div>
  <div class="triangle"></div>
  <div class="square"></div>
</div>

11. CSS面试题真题

如何用一个div画xxx

box-shadow无限投影

::before

::after

如何产生不占空间的边框

box-shadow

outline

box-sizing:border-box

如何实现圆形元素(头像)

box-radius:50%

如何实现IOS图标的圆角

clip-path: (svg)

如何实现半圆、扇形等图形

border-radius组合：

有无边框

边框粗细

圆角半径

如何实现背景图居中显示/不重复/改变大小

background-position

background-repeat

background-size(cover/contain)