CSS-day03

最新推荐文章于 2024-07-20 21:01:09 发布

2201_75449897

最新推荐文章于 2024-07-20 21:01:09 发布

阅读量56

点赞数 1

文章标签： css 前端

本文链接：https://blog.csdn.net/2201_75449897/article/details/140570347

版权

01-边框线

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 0px;
            height: 0px;
            /* background-color: pink; */
            /* border: 5px dashed green; */
            /* 边框线   宽度  样式  颜色*/
            /* border-width: 100px; */
            /* 边框线的粗细程度 */
            /* border-style: solid; */
            /* 边框线的样式 */
            /* border-color: green; */
            /* 边框线的颜色 */
            /* border-top: 15px solid red; */
            /* 上边框线  实线 */
            /* border-left: 1px double blue; */
            /* 左边框线  双实线 */
            /* border-right: 20px dotted green; */
            /* 右边框线  点线 */
            /* border-bottom: 60px dashed pink; */
            /* 下边框线  虚线 */
            /* border: 200px solid red; */
            border-top: 200px solid rgba(0, 0, 255, 0);
            border-left: 200px solid red;
            border-right: 200px solid rgba(0, 128, 0, 0);
            border-bottom: 200px solid rgba(255, 255, 0, 0);
            /* 边框的三角形原理 */
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>

02-圆角边框

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            border: 1px solid red;
            /* border-radius: 100px; */
            /* border-radius: 10px 20px 30px 40px; */
            /* 顺时针  从左上角开始*/
            /* 让四个角都是50px */
            /* border-radius: 50%; */
            border-radius: 0 100% 0 100%;
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>

03-小风车

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 405px;
            height: 405px;
        }
        
        .box_tl,
        .box_tr,
        .box_br,
        .box_bl {
            width: 200px;
            height: 200px;
            display: inline-block;
            background-color: green;
        }
        
        .box_tl,
        .box_br {
            border-radius: 0 100% 0 100%;
        }
        
        .box_tr,
        .box_bl {
            border-radius: 100% 0 100% 0;
        }
    </style>
</head>

<body>
    <!-- <div>
        <div>
            <div></div>
            <div></div>
        </div>
        <div>
            <div></div>
            <div></div>
        </div>
    </div> -->


    <!-- <div></div>
    <div></div> <br>
    <div></div>
    <div></div> -->

    <!-- <div></div>
    <div></div>
    <div></div>
    <div></div> -->

    <div class="box">
        <div class="box_tl"></div>
        <div class="box_tr"></div>
        <div class="box_bl"></div>
        <div class="box_br"></div>
    </div>
</body>

</html>

04-内边距

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 150px;
            height: 150px;
            border: 1px solid red;
            padding: 50px 0 0 50px;
            /* 上下左右 */
            /* padding: 10px 60px 170px 280px; */
            /* 上   右   下  左  顺时针方向 */
            /* padding: 10px 100px 500px; */
            /* 上  左右  下 */
            /* padding: 100px 500px; */
            /* 上下  左右 */
            /* padding-bottom: 50px;
            padding-right: 60px;
            padding-left: 190px;
            padding-top: 100px; */
            /* 内边距  边框线到内容之间的距离 */
            /* 内边距 会改变盒子的大小 */
            /* 盒子的大小 = 内容 + 内边距 + 边框线 */
            /* 改变内容在盒子中的位置 */
            /* 如果想要在不改变盒子大小的前提下 添加内边距 只能减去对应的内容大小 */
        }
    </style>
</head>

<body>
    <div class="box">今天是7月8日，欢迎外地的朋友来看海，请你免费游泳，尝一尝海水的咸淡。</div>
</body>

05-外边距

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            /* 清楚页面的默认内外边距 */
        }
        
        .box {
            width: 300px;
            height: 300px;
            border: 1px solid red;
            margin: 100px;
            display: inline-block;
            /* 上下左右 */
            /* 外边距不会影响盒子的大小，只会影响盒子的位置 */
            /* 但是外边距会占据页面的位置 */
            /* margin: 10px 20px 30px 40px; */
            /* 上   右   下  左  顺时针方向 */
            /* margin: 10px 100px 500px; */
            /* 上  左右  下 */
            /* margin: 100px 500px; */
            /* 上下  左右 */
        }
        
        .bigbox {
            width: 600px;
            height: 599px;
            background-color: green;
            /* border-top: 1px solid green; */
            padding-top: 1px;
        }
        
        .smbox {
            width: 300px;
            height: 300px;
            background-color: pink;
            /* display: inline-block; */
            margin: 150px auto;
        }
    </style>
</head>

<body>
    <div class="bigbox">
        <div class="smbox"></div>
    </div>
    <!-- <div class="box">今天是7月8日，欢迎外地的朋友来看海，请你免费游泳，尝一尝海水的咸淡。</div> -->
    <!-- <div class="smbox">1</div> -->
    <p>这人是一个大好人</p>
    <ul>
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
    </ul>
</body>

</html>