前端笔记九,背景边框和补丁相关属性

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端笔记九,背景边框和补丁相关属性相关的知识,希望对你有一定的参考价值。

常用的背景相关属性:以下属性均在style内设置

background:设置对象的背景样式,不建议直接通过该属性来控制
background-attachment:设置背景图片是随对象内容滚动还是固定的,可选值:
  scroll:会随内容的滚动而滚动
  fixed:背景图片固定
background-color:设置背景色,如果设置了背景图片则会覆盖背景色
background-image:设置背景图片,使用url()函数
background-position:设置对象的背景图片的位置,第一个表示横坐标,第二个表示纵坐标
background-repeat:设置背景图片是否平铺,可选值:
  repeat:平铺
  no-repeat:不平铺
  repeat-x:仅横向平铺
  repeat-y:仅纵向平铺
background-clip:设置背景覆盖的范围,支持如下属性值
border-box:指定背景覆盖边框区(border)、内补丁区(padding)、内容区(content)。
no-clip:指定背景覆盖边框区(border)、内补丁区(padding)、内容区(content)。
padding-box:指定背景覆盖内补丁区(padding)、内容区(content)。
content-box:指定背景只覆盖内容区(content)。
background-origin:设置背景覆盖的起点,类似之前的background-position,可选的属性值
  border:指定背景图片从边框区开始覆盖
  padding:指定背景图片从内补丁区开始覆盖
  content:指定背景图片从内容区开始覆盖
background-size:设置背景图片的大小,两个值分别表示图片的宽度和高度,可用值:
  数值:例如20pt,直接表示大小
  百分比,例如80%,表示占它所在组件的宽或高的百分比
  auto:指定背景图片保持纵横比进行缩放
background-origin和background-size在Safari、Chrome中使用时,如果不读,则可以在前面添加 -webkit- 
指定多个背景图片时,每个属性都需要指定多个,中间用逗号隔开
 
边框相关属性
border:复合属性,可以同时设置边框的粗细,线型,颜色等
border-color:设置边框的颜色
  提供4个值,则分别表示上、右、下、左四个边框的颜色
  提供3个值,则分别表示上、左右、下三个边框的颜色
  提供2个值,则分别表示上下、左右边框的颜色
  提供1个值,则表示上下左右共同的颜色
border-style:设置组件的边框线型,值的数量与上同理
border-width:设置边框的线宽,值的数量与上同理
border-top:复合属性,设置上边框的样式
  border-top-color:设置上边框的颜色
  border-top-style:设置上边框的样式
  border-top-width:设置上边框的线宽
上边的top换成left、right、bottom分别表示左边框的,右边框的,下边框的
其中,边框颜色可以是任何有效的颜色值,线宽可以是任何有效的长度值,线性可以支持以下值:
  none:无边框
  hidden:隐藏边框
  dotted:点线边框
  dashed:虚线边框
  solid:实线边框
  double:双线边框
  groove:3D凹槽边框
  ridge:3D凸槽边框
  inset:3D凹入边框
  outset:3D凸出边框
 
渐变边框
border-top-colors:设置上边框的颜色,如果上边框的宽度为Npx,则可以设置N种颜色;如果颜色数量小于N,则最后一种颜色会覆盖剩下的宽度
border-right-colors,border-bottom-colors,border-left-colors同理
博主备注:这个渐变边框在实际代码中没有实现
 
圆角边框
border-radius:设置四个角的圆角半径
border-top-left-radius:设置左上角的圆角半径
border-top-right-radius,border-bottom-left-radius,border-bottom-right-radius同理
 
图片边框
border-image:遵循的格式:
<border-image-source> <border-image-slice>[/<border-image-width>]?<border-image-repeat>
其中,
  border-image-source:指定边框图片,可以是none或者url()指定的图片
  border-image-slice:指定1~4个数值或者百分比表示如何对边框图片进行分割。比如10 20 30 40则表示距离上 右 下 左边框的距离分别为10px 20px 30px 40px且与对应的边框平行的切割线联合切割,将中间的图片进行舍弃,其他部分作为边框,除非在第四个数值后面添加了&&fill
  border-image-width:指定图片宽度,四个值
  border-image-repeat:设置边框图片的覆盖方式,支持stretch,repeat,round三种,分别表示拉伸覆盖,平铺覆盖,取整平铺三种
 
补丁相关属性
内补丁相关属性:
padding:可以设置4个数值,分别表示上下左右四个边的内部定距离;设置3、2、1个数值与之前对应关系相同
padding-top:设置上边的内补丁距离
padding-bottom,padding-left,padding-right同理
 
外补丁相关属性:
margin:设置外补丁距离,对应关系与padding一致
margin-top,margin-bottom,margin-left,margin-right同理

以上是关于前端笔记九,背景边框和补丁相关属性的主要内容,如果未能解决你的问题,请参考以下文章

前端1-----CSS颜色属性,字体文本和背景属性,边框属性,margin和padding,盒模型,行内块转换,浮动,三大定位

前端CSS基础学习边框与背景

前端CSS基础学习边框与背景

前端CSS基础学习边框与背景

Web前端开发笔记——第三章 CSS语言 第三节 文本字体背景超链接样式属性

CSS3:元素的边框背景和大小