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>
  • 显示效果如下:

    image

  • 单角设置:

    • border-top-left-radius

    • border-top-right-radius

    • border-bottom-right-radius

    • border-bottom-left-radius

    • 示例:

      border-bottom-left-radius:
      

      image

  • 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,使得我们更易去计算盒模型的大小。
展开阅读全文

没有更多推荐了,返回首页