紫月凌枫
紫月凌枫

百度前端技术学院第四天--CSS2

一、使用CSS改变背景样式

什么是背景？

元素的背景是指，在元素内容、内边距和边界下层的区域。默认情况下就是这样——在新的浏览器中，你可以使用 background-clip属性改变背景所占用的区域（更多细节见 CSS box model article background-clip coverage）。

背景并不在外边距下层——外边距不是元素区域的一部分，而是元素外面的区域。

还有很多其他的属性可以用来操作元素的背景，其中一些已经在我们的课程中已经见过很多次了：

  • background-color: 为背景设置一个纯色。
  • background-image: 指定在元素的背景中出现的背景图像。
    这可以是静态文件，也可以是生成的渐变。
  • background-position:指定背景应该出现在元素背景中的位置。
  • background-repeat: 指定背景是否应该被重复(平铺)。
  • background-attachment: 当内容滚动时，指定元素背景的行为，例如，它是滚动的内容，还是固定的?
  • background: 在一行中指定以上五个属性的缩写。
  • background-size: 允许动态调整背景图像的大小。
p:{
background-color: yellow;
background-image: url(https://mdn.mozillademos.org/files/13026/fire-ball-icon.png);
background-repeat: no-repeat;
background-position: 99% center;
background-image: linear-gradient(to bottom, orange, yellow);
background-attachment: fixed;
}

p {
  font-family: sans-serif;
  padding: 20px;
  /* background properties */
  background-color: yellow;
  background: url(https://mdn.mozillademos.org/files/13026/fire-ball-icon.png) no-repeat 99% center,
              linear-gradient(to bottom, yellow, #dddd00 50%, orange);
background-size: 16px 16px;
}

二、使用CSS的样式边框

边界回顾

正如您前面在课程中看到的，元素有一个边界，它位于元素的内边距(padding)和外边距(margin)之间。默认情况下，边界的大小为0，使其不可见，但可以设置边界的粗细、样式和颜色以使其显示出来。

边界简写

border简写属性允许你一次将所有的这些都设置在四个边，例如：

I have a red border!


p {
  padding: 10px;
  background: yellow;
  border: 2px solid red;
}

普通写法选项

border可以分解成许多不同的属性，以获得更具体的样式需求：

  • border-top, border-right, border-bottom, border-left: 设置边界一侧的宽度，样式和颜色。
  • border-width, border-style, border-color: 设置边界宽度、样式或颜色，但是会设置边界的四个边。
  • 您还可以单独三个属性中的一个并且设置其中一侧边界生效。
    border-top-width, border-top-style, border-top-color等。

边界半径

盒子上的圆角是网站上另一个非常受欢迎的功能——如此流行以至于浏览器实现了专门用于实现圆角的属性 : border-radius. 在此之前 (需要用多个background images去完成), 开发人员曾经要包裹每个盒子，他们希望在三个额外的

中加上圆角，并为这四个元素中的每个元素附加一个单独的圆角图形。 如果他们想要他们的盒子看起来灵动的，那就必须这么做。

注意: 你可能还必须这样做，如果你需要兼容旧的浏览器——border-radius 只支持Internet Explorer 9以上。但是缺少圆角不能阻止用户阅读你的内容，所以老浏览器的用户可以不用它们。

现在更容易了——您只需使用以下属性：

border-radius: 20px;

在不同的角落放置不同大小的边界半径, 您可以指定两个，三个或四个值, 就像您使用 paddingand margin一样:

/* 1st value is top left and bottom right corners,
   2nd value is top right and bottom left  */
border-radius: 20px 10px;
/* 1st value is top left corner, 2nd value is top right
   and bottom left, 3rd value is bottom right  */
border-radius: 20px 10px 50px;
/* top left, top right, bottom right, bottom left */
border-radius: 20px 10px 50px 0;

作为最后一点，您还可以创建椭圆形角（x半径与y半径不同）。两个不同的半径用正斜杠（/）分隔，您可以将其与值的任意组合组合。例如:

border-radius: 10px / 20px;
border-radius: 10px 30px / 20px 40px;

边界图像

最后，让我们看一下CSS中最新的(和复杂的)操作，用于操作边界—— border-image。这里的想法是，有时创建复杂的用户界面特性需要一个复杂的界面设计，而不仅仅是一个纯色。这可能是通过在另一个较大的元素的顶部覆盖一个元素，然后将背景图像应用到底部元素，伪造一个复杂的边界来创建的。或者在极端情况下，您甚至可能需要创建一个包含9个元素的3 x 3网格，其中的中心元素作为您的内容，以及周围的8个元素，将边界元素应用于它们。

border-image图像使实现复杂的图形边界变得容易得多，即使必须在现代浏览器中才能实现(Internet Explorer 11+支持它，以及其他现代浏览器)。让我们来看看它是如何工作的。

首先，您需要有一个映像应用到您的浏览器。这通常是3 x 3、4 x 4、5 x 5(等等)网格设计，如下所做的：

百度前端技术学院第四天--CSS2_第1张图片
image

当这样的图像用于边界图像时，浏览器将图像分割为8个部分，如下一个图像所示：

百度前端技术学院第四天--CSS2_第2张图片
image

这些角的图像会被插入到你的边界的角落里，而顶部、右边、底部和左边的部分将被用来填充你的边界的相应边(通过拉伸或重复)。我们需要告诉浏览器让这些片的大小正确——例如，这个图像是160px，还有一个4 x 4的网格，所以每个片都需要40px。

首先，我们需要一个盒子来应用边界。这需要指定一个边界，否则边界图像将没有显示的空间。我们还将使用background-clip，使任何背景色只填充内容和内边距的区域，并且不扩展到边界(您可能不希望这样做，但是在这样的情况下是有用的)。

border: 30px solid black;
background-clip: padding-box;

注意：您应该始终包括border定义，以及任何使用border-image——如果浏览器不支持该特性，则该操作可以作为一个回退，以防止边界图像无法显示。

接下来,我们将使用 border-image-source指定要使用的源图像作为边界图像。 它的工作原理和background-image一样，能够接受一个url()函数或一个渐变作为一个值。

border-image-source: url(border-image.png);

现在，我们将使用border-image-slice来设置所需大小的切片，如上所述：

border-image-slice: 40;

如果所有的片都是相同的大小，那么这个属性可以取一个值，如果需要不同的大小，则可以使用多个值，以相同的方式使用padding和margin：

  • 两个值:上和下，左和右。
  • 三个值:上、左和右、下。
  • 四个值:上、右、下、左。

如果图像是光栅图形（像 .png 或 .jpg），就用像素来解释这个数字。如果图像是矢量图形（比如，.svg），那么这个数字将被解释为图形中的坐标。也可以使用百分比（使用单位 %）。查看 border-image-slice页面，获得更多的选项和详细信息。

注意：默认情况下，第9部分的中间部分被完全省略，而元素内容出现在剩下的空白中。如果您想要的是边界图像的中心，您可以通过在您的border-image-source的末尾包含关键字fill，在这种情况下，它将扩展到适合背景区域。

最后，我们将使用border-image-repeat t来指定我们希望图像如何填充边界。选项是：

  • stretch：默认;侧面的图像被拉伸来填满边界。这通常看起来很糟糕和像素化，所以不推荐。
  • repeat：边图像被重复，直到边界被填满。根据具体情况，这可能看起来不错，但您可能会看到一些难看的图像片段。
  • round： 边的图像被重复，直到边界被填满，它们都被稍微拉伸，这样就不会出现碎片。
  • space：边图像被重复，直到边界被填满，每个拷贝之间添加了少量的间隔，这样就不会出现任何片段。这个值只在Safari(9+)和Internet Explorer(11+)中得到支持。

我们决定使用round的值，因为它看起来是最有用和最灵活的：

border-image-repeat: round;

把这些结合在一起

让我们将所有这些代码放在一起，以显示一个工作示例。首先,一些简单的HTML：


  
Border image

现在是我们的CSS：

div {
  width: 300px;
  padding: 20px;
  margin: 10px auto;
  line-height: 3;
  background-color: #f66;
  text-align: center;
  /* border-related properties */
  border: 20px solid black;
  background-clip: padding-box;
  border-image-source: url(https://mdn.mozillademos.org/files/13060/border-image.png);
  border-image-slice: 40;
  border-image-repeat: round;
}

其他属性

两个不常用的边界图像属性如下：

  • border-image-width：只调整边界图像，而不是边界——如果这个设置小于border-width，它会在边界的外面，而不是填满它。如果它更大，那么它就会扩展到边界之外，并开始重叠在内边距/内容上。
  • border-image-outset：定义边界内部和内边距之间的额外空间的大小——有点像“边界填充”。如果需要的话，这是一种简单的方法，可以将边界图像移出一点。

border-image，这允许您在一行中设置所有相关的值。见下面的代码行：

border-image-source: url(border-image.png);
border-image-slice: 40;
border-image-repeat: round;

可以被这一行取代：

border-image: url(border-image.png) 40 round;

三、样式列表

一个简单的例子

首先，让我们看一个简单的例子。文章中我们将看到无序，有序和描述列表——它们都具有相似的样式特性，而某些特性却又各不相同。Github上有未加载样式的例子（也可以查看源码。）

例子中列表的HTML代码如下：

Shopping (unordered) list



Paragraph for reference, paragraph for reference, paragraph for reference,
paragraph for reference, paragraph for reference, paragraph for reference.



    
  
  • Humous
    • 
  
  • Pitta
    • 
  
  • Green salad
    • 
  
  • Halloumi
    • 




Recipe (ordered) list



Paragraph for reference, paragraph for reference, paragraph for reference, 
paragraph for reference, paragraph for reference, paragraph for reference.



    
  
  1. Toast pitta, leave to cool, then slice down the edge.
    2. 
  
  2. Fry the halloumi in a shallow, non-stick pan, until browned on both sides.
    3. 
  
  3. Wash and chop the salad.
    4. 
  
  4. Fill pitta with salad, humous, and fried halloumi.
    5. 




Ingredient description list



Paragraph for reference, paragraph for reference, paragraph for reference, 
paragraph for reference, paragraph for reference, paragraph for reference.




  
Humous

  
A thick dip/sauce generally made from chick peas blended with tahini, lemon juice, salt, garlic, and other ingredients.

  
Pitta

  
A soft, slightly leavened flatbread.

  
Halloumi

  
A semi-hard, unripened, brined cheese with a higher-than-usual melting point, usually made from goat/sheep milk.

  
Green salad

  
That green healthy stuff that many of us just use to garnish kebabs.

现在，如果你去到例子的展示页面，并使用浏览器开发者工具查看那些列表元素，你会注意到若干个默认的样式预设值：