强大的CSS：颜色、背景和剪切
CSS 中可以改变文字的颜色还有元素的背景颜色。可以用颜色关键字来定义颜色，如red，但是这些颜色关键字并不常用。
transparent可以让文字或背景变的完全透明的颜色，它就像rgba(0,0,0,0)的缩写。
currentColor代表原始的color属性的计算值。比如当前元素color为红色，背景色设置为currentColor，那么现在背景色也为红色。
颜色还可以用rgb函数表示，如rgb(255, 255, 255)代表白色，它每个参数的取值范围是到255，它是用不同比例的红、绿、蓝来组成期望颜色。
rgba函数代表红-绿-蓝-阿尔法，其中的a是透明度，取值范围是到1。
除了使用rgb函数，还可以使用 16 进制来表示，它的语法是#RRGGBB，如果#f3f3f3，代表f3（16 进制）数量的红-绿-蓝。如果红-绿-蓝数值两两相等，如#ffffff，就可以简写成 3 位 16 进制的形式#fff。在高版本的浏览器还可以用 16 进制表示透明度#RRGGBBAA，AA的取值范围是到255，如果两两相等也可以简写成#RGBA形式。
hsl函数是用色相-饱和度-明度（Hue-saturation-lightness）来表示颜色，HSL相比RGB的优点是更加直观：你可以估算你想要的颜色，然后微调，比如要找到一个颜色的相近色，只需调整一下明度就行了。
色相（Hue）表示色环（即代表彩虹的一个圆环）的一个角度。这个角度作为一个无单位的 被给出，大致按照数值红、橙、黄、绿、青、蓝、紫变化节奏。取值范围是到360
饱和度，取值0%到100%，100% 是满饱和度，而 0% 是一种灰度。 明度，取值0%到100%，100% 明度是白色， 0% 明度是黑色，而 50% 明度是“一般的”。
hsla和rgba相似其中的a设置透明度，取值范围也是到1。
系统颜色就是系统的颜色，不同的系统支持的颜色可能不同，一般很少使用。但是我们可以利用它实现系统主题风格类似的 Web 组件皮肤效果，来以假乱真。
背景
CSS2.1中有5个background属性可以用来控制元素的背景。
background-colorbackground-imagebackground-repeatbackground-attachmentbackground-position为了更好的驾驭背景图片，CSS3添加了3个新的background相关属性。
background-clipbackground-originbackground-sizebackground-blend-modeCSS3 中还添加了多背景渐变等等新特性。
background-image为元素设置一个或多个背景图像。background-image在background-color之上、border之下渲染。也就是一个同时设置了background-color和background-image那么background-image会覆盖background-color。
background-image的值是一个图片或多个图片（用,分隔）。
div{background-image:url("a.jpg"),url("b.jpg");}linear-gradient()
创建一个表示两种或多种颜色线性渐变的图片。CSS 渐变没有固定大小也没有固定宽高比，它只等设置渐变角度、渐变颜色和渐变梯度。
linear-gradient的语法是[角度（角度或关键字）], 颜色 [梯度]，它们用,分隔，角度可选默认时从上到下渐变。
颜色关键字是to left，to top，to left top等位置关键字。
div{background-image:linear-gradient(90deg,rgba(255,255,255,.5),orange70%,#000),linear-gradient(red,orange70%,#000);}
repeating-linear-gradient()
一个由重复线性渐变组成的图片。它的语法和linear-gradient类似。
div{background-image:repeating-linear-gradient(-45deg,transparent,transparent25px,#00025px,#00050px);}
radial-gradient()
创建一个径向渐变（由原点（渐变中心）辐射开的颜色渐变）的图片。
radial-gradient()的语法是边缘轮廓的具体位置 形状 渐变中心后面是颜色用,分隔。
div{background:radial-gradient(circleclosest-sideat50px30px,yellow,red5%,orange,#fff,#000);}
其中边缘轮廓的具体位置 形状 渐变中心都是可选。
形状值可以为circle和ellipse默认ellipse。
渐变中心是at后的坐标点，默认元素中心点。
边缘轮廓的具体位置可以为如下关键字：
closest-side渐变中心距离容器最近的边作为终止位置。closest-corner渐变中心距离容器最近的角作为终止位置。farthest-side渐变中心距离容器最远的边作为终止位置。farthest-corner渐变中心距离容器最远的角作为终止位置。默认是farthest-corner。
div{position:relative;width:262px;height:262px;border-radius:50%;background:linear-gradient(30deg,transparent40%,rgba(42,41,40,.85)40%)no-repeat100%0,linear-gradient(60deg,rgba(42,41,40,.85)60%,transparent60%)no-repeat0100%,repeating-radial-gradient(#2a2928,#2a29284px,#ada9a05px,#2a29286px);background-size:50%100%,100%50%,100%100%;}div:after{position:absolute;top:50%;left:50%;margin:-35px;border:solid1px#d9a388;width:68px;height:68px;border-radius:50%;box-shadow:0004px#da5b33,inset00027px#da5b33;background:#b5ac9a;content:'';}
repeating-radial-gradient()
创建一个从原点辐射的重复渐变组成的图片 。它类似于radial-gradient并且采用相同的参数，但是它会在所有方向上重复颜色，以覆盖其整个容器。
div{background:repeating-radial-gradient(ellipsefarthest-corner,red,black5%,blue5%,green10%);}
conic-gradient()
创建一个锥形渐变的图片。conic渐变类似于radial渐变，但是它的颜色位于圆的周围。
它的语法是：[from 角度]? [at 位置]?, 颜色 角度...
div{background:conic-gradient(from0degat50px100px,orange0.2turn,#fff0.09turn0.3turn,orange0.27turn0.54turn);border-radius:50%;}
background-repeat
定义背景图像的重复方式。背景图像可以沿着水平轴，垂直轴，两个轴重复，或者根本不重复。
它有 6 个值：
repeat-x相当于repeat no-repeatrepeat-y相当于no-repeat repeatrepeat相当于repeat repeatspace相当于space spaceround相当于round roundno-repeat相当于no-repeat no-repeatspace
图像会尽可能得重复, 但是不会裁剪. 第一个和最后一个图像会被固定在元素(element)的相应的边上, 同时空白会均匀地分布在图像之间.background-position属性会被忽视, 除非只有一个图像能被无裁剪地显示. 只在一种情况下裁剪会发生, 那就是图像太大了以至于没有足够的空间来完整显示一个图像。
round
随着允许的空间在尺寸上的增长, 被重复的图像将会伸展(没有空隙), 直到有足够的空间来添加一个图像. 当下一个图像被添加后, 所有的当前的图像会被压缩来腾出空间. 例如, 一个图像原始大小是260px, 重复三次之后, 可能会被伸展到300px, 直到另一个图像被加进来. 这样他们就可能被压缩到225px.
性能
一般我们会用一个的背景小图片不断重复来达到一些效果，为了请求优化一般会把小图片截取到 1px * 1px 大小，但是这样渲染次数太多，有时候会有明显的卡顿，我们可以将尺寸截取大一点这样图片大小没大多少，但是渲染性能却有明显提升。
background-blend-mode定义该元素的背景图片，以及背景色如何混合。
它就像 PS 中的混合模式。可以做一些 正片叠底，滤色等效果。
它的语法为，单值或者双值（用,分开）。
它的值有：
normalmultiplyscreenoverlaydarkenlightencolor-dodgecolor-burnhard-lightsoft-lightdifferenceexclusionhuesaturationcolorluminositybackground-attachment如果指定了background-image，那么background-attachment决定背景是在视口中固定的还是随包含它的区块滚动的。
它的值为：
scroll默认值，背景相对于元素本身固定， 而不是随着它的内容滚动local背景相对于元素的内容固定。如果一个元素拥有滚动机制，背景将会随着元素的内容滚动fixed背景相对于视口固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动。我们一般只使用fixed这个值，让背景图片不随着滚动而滚动。
为每一个背景图片设置初始位置。属性被指定为一个或多个位置值，用逗号隔开。
默认位置是padding-box的左上角。
它的值可以是left，top这些位置关键字，还可以是长度值和百分比。
div{background-position:50%10px,center,leftbottom;/*分别设置三张背景图片的位置*/}background-origin
指定背景图片background-image属性的原点位置的背景相对区域。当使用background-attachment为fixed时，该属性将被忽略不起作用。
它的值可以是：
padding-box默认值 背景图片的摆放以padding区域为参考border-box背景图片的摆放以border区域为参考content-box背景图片的摆放以content区域为参考background-clip设置元素的背景（背景图片或颜色）是否延伸到边框下面。
它的值可以是：
border-box默认值 背景延伸至边框外沿（但是在边框下层）。padding-box背景延伸至内边距外沿。不会绘制到边框处。content-box背景被裁剪至内容区外沿。text背景被裁剪成文字的前景色。background-size设置背景图片大小。图片可以保有其原有的尺寸，或者拉伸到新的尺寸，或者在保持其原有比例的同时缩放到元素的可用空间的尺寸。
对于多背景用,分隔。
它的值可以是长度值和百分比还有下面的关键字
auto以背景图片的比例缩放背景图片cover缩放背景图片以完全覆盖背景区，可能背景图片部分看不见。和contain值相反contain缩放背景图片以完全装入背景区，可能背景区部分空白background
一种简写属性，用于一次性集中定义各种背景属性。它可以简写的属性有background-clip、background-color、background-image、background-origin、background-position、background-repeat、background-size，和background-attachment。
简写的方式有：
colorimage repeatbox colorrepeat position[ / size]? imageimage position[ / size]? repeat attachment clip origincolor image position[ / size]? repeat attachment clip originclip-pathclip-path用来剪切元素，代替了现在已经弃用的剪切clip属性。它创建一个剪切区域，区域内的部分显示，区域外的隐藏。
clip-path的值可以为：
none链接资源，如url(resources.svg#c1)盒子值，一共有 7 个margin-box使用 margin box 作为引用框border-box使用 border box 作为引用框padding-box使用 padding box 作为引用框content-box使用 content box 作为引用框fill-box利用对象边界框作为引用框stroke-box使用笔触边界框作为引用框view-box使用最近的 SVG 视口作为引用框形状函数（相当于 SVG 中的形状元素）inset()circle()polygon()path()盒子和形状结合值clip-path: padding-box circle(50px at 0 100px);clip-path用的最多的值就属polygon函数，它的参数由一堆x y坐标点组成。
如clip-path: polygon(50% 0%, 0% 100%, 100% 100%);。是一个三角形。它可以接受无限个参数，每个参数都是x y坐标，最终显示的形状就是这些坐标连接成的形状。
clip-path也可以使用transition属性让它有动画效果，不过需要变动前后的坐标点数量必须相同。
这里推荐一下我的前端学习交流扣qun：731771211 ，里面都是学习前端的，如果你想制作酷炫的网页，想学习编程。自己整理了一份2019最全面前端学习资料，从最基础的HTML+CSS+JS【炫酷特效，游戏，插件封装，设计模式】到移动端HTML5的项目实战的学习资料都有整理，送给每一位前端小伙伴，每天分享技术
声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。
