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

常用的背景相关属性:以下属性均在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同理

时间: 2024-10-12 19:58:01

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

css中的背景、边框、补丁相关属性

关于背景涉及到背景颜色与背景图片 背景颜色background-color即可设定: 背景图片background-image即可设定: 但是背景图片还涉及到其他的一些内容: background-attachment:用于设定背景图片是滚动的还是固定的,可以设定为scroll和fixed两种: background-position:用于设定背景图片的位置,可以设定为实际值,也可设定为百分比: background-repeat用于设定背景图片是否平铺,可以是纵向的也可以是横向的: css3新

前端笔记十三,变形与动画相关属性

transform transform:设置变形:需添加浏览器前缀-o-;-webkit-;-moz-等:有如下变形函数 translate(tx [,ty]):组件横向上移tx,纵向上移ty距离 translateX(tx):组件横向上移动tx距离 translateY(ty):组件纵向上移动ty距离 scale(sx,sy):横向上缩放比例为sx,纵向上缩放比例为sy:sy省略情况下默认等于sx scaleX(sx):只在横向上进行缩放,缩放比例为sx scaleY(sy):只在纵向上进行缩

css3背景、边框、和补丁相关属性 (二)

背景 background : background-color || background-image || background-repeat || background-attachment || background-position 默认值为:transparent none repeat scroll 0% 0%. 设置对象的背景样式.如使用该复合属性定义其单个参数,则其他参数的默认值将无条件覆盖各自对应的单个属性设置.例如: 设置 background : white 等于设置 b

css3背景、边框、和补丁相关属性

border :基本语法 border: border-width || border-style || border-color 默认值为: medium none . border-color 的默认值将采用文本颜色 相关属性: border-top,border-left,border-right,border-bottom:它们分别对边框的某个方向起作用,语法基本与border相同 border-bottom-color,border-top-color,border-bottom-co

前端入门之CCS 2 选择器优先级,调节标签样式,字体属性,文本属性,背景, 边框,画圆,display属性,盒子模型,浮动(clear属性),溢出属性,定位,z-index,透明度

选择器的优先级问题 1.选择器相同 就近原则 2.选择器不同 行内 > id选择器 > 类选择器 > 标签选择器 除此之外还可以通过添加 !important方式来强制让样式生效,但并不推荐使用.因为如果过多的使用!important会使样式文件混乱不易维护. 万不得已可以使用!important <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8

前端笔记十,大小、定位、轮廓相关属性

大小相关属性 height:用于设置对象的高度 max-height:设置对象的最大高度,如果该属性值小于min-height属性值,则自动转换为min-height的属性值 min-height:设置对象的最小高度 width:设置对象宽度 max-width:设置对象的最大宽度 min-width:设置对象的最小宽度 box-sizing属性:设置width,height控制哪些区域的宽度.高度:可使用值 content-box:设置的width,height控制元素的内容区的宽度和高度(只

前端笔记十一,盒模型与布局相关属性

布局相关属性  float:控制目标组件是否浮动以及如何浮动,设置浮动后,该组件被当做块组件处理,即相当于display属性为block:可选的属性值 left:指定对象向左浮动 right:指定对象向右浮动 clear:设置组件的左.右是否哪边不允许出现浮动对象.可选属性值: none:默认值,两边都允许出现浮动组件 left:不允许左边出现浮动组件 right:不允许右边出现浮动组件 both:两边都不允许出现浮动组件 clip:控制对元素进行裁剪 auto:不裁剪 rect(a,b,c,d

老男孩培训视频听课笔记九(在51cto上听的)--5.8 64bit 基础优化

定时清理clientmqueue目录垃圾文件防止占满磁盘空间: /var/spool/clientmqueue  --这个目录会自动创建很多的文件,可以用下面的命令来清理 find /var/spool/clientmqueue/ –type  f | xargs rm –fr mkdir /server/scripts –p vim del.sh: find /var/spool/clientmqueue/ –type  f | xargs rm –fr crontab -e */5 * *

【转载】前端面试“http全过程”将所有HTTP相关知识抛出来了...

原文:前端面试“http全过程”将所有HTTP相关知识抛出来了... 来一篇串通,一个http全过程的问题,把所有HTTP相关知识点都带过一遍 http全过程 输入域名(url)-->DNS映射为IP-->TCP三次握手-->HTTP请求-->HTTP响应-->(浏览器跟踪重定向地址)-->服务器处理请求-->服务器返回一个html响应-->(视情况决定释放TCP连接)-->客户端解析HTML-->获取嵌入在HTML中的对象重新发起http请求