CSS学习记录17 - 技术栈

CSS圆角

通过CSS border-radius 属性，可以实现任何元素的"圆角"样式。 CSS border-radius 属性用于定义元素角的半径。使用此属性可以为元素添加圆角。

css 复制代码

#rcorners1 {
  border-radius: 25px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}

border-radius 属性是实际上是以下属性的简写属性：

border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius

CSS border-radius-指定每个角

border-radius 属性可以接受一到四个值。规则如下：

四个值 - border-radius：15px 50px 30px 5px；（依次分别用于：左上角、右上角、右下角、左下角）；

三个值 - border-radius：15px 50px 30px；（第一个值用于左上角，第二个值用于右上角和左下角，第三个用于右下角）；

两个值 - border-radius: 15px 50px；（第一个值用于左上角和右下角，第二个值用于右上角和左下角）；

一个值 - border-radius: 15px; （该值用于所有四个角，圆角都是一样的）；

CSS边框图像

通过使用CSS border-image 属性，可以设置图像用作围绕元素的边框。

CSS border-image属性

CSS border-image属性允许您指定要使用的图像，而不是包围普通边框。

该属性有三部分：

用作边框的图像
在哪里裁切图像
定义中间部分应重复还是拉伸

border-image 属性接受图像，并将其切成九部分。然后将拐角放置在拐角处，并根据您的设置重复或拉伸中间部分。

为了使border-image起作用，该元素还需设置border属性。

css 复制代码

#borderimg {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30 round;
}

border-image属性实际上是以下属性的简写属性：

|---------------------|--------------------|
| border-image-source | 规定用作边框的图像的路径。 |
| border-image-slice | 规定如何裁切边框图像。 |
| border-image-width | 规定边框图像的宽度。 |
| border-image-outset | 规定边框图像区域超出边框盒的量。 |
| border-image-repeat | 规定边框图像应重复、圆角、还是拉伸。 |

border-image-slice属性

border-image-sliceCSS属性将引用的图像划分为多个区域。这些区域组成了一个元素的边框图像。

切分过程会将图像分割为9个区域：四个角、四个边以及中心区域。四条切片线，从它们各自的侧面设置给定距离，控制区域的大小。

区域1-4为角区域。每一个都被用于组成最终边框图像的四个角。
区域5-8为边区域。
区域9为中心区域。它在默认情况下会被丢弃，但如果设置了关键字fill，则会将其用作元素的背景图像。

border-image-slice 属性可以用四个指定的<number-percentage>值来标识每一个图像切片的位置。负数是无效值，而大于其相应的最大尺寸的值则会被限制为100%。

仅当指定了一个位置（1个值）时，创建的（上下左右）四个切片将具有相同的宽度/高度。
当制定了两个位置（2个值）时，第一个值表示垂直方向的两个切片的高度（即top与bottom），第二个值表示水平方向两侧切片的宽度（即left 和 right)。
当指定了3个位置（3个值）时，第一个值表示顶部切片的高度(即top），第二个值表示水平方向两侧切片的宽度（即left 和 right），第三个值则表示底部切片的高度（即bottom）。
当指定了四个位置（4个值）时，这四个值分别对应top、right、bottom、left（上、右、下、左）四个切片的宽度/高度。

可选值fill可放在上面声明值的末尾。

取值

数字值

表示到图像边缘的偏移量，在位图中的单位为像素点，在矢量图中则是坐标。对于矢量图，数字值与元素大小相关，而非矢量图的元素大小。因此，使用矢量图时，使用百分比值更可取。

百分比

以原始图像大小的百分比表示边缘偏移量：水平偏移使用图像的宽度，垂直偏移则使用图像的高度。

border-image-repeat

定义图片如何填充边框。或为单个值，设置所有的边框；或为两个值，分别设置水平与垂直的边框。

值

stretch

拉伸图片以填充边框。

repeat

平铺图片以填充边框。

round

平铺图像。当不能整数次平铺时，根据情况放大或缩小图像。

space

平铺图像。当不能整数次平铺时，会用空白间隙填充在图像周围（不会放大或缩小图像）

CSS多重背景

CSS允许您通过background-image属性为一个元素添加多幅背景图像。不同的背景图像用逗号隔开，并且图像会彼此堆叠，其中的第一幅图像最靠近观看者。下面的例子有两幅背景图像，第一幅图像是花朵（与底部和右侧对齐），第二幅图像时纸张背景（与左上角对齐）。

css 复制代码

#example1 {
  background-image: url(flower.gif), url(paper.gif);
  background-position: right bottom, left top;
  background-repeat: no-repeat, repeat;
}

