CSS基础学习笔记（二）背景与边框

背景样式

• background-color
  定义了CSS中任何元素的背景颜色
  color:black,red,white;
color:rbg(255,0,0);
color:rgba();
color:#ffffff;
• background-image
  允许在元素的背景中显示图像
  background-image: url(star.png);
  渐变效果：
  线性梯度：background-image: linear-gradient(100deg, rgba(0,249,255,1) 39%, rgba(51,56,57,1) 96%);
  径向梯度：background-image: radial-gradient(circle, rgba(0,249,255,1) 39%, rgba(51,56,57,1) 96%);
• background-repeat

名称	含义
no-repeat	不重复
repeat-x	水平重复
repeat-y	垂直重复
repeat	在两个方向重复

• background-size
  设置长度或百分比值，来调整图像的大小以适应背景。
  background-size: 100px 10px;

名称	含义
cover	浏览器将使图像足够大，使它完全覆盖了盒子区，同时仍然保持其高宽比。在这种情况下，有些图像可能会跳出盒子外
contain	浏览器将使图像的大小适合盒子内。在这种情况下，如果图像的长宽比与盒子的长宽比不同，则可能在图像的任何一边或顶部和底部出现间隙

• background-position
  允许您选择背景图像显示在其应用到的盒子中的位置。它使用的坐标系中，框的左上角是(0,0)，框沿着水平(x)和垂直(y)轴定位。
  使用关键字：background-position: top center;
  使用长度值、百分比：background-position: 20px 10%;
  混合使用：background-position: top 20px;
  使用4-value语法：background-position: top 20px right 10px;

默认的背景位置值是(0,0)

边框

• border-width
  细粒度的属性：border-top-width
• border-style
  细粒度的属性：border-top-style
• border-color
  细粒度的属性：border-top-color
• 简写
  border-top: 1px solid black;：分别是width、style、color
• border-radius
  细粒度的属性：border-top-right-radius