CSS(三) 背景样式+边框样式

最新推荐文章于 2024-08-12 09:00:00 发布

MW0309

最新推荐文章于 2024-08-12 09:00:00 发布

阅读量204

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/qq_42222342/article/details/104511044

版权

CSS 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

CSS背景样式

    background-color背景色
    background-image背景图
        url（背景地址）
        默认：会水平垂直都铺满背景图
    background-repeat 平铺方式
        repeat-x x轴平铺
        repeat-y y轴平铺
        repeat（x，y都进行平铺，默认值）
         no-repeat都不平铺
    background-position：背景位置
        x y:number（px、%）| 单词
        x:left、center、right
        y:top、center、bottom
    background-attachment：背景图随滚动条移动的方式
        scrol：默认值（背景位置是按照当前元素进行偏移的）
        fixed（背景位置是按照浏览器进行偏移的）
    实践

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS背景样式</title>
    <style>
        div {
            width: 500px;
            height: 600px;
            background-color: red;
            background-image: url("img/gougou.jpg");
            /*  background-repeat: repeat-x;*/
            /*  background-repeat: repeat-y;*/
            background-repeat: no-repeat;
            /*background-position: 50% 50%;*/
            background-attachment: fixed;
        }
    </style>
</head>
<body>
<div>

</div>
</body>
</html>

效果图
在这里插入图片描述

小练习：利用滚动条移动方式实现视觉差网页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>视觉差</title>
    <style>
        #div1 {
            width: 1400px;
            height: 800px;
            background-image: url("img/one (1).jpg");
            background-attachment: fixed;
        }

        #div2 {
            width: 1400px;
            height: 800px;
            background-image: url("img/one (2).jpg");
            background-attachment: fixed;
        }

        #div3 {
            width: 1400px;
            height: 800px;
            background-image: url("img/one (3).jpg");
            background-attachment: fixed;
        }
    </style>
</head>
<body>
    <div id="div1">
        <h1>11111</h1>
    </div>
    <div id="div2">
        <h1>22222</h1>
    </div>
    <div id="div3">
        <h1>3333</h1>
    </div>
</body>
</html>

效果图
在这里插入图片描述

CSS边框样式

   border-style：边框样式
      solid：实线
      dashed：虚线
      dotted；点线
   border-width：边框大小
      px
   border-color：边框颜色
         red #fff ……
边框也可以针对某一天边进行单独设置：
border-left-style：中间是方向left、right、top、bottom

实践

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS边框样式</title>
    <style>
        /*div {
              width: 300px;
              height: 200px;
              border-style: solid;
              border-color: rebeccapurple;
              border-width: 1px
          }*/
        /*div {
            width: 300px;
            height: 200px;
            border-style:dashed;
            border-color: rebeccapurple;
            border-width: 1px
        }*/
        div{
            width: 300px;
            height: 200px;
            border-style:dashed;
            border-right-color: rebeccapurple;
            border-right-color: mediumvioletred;
            border-right-color: greenyellow;
            border-right-color: salmon;
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

效果图

在这里插入图片描述

小练习利用边框实现三角形

小知识点颜色透明：transparent

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS三角形</title>
    <style>
        div{
            width: 0px;
            height: 0px;
            border-top-width: 30px;
            border-top-style: solid;
            border-top-color: red;
            border-right-width: 30px;
            border-right-style: solid;
            border-right-color:transparent;
            border-left-width: 30px;
            border-left-style: solid;
            border-left-color: transparent;
            border-bottom-width: 30px;
            border-bottom-style: solid;
            border-bottom-color: transparent;
        }
    </style>
</head>
<body bgcolor="#adff2f">
<div></div>
</body>
</html>