CSS之背景样式及边框样式

1、背景样式

  • 常用属性:
    • background-color:背景颜色
    • background-image:背景图片
    • background-repeat:背景图片的平铺方式
    • background-position:背景图片的位置
    • background-attachment:背景图随滚动条的移动方式
  • 代码
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS背景样式title>
    <style>
        #div1{background-color: rgb(234, 22, 22); height: 100px; width: 200px;}
        #div2{background-color:aqua ; background-image : url(./dog.jpg); height: 300px; width: 300px;}
        #div3{background-color:rgb(132, 255, 0) ; background-image : url(./dog.jpg); height: 300px; width: 300px; background-repeat: repeat-x;}
        #div4{background-color:rgb(255, 255, 0) ; background-image : url(./dog.jpg); height: 300px; width: 300px; background-repeat: repeat-y;}
        #div5{background-color:rgb(255, 0, 255) ; background-image : url(./dog.jpg); height: 300px; width: 300px; background-repeat: no-repeat;}
    style>
head>
<body>
    <h2>测试容器1,颜色填充:h2>
    <div id="div1">div>
    <h2>测试容器2,图片填充,背景默认填充:h2>
    <div id="div2">div>
    <h2>测试容器2,图片填充,背景repeat-x填充h2>
    <div id="div3">div>
    <h2>测试容器2,图片填充,背景repeat-y填充h2>
    <div id="div4">div>
    <h2>测试容器2,图片填充,背景no-repeat填充h2>
    <div id="div5">div>
body>
html>
  • 结果展示
    CSS之背景样式及边框样式_第1张图片

2、滚动背景样式

  • 属性说明:
    • 背景图片默认属性:background-attachment: scroll
    • 滚动背景图片设置属性:background-attachment: fixed
  • 代码展示
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>滚动背景样式title>
    <style>
        body{height: 2000px;}  /* 没有设置body大小,显示不出来 */
        #div1{background-image: url(./2.jpg); height: 50%; width: 100%; background-attachment: fixed;}/* 这里高和宽都也可以用px来设定 */
        #div2{background-image: url(./3.jpg); height: 50%; width: 100%; background-attachment: fixed;}/* 这里高和宽都也可以用px来设定 */
    style>
head>
<body>
    <div id="div1">div>
    <div id="div2">div>
body>
html>
  • 结果展示

3、边框样式

  • border-style:边框的样式
  • border-width:边框的大小
  • border-color:边框的颜色
  • 针对一条边也可以单独设置
  • 代码
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>边框样式title>
    <style>
        body{background-color: green;}
        #d1{height: 100px;width: 100px;border-color:red;border-top-style: dashed;border-bottom-style: dotted;border-right-style: double;border-left-style: solid;border-width: 3px;}
        #d2{height: 100px;width: 100px;border-color:rgb(255, 0, 251);border-style: dotted; border-width: 3px;}
        #d3{height: 100px;width: 100px;border-top-style: dashed;border-bottom-style: dotted;border-right-style: double;border-left-style: solid;border-width: 3px;border-top-color: aqua;
        border-bottom-color:blue;border-right-color: blueviolet;border-left-color: black;}
        #d4{height: 0px; width: 0px; /* 这里的宽高是指对于模块内部宽高,做三角型的话,这里宽高设置为0 */
            border-top-color: red;
            border-top-width: 30px;
            border-top-style: solid;
            border-bottom-color: transparent;/* transparent是透明色,这样设置不论网页背景是什么颜色,都可以隐藏不需要显式的边 */
            border-bottom-width: 30px;
            border-bottom-style: solid;
            border-right-color: transparent;
            border-right-width: 30px;
            border-right-style: solid;
            border-left-color: transparent;
            border-left-width: 30px;
            border-left-style: solid;}
        #d5{height: 0px; width: 0px; /* 这里的宽高是指对于模块内部宽高,做三角型的话,这里宽高设置为0 */
            border-top-color: transparent;
            border-top-width: 30px;
            border-top-style: solid;
            border-bottom-color: red;
            border-bottom-width: 30px;
            border-bottom-style: solid;
            border-right-color: transparent;
            border-right-width: 30px;
            border-right-style: solid;
            border-left-color: transparent;
            border-left-width: 30px;
            border-left-style: solid;}   
    style>
head>
<body>
    <h2>设置第一种边框样式:给每条边都设置样式h2>
    <div id="d1">div>
    <h2>设置第二种边框样式:整体边框设计h2>
    <div id="d2">div>
    <h2>设置第三种边框样式:给每条边设置颜色h2>
    <div id="d3">div>
    <h2>通过边框做一个向下的三角形:h2>
    <div id="d4">div>
    <h2>通过边框做一个向上的三角形:h2>
    <div id="d5">div>
body>
html>
  • 结果展示
    CSS之背景样式及边框样式_第2张图片

总结:

  • 背景设置可以指定对应模块,也可以给真个页面都设置,要注意style和对应div关联方式是通过#和id来关联相同关键字
  • 边框设置要注意边框样式、边框宽度、边框颜色的基础设置

你可能感兴趣的:(web前端,css,css3,html)