Day3

一、Padding

1、填充快捷方式

代码：

<style>
 .myDiv {
 padding: 25px 50px 75px 100px; /* top right bottom left; */这里的数值排序和margin一样，顶部 右边 底部 左边 其中顶部和底部绑定在一起，右边和左边绑定在一起
 }
</style>
<div class="myDiv"></div>

实现：绿色区域为padding

 2、在给一侧填充物

<style>
.myClass {
 padding-top: 5px;
}
</style>

二、Border——边框

1、圆角

代码：

<head>
    <meta charset="utf-8">
    <style>
        .box {
            width: 250px;
            height: 250px;
            background-color: black;
            border-radius: 10px;
        }
    </style>
    <div class="myDiv"></div>
    </style>
</head>

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

实现：

 

如果将border-radius后面的距离值改为百分制，图像就会变成一个圆。

如果宽度和高度属性不相等，则生成的形状将是一个椭圆形，而不是一个圆形。浏览器特定的边界半径示例：
 -webkit-border-top-right-radius: 4px;
 -webkit-border-bottom-right-radius: 4px;
 -webkit-border-bottom-left-radius: 0;
 -webkit-border-top-left-radius: 0;
 -moz-border-radius-topright: 4px;
 -moz-border-radius-bottomright: 4px;
 -moz-border-radius-bottomleft: 0;
 -moz-border-radius-topleft: 0;
 border-top-right-radius: 4px;
 border-bottom-right-radius: 4px;
 border-bottom-left-radius: 0;
 border-top-left-radius: 0;

2、边框式

代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
p.none {border-style:none;}
p.dotted {border-style:dotted;}
p.dashed {border-style:dashed;}
p.solid {border-style:solid;}
p.double {border-style:double;}
p.groove {border-style:groove;}
p.ridge {border-style:ridge;}
p.inset {border-style:inset;}
p.outset {border-style:outset;}
p.hidden {border-style:hidden;}
p.mix {border-style: dotted dashed solid double;}
</style>
</head>

<body>
<p class="none">无边框。</p>
<p class="dotted">虚线边框。</p>
<p class="dashed">虚线边框。</p>
<p class="solid">实线边框。</p>
<p class="double">双边框。</p>
<p class="groove"> 凹槽边框。</p>
<p class="ridge">垄状边框。</p>
<p class="inset">嵌入边框。</p>
<p class="outset">外凸边框。</p>
<p class="hidden">隐藏边框。</p>
<p class="mix">混合边框</p>
</body>

</html>

实例：

 3、多边界

代码：

<head>
    <meta charset="utf-8">
    <style>
        .div1 {
            border: 3px solid black;
            outline: 6px solid rgb(99, 168, 225);
            width: 100px;
            height: 100px;
            margin: 20px;
        }
    </style>
</head>

<body>
    <div class="div1">这个是多边框</div>
</body>

实现：

4、边框合并属性

代码：

<head>
    <meta charset="utf-8">
    <style>
        table {
            border-collapse: separate;//这个地方改为collapse，边框就会变成实线
            border-spacing: 2px;
        }
        table,
        td,
        th {
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <table>
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
        </tr>
        <tr>
            <td>Peter</td>
            <td>Griffin</td>
        </tr>
        <tr>
            <td>Lois</td>
            <td>Griffin</td>
        </tr>
    </table>
</body>

实现：

 

 5、边框图像

示例：

border-image: url("border.png") 30 stretch

代码：

<head>
    <meta charset="utf-8">
    <style>
        .mydiv {
            border-image: url("D:/私人/图片/光遇/blue.jpg") 30 stretch;
        }

        #borderimg1 {
            border: 10px solid transparent;
            padding: 15px;
            -webkit-border-image: url(D:/私人/图片/壁纸/color.png) 30 round;
            -o-border-image: url(D:/私人/图片/壁纸/color.png) 30 round;
            border-image: url(D:/私人/图片/壁纸/color.png) 30 round;
        }

        #borderimg2 {
            border: 10px solid transparent;
            padding: 15px;
            -webkit-border-image: url(D:/私人/图片/壁纸/color.png) 30 stretch;
            -o-border-image: url(D:/私人/图片/壁纸/color.png) 30 stretch;
            border-image: url(D:/私人/图片/壁纸/color.png) 30 stretch;
        }
    </style>
</head>

<body>
    <p>border-image 属性用于指定一个元素的边框图像。</p>
    <p id="borderimg1">在这里，图像平铺（重复），以填补该地区。</p>
    <p id="borderimg2">在这里，图像被拉伸以填补该地区</p>
    <p>这是原始图片:</p><img src="D:/私人/图片/壁纸/color.png" height="200px" width="300px">
</body>

实现：

 6、创造一个多彩边界

代码：

<head>
    <meta charset="utf-8">
    <style>
        .bordered {
            border-image: linear-gradient(to right, red 20%, green 20%, green 40%, blue 40%, blue 60%, maroon 60%, maroon 80%, chocolate 80%);
            border-image-slice: 1;
            border-style:solid;
        }
    </style>
</head>

<body>
    <div class="bordered">Border on all sides</div>
</body>

实现：

 三、Outlines

1、 outline-style——轮廓 

代码：

<head>
    <meta charset="utf-8">
    <style>
        p {
            border: 2px solid black;
            outline-color: rgb(223, 240, 35);
            line-height: 30px;
        }

        .p1 {
            outline-style: dotted;
        }

        .p2 {
            outline-style: dashed;
        }

        .p3 {
            outline-style: solid;
        }

        .p4 {
            outline-style: double;
        }

        .p5 {
            outline-style: groove;
        }

        .p6 {
            outline-style: ridge;
        }

        .p7 {
            outline-style: inset;
        }

        .p8 {
            outline-style: outset;
        }
    </style>
</head>

<body>
    <p class="p1">A dotted outline</p>
    <p class="p2">A dashed outline</p>
    <p class="p3">A solid outline</p>
    <p class="p4">A double outline</p>
    <p class="p5">A groove outline</p>
    <p class="p6">A ridge outline</p>
    <p class="p7">An inset outline</p>
    <p class="p8">An outset outline</p>
</body>

实现：

 

 四、Overflflow——溢出

1、overflflow-wrap

代码：

<head>
    <meta charset="utf-8">
    <style>
        div {
            width: 200px;
            outline: 1px dashed rgb(123, 109, 109);
        }

        #div1 {
            overflow-wrap: normal;
        }

        #div2 {
            overflow-wrap: break-word;
        }
    </style>
</head>

<body>
    <div id="div1">
        <strong>#div1</strong>: Small words are displayed normally, but a long word like <span
            style="color: red;">supercalifragilisticexpialidocious</span> is too long so it will overflow past the
        edge of the line-break
    </div>
    <div id="div2">
        <strong>#div2</strong>: Small words are displayed normally, but a long word like <span
            style="color: red;">supercalifragilisticexpialidocious</span> will be split at the line break and continue
        on the next line.
    </div>
</body>

实现：

posted @ 2023-01-31 17:34  末叶da  阅读(22)  评论(0)    收藏  举报