Web前端篇：css背景属性和边框属性，


  • 背景属性值
属性值 属性值 描述
background-color d单侧颜色法，RGB，十六进制 s设置元素的背景颜色
background-image url(“wy.png”) 给一个元素设置一个或多个背景图像
background-position top,left,center,百分比，px 为每一个背景图片设置初始位置
background-repreat repeat-x repeat-y
  • background-image设置背景图片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .bg{
            width: 400px;
            height: 400px;
            border:1px solid blue;
            background-image:url("wy.jpg")
        }
    </style>
</head>
<body>
    <div class="bg"></div>
</body>
</html>

  • background-repeat背景图像

    • 属性值：
    数值值 描述
    repeat 默认值。表示背景图水平和垂直方向都平铺
    no-repeat 表示背景图水平和处置方向都不平铺
    repeat-x 表示背景图只有水平方向上平铺
    repeat-y 表示背景图只有垂直方向上平铺

点击领取免费资料及课程

.bg{
    width: 1000px;
    height: 1000px;
    border:1px solid blue;
    background-image:url("sj6.jpg");
    background-repeat:repeat-x;/*沿着轴方向平铺*/
}

  • bacground-position背景图定位

    • 语法：

      background-position:x y;
background-position:position position

    • 取值

      关键字取值：
    top ,right,bottom,left,center
长度值取值：
    px,em
百分比：
    50%

    • 示例

      background-position:0 0;
/*左上角显示*/

      background-position:top right; /*背景图像在右上角*/

      background-position:top center; /*背景图像上方居中显示*/

      background-position:center center;/*背景图像居中显示*/
      • 设置长度单位：

      background-position:50px 100px;
      • 设置为负值：
      background-position:-20px -30px;

2.雪碧图

  • CSS雪碧图技术：即CSS Sprite,也有人叫它CSS精灵图，是一种图像拼合技术。该方法是将多个小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分。


点击领取免费资料及课程

  • 优点：
    • 有效的减少HTTP请求数量
    • 加速内容
  • 雪碧图的实现原理
    • 它通过css的背景属性的backrground-position的来控制雪碧图的显示。
    • 控制一个层，可显示的区域范围大消息，通过一个窗口，进行背景图的移动。

3.border-radius

  • 传统的圆角生成方案，必须使用多张图片作为背景图案。css3的出现，使得我们再也不必浪费时间去制作这些图片，并且还有其他多个优点：
    • 减少维护的工作量。图片文件的生成、更新、编写网页代码，这些工作都不再需要了。
    • 提高网页性能。由于不必再发出多条的HTTP请求，网页的载入速度将变快
    • 增加视觉可靠性。（网络拥堵、服务器出错、网速过慢等等），背景图片会下载失败，导致视觉效果不佳。CSS3就不会发生这种情况。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .bor-radius{
            width: 400px;
            height: 400px;
            border-radius:20px;
            background-color: red;
    }
    </style>

</head>
<body>
    <div class="bor-radius"></div>
</body>
</html>

  • 显示效果如下：

  • 单角设置：

    • border-top-left-radius

    • border-top-right-radius

    • border-bottom-right-radius

    • border-bottom-left-radius

    • 示例：

      border-bottom-left-radius：

  • border-radius效果实现一个无边框圆

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .cicle{
            width: 200px;
            height: 200px;
            background-color: red;
            border-radius:50%;
        }
    </style>

</head>
<body>
    <div class="cicle"></div>
</body>
</html>

  • 制作一半的圆

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .cicle{
            width: 200px;
            height: 100px;
            background-color: red;
            border-top-left-radius: 100px;
            border-top-right-radius: 100px;
        }
    </style>

</head>
<body>
    <div class="cicle"></div>
</body>
</html>


    点击领取免费资料及课程

4.盒子阴影

  • 通过box-shadow属性设置元素的阴影

  • 语法：

    box-shadow: h-shadow v-shadow blur color inset;
    值 描述
    h-shadow 必需。水平阴影的位置。允许负值
    v-shadow 必需。垂直阴影的位置。允许负值。
    blur 可选。模糊距离。
    color 可选。阴影的颜色。
    inset 可选。将外部阴影 (outset) 改为内部阴影。 
        .bg{
            width: 400px;
            height: 400px;
            border:1px solid blue;
            background-image:url("sj6.jpg");
            background-repeat:no-repeat;
            background-position:50px 100px;
            box-shadow:5px 5px 20px red;
        }

6.网页中规范和错误问题

  • css命名规范：

点击领取免费资料及课程

  • 项目目录规范：

  • 确定错误位置

    • 假如错误影响了整体布局，则可以逐个删除div块，直到删除某个div块后显示恢复正常，即可确定错误发生的位置。这样我们可以更精准的找到错误点，进行排错。

  • 是否重设了默认的样式?

    • 制作网页时，我们要清除掉默认的元素的padding和margin，使得我们更易去计算盒模型的大小。

相关内容

    暂无相关文章