CSS背景制作

最新推荐文章于 2024-08-25 07:11:13 发布

原创最新推荐文章于 2024-08-25 07:11:13 发布 · 584 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #javascript

1.background-color

<style>
        .box {
            width: 200px;/*w100*/
            height: 200px;/*h100*/
            background-color: mediumpurple;
        }
        .box1 {
            width: 100px;
            height: 100px;
            background-color: #ccc;
            position:absolute;
            left:8px;
            top: 8px;
        }
        .box2 {
            width: 300px;
            height: 300px;
            /*rgb()中需要写数字，数字的范围在~255之间，值越小颜色越深*/
            background-color: rgb(255,200,200);
            position:absolute;
        }
        .box3 {
            width: 100px;
            height: 100px;
            /*rgba()中最后一个值表示透明度，范围在0~1之间，0表示完全透明，1表示完全不透明*/
            background-color:rgba(0,255,255,0.5);
            position:absolute;
            left:
            top:
        }
    </style>
</head>
<body>
<div class="box"></div>
<div class="box1"></div><!--div.box1-->
<div class="box2"></div>
<div class="box3"></div>
</body>

2.background-picture

 <style>
        .box {
            width: 1000px;
            height: 1000px;
            border:1px dotted #000000;
           /* 设置背景图片*/
            background-image: url("images/肖战.jpg");
            background-repeat: no-repeat;
          /*  background-position:right top;*/
            background-position:10px 20px;
         /*   background: gray url("images/肖战.jpg") no-repeat center center;*/
        }
    </style>
</head>
<body>
<!--
通过样式来设置背景图片时，需要使用background-image属性来设置，而图片的路径需要写在url()中
但是，默认情况下，背景图片如果没有容器大的话，那么它会把背景图平铺后展示
对于背景图的处理，我们有以下几种方式：
1.np-rapeat:不平铺
2.rapeat-x:x轴方向平铺
3.rapeat-y:y轴方向平铺
4.repeat:x轴和y轴方向都平铺（默认方式）
要想设置面的值，我们需要另外的属性叫background-rapeat

背景图在容器中间：
需要使用 background-position属性来指定，它通过坐标来设置，有以下几种属性：
1.left top:左上角（默认）
2.right top:右上角
3.left bottom:左下角
4.right bottom:右下角
5.left center:左中
6.right center:右中
7.center center:居中

以上这些属性，我们可以使用background来统一指定，它的语法格式为：
background: color position size repeat origin clip attachment image;
-->
<div class="box"></div>
</body>

3.边框

  <style>
        .box {
            width: 100px;
            height: 100px;
            background:#cccccc;
            /*设置左边框的颜色*/
            border-left-color:blue;
            /*s=设置左边框的样式：solid实线,dotted小圆点构成的线*/
            border-left-style: dotted;
            /*粗细（宽度）*/
            border-left-width:2px;
            border-top-color:deepskyblue;
        }
    </style>
</head>
<body>
<!--
指定边框可以使用 border-left/top/right/bottom-color来设置颜色
              border-left/top/right/bottom-style来设置颜色
              border-left/top/right/bottom-width来设置颜色

在实际开发中，我们使用 border 属性来统一指定即可
语法格式为：
border: 线的宽度 线的样式 线的颜色
上面这种方式指定的话有一个缺点：四个边的宽度，样式和颜色都是相同的
-->
<div class="box"></div>
</body>

4.内边距

 <style>
        .box {
            width: 200px;
            /*height: 200px;*/
            border:1px solid black;
            padding-left:20px;
            /*左内边距*/
            padding-top: 20px;
            padding-right:20px;
            padding-bottom: 20px;
        }
    </style>
</head>
<body>
<!--内边距：
容器中内容和内容边线的距离
内边距是使用padding属性来设置的
-左边：padding-left
-上边：padding-top
-右边：padding-right
-下边：padding-bottom

可以使用padding属性来设置这四个边距，
1.设置四个值：上 右 下 左!!!!
2.设置三个值：上 左右 下
3.设置两个值：上下 左右
5.设置一个值：上右下左的值都是一样
-->
<div class="box">陈情令陈情令陈情令陈情令陈情令陈情令陈情令</div>
</body>

5.外边距

  <style>
        .box {
            width: 400px;
            height: 200px;
            border:1px blueviolet solid;
        }
        .xz {
            width: 100px;
            height: 100px;
            border:1px greenyellow solid;
            margin-left:20px;
            margin-top:20px;
        }
    </style>
</head>
<body>
外边距：
容器与另一个容器之间的距离
外边距使用 margin 属性，它的使用和语法格式与 padding 相同
- margin-left:左边距
- margin-top:上边距
- margin-right:右边距
- margin-bottom:下边距

仍然可以使用margin来指定
1.设置四个值：上 右 下 左!!!!
2.设置三个值：上 左右 下
3.设置两个值：上下 左右
5.设置一个值：上右下左的值都是一样

6.阴影

<style>
        .xz {
            width: 100px;
            height: 100px;
            background: deepskyblue;
        }
    </style>
</head>
<body>
<!--
定义阴影效果使用 box-shadow 属性，语法格式：
box-shadow: h-shadow v-shadow blur spread color position;
- h-shadow :必需 水平阴影的位置，允许负值
- v-shadow :必需 垂直阴影的位置，允许负值
- blur :可选 模糊距离
- spread :可选 阴影尺寸
- color ：颜色，参考 css颜色值
- position :可选 ，将外部阴影（outset）改为内部阴影。默认为inset
-->
<div class="xz"></div>
</body>

7.圆角

<style>
        .xz {
            width:100px;
            height: 100px;
            background:blueviolet;
            /*border-radius: 10px;*/
            /*border-radius:50%;!*圆*!*/
            /*border-radius: 10px 20px 30px 40px;*/

        }
    </style>
</head>
<body>
<div class="xz"></div>
</body>