多重背景图像可以使用单独的背景属性或background简写属性来指定。下面的例子使用background简写属性（结果与上例相同）：

css 复制代码

#example1 {
  background: url(flower.gif) right bottom no-repeat, url(paper.gif) left top repeat;
}

CSS背景尺寸

CSS background-size 属性允许您指定背景图像的大小。可以通过长度、百分比或使用以下两个关键字之一来指定背景图像的大小：contain 或 cover。

css 复制代码

#div1 {
  background: url(img_flower.jpg);
  background-size: 100px 80px;
  background-repeat: no-repeat;
}

contain关键字将背景图像缩放为尽可能大的尺寸（但其宽度和高度都必须适合内容区域）。这样，取决于背景图像和背景定位区域的比例，可能存在一些未被背景图像覆盖的背景区域。

cover关键字会缩放背景图像，使得内容区域完全被背景图像覆盖（其宽度和高度均等于或超过内容区域）。这样背景图像的部分内容可能在背景定位区域不可见。

css 复制代码

#div1 {
  background: url(img_flower.jpg);
  background-size: contain;
  background-repeat: no-repeat;
}

#div2 {
  background: url(img_flower.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}

定义多个背景图像的尺寸

在处理多重背景时，background-size属性还可以接收多个设置背景尺寸的值（使用逗号分隔的列表）。下例指定了三幅背景图像的尺寸。

css 复制代码

#example1 {
  background: url(tree.png) left top no-repeat, url(flower.gif) right bottom no-repeat, 
  	url(paper.gif) left top repeat;
  background-size: 50px, 130px, auto;
}

全尺寸背景图像

如果希望网站上的背景图像始终覆盖整个浏览器窗口。同时具备如下要求：

1.用图像填充整个页面（无空白） 2.根据需要缩放图像 3.在页面上居中图像 4.不引发滚动条。

那么可以使用<html>元素（<html>元素始终至少是浏览器窗口的高度)。然后在其上设置固定且居中的背景。最后使用background-size属性调整其大小：

css 复制代码

html {
  background: url(img_man.jpg) no-repeat center fixed; 
  background-size: cover;
}

CSS background-origin属性

CSS background-origin属性指定背景图像的位置。

该属性接受三个不同的值：

border-box - 背景图片从边框的坐上角开始
padding-box - 背景图像从内边距边缘的左上角开始（默认）
content-box - 背景图片从内容的左上角开始

css 复制代码

#example1 {
  border: 10px solid black;
  padding: 35px;
  background: url(flower.gif);
  background-repeat: no-repeat;
  background-origin: content-box;
}

CSS background-clip属性

CSS background-clip属性指定背景的绘制区域。

该属性接受三个不同的值：

border-box - 背景绘制到边框的外部边缘（默认）
padding-box - 背景绘制到内边距的外边缘
content-box - 在内容框中绘制背景

css 复制代码

#example1 {
  border: 10px dotted black;
  padding: 35px;
  background: yellow;
  background-clip: content-box;
}

background-origin 同background-clip的区别：

background-origin决定的是背景起始的位置，而background-clip决定的是背景的绘制区域。因此，前者确定背景图像或颜色的起点，而后者明确了看到和应用它的区域。

可以很明显的看到花朵的左上角被裁剪一部分，因为background-clip规定了背景图像的区域，背景图的位置默认是以内边距开始，于是超出内容区域的部分被裁剪了。

属性	描述
background	用于在一条声明中设置所有背景属性的简写属性。
background-clip	规定背景的绘制区域。
background-image	为一个元素指定一幅或多幅背景图像。
background-origin	规定背景图像的放置位置。
background-size	规定背景图像的大小。