背景与边框—CSS学习笔记

龙二_
189 阅读5分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第7天，点击查看活动详情

前言

背景和边框是页面效果改善的有效因素，巧妙地运用他们是处理许多样式问题的答案。

CSS背景

CSS背景样式

  1. background-color 该属性定义CSS中任何元素的背景颜色，定义的区域包含内容及内边距区域，接受任何颜色值

    background-color: #365689;//16进制颜色值
background-color: black;  //语义颜色值
background-color: rgba(255,255,255,.5);  //rgba颜色值

  2. background-image 该属性定义CSS中元素的背景图像或渐变背景

    如果除了背景图像外，还指定了背景颜色，则图像将显示在颜色的顶部。

    background-image: url(xxx);   //xxx指图片url
background-image: linear-gradient(105deg,rgba(0,249,255,1) 39%, rgba(51,56,57,1) 96%);    //定义径向渐变

  3. background-repeat 该属性用于控制图像的平铺行为

  • no-repeat — 不重复。
  • repeat-x —水平重复。
  • repeat-y —垂直重复。
  • repeat — 在两个方向重复。

4.background-size 该属性用于控制图像的大小

  • 关键字，例如cover为保持宽高比完全覆盖盒子故会有图像跳出盒子外contain为将使图像的大小适合盒子内。在这种情况下，如果图像的长宽 比与盒子的长宽比不同，则可能在图像的任何一边或顶部和底部出现间隙。
  • 长度，接受x、y两个方向上的值，例如100px,100px
  • 百分比，接受x、y两个方向上的值，例如100%,100%

5.background-position

该属性允许您选择背景图像显示在其应用到的盒子中的位置，有两个值，对应坐标系中的x与y。是background-position-x和background-position-y的简写属性

  • background-position-x:值可为长度值、百分比、或者关键字top、left等
  • background-position-y同上
  1. background-attachment

该属性定义在页面滚动时背景的滚动方式

  • scroll: 使元素的背景在页面滚动时滚动。如果滚动了元素内容，则背景不会移动。实际上，背景被固定在页面的相同位置，所以它会随着页面的滚动而滚动。
  • fixed: 使元素的背景固定在视图端口上，这样当页面或元素内容滚动时，它就不会滚动。它将始终保持在屏幕上相同的位置。
  • local: 这个值是后来添加的 (它只在 Internet Explorer 9+中受支持，而其他的在 IE4+中受支持)，因为滚动值相当混乱，在很多情况下并不能真正实现您想要的功能。局部值将背景固定在设置的元素上，因此当您滚动元素时，背景也随之滚动。

使用background简写

如果使用多个背景，则需要为第一个背景指定所有普通属性，然后在逗号后面添加下一个背景。在下面的例子中，我们有一个渐变，它指定大小和位置，然后是一个无重复的图像背景，它指定位置，然后是一个颜色。

这里有一些规则，需要在简写背景属性时遵循，例如：

  • background-color 只能在逗号之后指定。
  • background-size 值只能包含在背景位置之后，用'/'字符分隔x与y，例如：center/80%。
background:   
linear-gradient(105deg, rgba(255,255,255,.2) 39%, rgba(51,56,57,1) 96%) center center / 400px 200px no-repeat,
url(big-star.png) center no-repeat,

CSS边框

  1. border-width 定义边框的宽度
  • 关键字，thin、medium、thick
  • 长度值，一个值设置四个方向的边框宽度，四个值分别设置上右下左

2.border-style 定义边框的样式

none和关键字 hidden 类似，不显示边框。在这种情况下，如果没有设定背景图片，border-width计算后的值将是 0，即使先前已经指定过它的值。在单元格边框重叠情况下，none 值优先级最低，意味着如果存在其他的重叠边框，则会显示为那个边框。
hidden和关键字 none 类似，不显示边框。在这种情况下，如果没有设定背景图片，border-width 计算后的值将是 0，即使先前已经指定过它的值。在单元格边框重叠情况下，hidden 值优先级最高，意味着如果存在其他的重叠边框，边框不会显示。
dotted显示为一系列圆点。圆点半径是 border-width计算值的一半。
dashed显示为一系列短的方形虚线。标准中没有定义线段的长度和大小，视不同实现而定。
solid显示为一条实线。
double显示为一条双实线，宽度是 border-width。
groove显示为有雕刻效果的边框，样式与 ridge 相反。
ridge显示为有浮雕效果的边框，样式与 groove 相反。
inset显示为有陷入效果的边框
outset显示为有突出效果的边框

3.border-color

与background-color一样设置颜色值

4.border-radius

该属性为简写属性，可通过长度值与百分比通过设置四个边的边框，如

  • border-top-left-radius: 0
  • border-top-right-radius: 0
  • border-bottom-right-radius 0
  • border-bottom-left-radius: 0

使用border简写

可以使用 border为一个框的所有四个边设置边框，例如

.box {
  border: 1px solid black;
}

总结

以上就是关于背景与边框的所有内容了，大家可以尝试下用它们修改默认的样式。

avatar
文章
阅读
粉丝