12.8学习的内容

  关于border-radius 设置所有四个border-radius属性的简写属性。

 1.*同时设定四个角的属性;

 2.**分别设定左上 右下、左下 右上圆角

 3.***分别设定左上、左下 右上、右下的圆角

 4.****分别设定左上、右上、右下、左下的圆角

  border-top-left-radius 左上角的圆角边框

  border-top-right-radius右上角的圆角边框

  border-bottom-left-radius左下角的圆角边框

  border-bottom-right-radius右下角的圆角边框

 border-image 设置所有border-image属性的简写属性。

  border-image-source图像的来源路径

  border-image-slice边框背景图的分割方式   四个角分别是边框的四个角 中间的部分可以用fill的方式来表现  四个边的中间是边框的四个边

  border-image-width 边框的宽度

  border-image-outset 边框背景图的扩展(边框图像区域超出边框的量。)

  border-image-repeat 边框图像的平铺方式:stretch拉伸/repeat重复铺满/round重复铺满并对图片进行调整

 box-shadow 向方框添加一个或者多个阴影。

  none:无阴影

  box-shadow(阴影水平偏移值 / 阴影垂直偏移值 / 阴影模糊值 / 阴影外延值 / 阴影的颜色 / inset内阴影 (默认值为outset) )

  这些取值可以取负值。

background元素背景属性:

  background-attachment 背景图像是否固定或者随着页面的其余部分滚动。 scroll 默认值。/fixed 当页面的其余部分滚动时,背景图像不会移动。

  background-color 设置元素的背景颜色。

  background-image把图像设置为背景。

  background-position设置图像的起始位置

    left/ right /top/ bottom 这几个属性值可以两两组合使用,如果只规定了一个关键词,那么第二个值将是“center”。

    x% y%第一个值是水平位置,第二个值是垂直位置:左上角是0% 0%。 右下角是100% 100%;如果只规定了一个值 ,那么另一个值将默认为50%。

    x y 左上角是0 0 。单位是像素(0px 0px)或者任何其他的css的单位;同上如果只规定一个值,另一个值将是50%。

  background-repeat 设置背景图像是否及如何重复。repeat/ repeat-x / repeat-y /no-repeat。

  background-size:设置背景图片的大小

    1.可以用百分比/像素;

    2.cover:把背景图像扩展至足够大铺满整个背景,但是图像的宽高比不变,多出来的裁掉;

    3.contain:把图像扩展至最大,图像的宽高比不变,把整个图片显示出来即可,所有一般会留有空间。

  background-clip背景裁剪:

    border-box:背景被裁剪到边框;

    padding-box:背景被裁剪到内边距;

    content-box:背景被裁剪到内容;

  background-origin规定背景图片起点:

    padding-box 背景图像从内边距开始铺起

    border-box 背景图片从边框开始铺起

    content-box 背景图片从内容开始铺起

  关于对表格有关的属性:

    border-cellapse设置是否把表格边框合并为单一的边框。属性值:separate默认值/colleapse 边框合并

    border-spacing设置分隔单元格边框的距离。

    caption-side设置表格的标题的位置。属性值:top默认值,在表格之上。 bottom在表格之下。

    empty-cells设置是否显示表格中空的单元格。属性值:hide/show 默认

    table-layout 设置显示宽度是否随内容拉伸。属性值:auto默认/fixed列宽由表格宽度和列宽度设定。

  关于列表的属性:

    list-style简写属性。用于把所有用于列表的属性设置于一个声明中。

    list-style-type 设置列表项标志的类型。

      1.none无标记。 /disc默认为实心圆  /circle 标记为空心圆。 /square 标记为实心方块。

      2.decimal数字。/decimal-leading-zero 0开头的数字/ lower-rowan小写罗马数字   upper-rowan大写的罗马数字   /lower-alpha 小写的英文字母 /upper-alpha大写英文字母。

      3.还有其他日文拉丁文等等 可以看css参考手册。

    list-style-position设置列表项标志的位置。属性值:inside/outside默认值

    list-style-image将图像设置为列表项标志。属性值:URL 图像的路径。 /none默认。无图形显示。

原文地址:https://www.cnblogs.com/l8l8/p/8007467.html