HTML5&CSS3（2）

最新推荐文章于 2023-11-20 07:11:01 发布

zhy0509

最新推荐文章于 2023-11-20 07:11:01 发布

阅读量225

点赞数

分类专栏： HTMI 文章标签： html5

本文链接：https://blog.csdn.net/zhy0509/article/details/78535023

版权

HTMI 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

1.边框
border：solid/dashed/dotted/double 线宽颜色

2.盒阴影
box:shadow h-shadow水平位置（左负右正） v-shadow垂直位置（下正上负） blur模糊距离 spread阴影大小 color阴影颜色 inset内/外阴影（如果是外阴影，不用写inset）

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        section{
            width:200px;
            height:200px;
            margin:100px auto 0;
            border:solid 2px blue;
            -webkit-box-shadow:3px 3px 5px 10px plum;
            -moz-box-shadow:3px 3px 5px 10px plum;
            box-shadow:3px 3px 5px 10px plum;
        }
        h1{
            margin:100px auto 0;
            text-shadow:2px 2px 5px #333;
        }
    </style>
</head>
<body>
<section>
</section>
<h1>welcome</h1>
</body>
</html>

效果图
这里写图片描述

3.文本阴影
text-shadow:h-shadow水平位置（左负右正） v-shadow垂直位置（下正上负） blur模糊距离 color阴影颜色

4.图像作为边框border-image

border-image-source（none——没有图片被使用/image——边框使用图像的路径）用于指定要用于绘制边框的图像的位置

border-image-slice(number/%/fill)图像边界向内偏移

border-image-width(number/%/auto)图像边界的宽度

border-image-outset (number/length)用于指定在边框外部绘制border-image-area的量

border-image-repeat(strech拉伸/repeat平铺/round缩放适应区域/space扩展空间会分布在图像周围)如何创建一个border-image 属性的按钮。

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        section{
            width:500px;
            height:500px;
            border:solid 15px #1e5eb8;
            margin:100px auto 0;
            text-align:center;
        }
        div{
            width:200px;
            height:30px;
            border:solid 10px #ccc;
        }
        .round{
            -webkit-border-image:url(borimg.png) 30 30 round;
            -moz-border-image:url(borimg.png) 30 30 round;
            -o-border-image:url(borimg.png) 30 30 round;
            border-image:url(borimg.png) 30 30 round;
        }
        .stretch{
            -webkit-border-image:url(borimg.png) 30 30 stretch;
            -moz-border-image:url(borimg.png) 30 30 stretch;
            -o-border-image:url(borimg.png) 30 30 stretch;
            border-image:url(borimg.png) 30 30 stretch;
        }
    </style>
</head>
<body>
<section class="round">
    <h1>图片作为边框的例子</h1>
    <div class="round">这是一个图像平铺的演示</div>
    <div class="stretch">这是一个图像拉伸的演示</div>
</section>
</body>
</html>

这里写图片描述

5.圆角border-radius

border-radius:a ——四角均为a

border-radius:a b ——左上右下右上左下

border-radius:a b c ——左上右上左下右下

border-radius:a b c d ——左上右上右下左下

6.多背景：哪个图片在最上面，图片代码在最前面

background:url(1),url(2),url(3)

背景放大：与background一一对应

background-size:

(1)content以最小程度填满

(2)cover以最大程度填满

(3)100% 100%

(4)精确值

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{
            margin:0;
            padding:0;
        }
        div{
            height:630px;
            width:1260px;
            background:url("bi.png") no-repeat 980px bottom,
                        url("denglou.png") no-repeat left top,
                        url("xinnian.png") no-repeat 230px 70px,
                        url("bg.jpg") repeat;
            background-size:30px 240px,
                             200px 160px,
                             90px 150px,
                             1024px 630px;
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

效果图：

这里写图片描述

7.background-orgin:padding-box从填充区域开始/content-box从内容区域开始/border-box从边框开始（默认）

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        section{
            margin:200px auto;
            width:400px;
            height:300px;
            padding:50px;
            background:url(borimg.png) repeat;
            background-origin:border-box;/*content-box*//*padding-box*/
        }
    </style>
</head>
<body>
<section>
    Lorem ipsum dolor sit amet, consectetur
    adipisicing elit. Ad aut blanditiis commodi
    dolores est et id iste iure minima nihil omnis
    quaerat, quam quis rerum sit tempora ullam
    voluptatibus voluptatum.
</section>
</body>
</html>

效果图：

这里写图片描述

background-clip:padding-box从填充区域开始/content-box从内容区域开始/border-box从边框开始（默认）

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        section{
            margin:200px auto;
            height:200px;
            width:500px;
            padding:50px;
            border:dotted 10px #000;
            background:plum;
            background-clip:/*border-box*/padding-box/*content-box*/;
        }
    </style>
</head>
<body>
<section>
    Lorem ipsum dolor sit amet, consectetur
    adipisicing elit. Consequuntur facere fugiat
    placeat quasi rem! Ab at atque cupiditate
    eveniet, ex ipsam libero nulla quae, quidem
    recusandae reprehenderit, temporibus tenetur
    voluptatum.
</section>
</body>
</html>

效果图：

这里写图片描述

8.background-attachment:scroll随页面其余部分滚动/local随滚动元素滚动/fixed固定

overflow：scroll/hidden

9.线性渐变

linear-gradient:direction,color-stop1,color-stop2,…….

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div.box1{
            width:300px;
            height:100px;
            background:-webkit-linear-gradient(red,blue);
            background:-o-linear-gradient(red,blue);
            background:-moz-linear-gradient(red,blue);
            background:linear-gradient(red,blue);
        }
        div.box2{
            width:300px;
            height:100px;
            background:-webkit-linear-gradient(left,red,green);
            background:-o-linear-gradient(right,red,green);
            background:-moz-linear-gradient(right,red,green);
            background:linear-gradient(to right,red,green);
        }
        div.box3{
            width:300px;
            height:100px;
            background:-webkit-linear-gradient(left top,orange,green);
            background:-o-linear-gradient(right bottom,orange,green);
            background:-moz-linear-gradient(right bottom,orange,green);
            background:linear-gradient(to right bottom,orange,green);
        }
        div.box4{
            width:300px;
            height:100px;
            background:-webkit-linear-gradient(20deg,blue,plum);
            background:-o-linear-gradient(20deg,blue,plum);
            background:-moz-linear-gradient(20deg,blue,plum);
            background:linear-gradient(20deg,blue,plum);
        }
        div.box5 {
            width: 300px;
            height: 100px;
            background: -webkit-linear-gradient(left, red, orange, yellow, green, blue, indigo, purple);
            background: -o-linear-gradient(right, red, orange, yellow, green, blue, indigo, purple);
            background: -moz-linear-gradient(right, red, orange, yellow, green, blue, indigo, purple);
            background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, purple);
        }
        div.box6{
              width:300px;
              height:100px;
              background:-webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1));
              background:-o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1));
              background:-moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1));
              background:linear-gradient(to right,rgba(255,0,0,0),rgba(255,0,0,1));
          }
        div.box7{
            width:300px;
            height:100px;
            background:-webkit-repeating-linear-gradient(red,yellow 10%,green 25%);
            background:-o-repeating-linear-gradient(red,yellow 10%,green 25%);
            background:-moz-repeating-linear-gradient(red,yellow 10%,green 25%);
            background:linear-repeating-gradient(red,yellow 10%,green 25%);
        }
    </style>
</head>
<body>
<div class="box1"></div><br><!--从上到下的线性渐变-->
<div class="box2"></div><br><!--从左到右的线性渐变-->
<div class="box3"></div><br><!--从左上到右下的线性渐变-->
<div class="box4"></div><br><!--具体角度的线性渐变-->
<div class="box5"></div><br><!--带有多个颜色结点的线性渐变-->
<div class="box6"></div><br><!--使用透明度的线性渐变-->
<div class="box7"></div>    <!--重复的线性渐变-->
</body>
</html>

效果图：
这里写图片描述

径向渐变

radial-gradient:center,shap size,start color,…….,last color

shap-size:closest-side/farthest-side/closest-corner/farthest-corner

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div.box1{
              width:300px;
              height:200px;
              background:-webkit-radial-gradient(yellow,orange,red);
              background:-o-radial-gradient(yellow,orange,red);
              background:-moz-radial-gradient(yellow,orange,red);
              background:radial-gradient(yellow,orange,red);
          }
        div.box2{
            width:300px;
            height:200px;
            background:-webkit-radial-gradient(yellow 5%,orange 25%,red 70%);
            background:-o-radial-gradient(yellow 5%,orange 25%,red 70%);
            background:-moz-radial-gradient(yellow 5%,orange 25%,red 70%);
            background:radial-gradient(yellow 5%,orange 25%,red 70%);
        }
        div.box3{
            width:300px;
            height:200px;
            background:-webkit-radial-gradient(circle,yellow,orange,red);
            background:-o-radial-gradient(circle,yellow,orange,red);
            background:-moz-radial-gradient(circle,yellow,orange,red);
            background:radial-gradient(circle,yellow,orange,red);
        }
        div.box4{
            width:300px;
            height:200px;
            background:-webkit-radial-gradient(60% 55%,closest-side,yellow,orange,red,black);
            background:-o-radial-gradient(60% 55%,closest-side,yellow,orange,red,black);
            background:-moz-radial-gradient(60% 55%,closest-side,yellow,orange,red,black);
            background:radial-gradient(60% 55%,closest-side,yellow,orange,red,black);
        }
        div.box5{
             width:300px;
             height:200px;
             background:-webkit-radial-gradient(60% 55%,farthest-side,yellow,orange,red,black);
             background:-o-radial-gradient(60% 55%,farthest-side,yellow,orange,red,black);
             background:-moz-radial-gradient(60% 55%,farthest-side,yellow,orange,red,black);
             background:radial-gradient(60% 55%,farthest-side,yellow,orange,red,black);
        }
        div.box6{
            width:300px;
            height:200px;
            background:-webkit-radial-gradient(60% 55%,farthest-corner,yellow,orange,red,black);
            background:-o-radial-gradient(60% 55%,farthest-corner,yellow,orange,red,black);
            background:-moz-radial-gradient(60% 55%,farthest-corner,yellow,orange,red,black);
            background:radial-gradient(60% 55%,farthest-corner,yellow,orange,red,black);
        }
        div.box7{
            width:300px;
            height:200px;
            background:-webkit-radial-gradient(60% 55%,closest-corner,yellow,orange,red,black);
            background:-o-radial-gradient(60% 55%,closest-corner,yellow,orange,red,black);
            background:-moz-radial-gradient(60% 55%,closest-corner,yellow,orange,red,black);
            background:radial-gradient(60% 55%,closest-corner,yellow,orange,red,black);
        }
        div.box8{
            width:300px;
            height:200px;
            background:-webkit-repeating-radial-gradient(red,yellow 10%,green 15%);
            background:-o-repeating-radial-gradient(red,yellow 10%,green 15%);
            background:-moz-repeating-radial-gradient(red,yellow 10%,green 15%);
            background:repeating-radial-gradient(red,yellow 10%,green 15%);
        }
    </style>
</head>
<body>
<div class="box1"></div><br>
<div class="box2"></div><br>
<div class="box3"></div><br>
<div class="box4"></div><br>
<div class="box5"></div><br>
<div class="box6"></div><br>
<div class="box7"></div><br>
<div class="box8"></div>
</body>
</html>

效果图：

这里写图片描述

10.text-overflow:clip
white-space:nowrap 禁止换行（仅一行）
overflow:hiidden

text-overflow:ellispis 溢出用点代替或直接截断
word-break:break-all 单词内换行

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        p{
            width:200px;
            height:20px;
            line-height:20px;
            border:solid 1px #999;
            text-overflow:clip/*ellipsis*/;
            white-space:nowrap;
            overflow:hidden;
            /*word-break:break-all;*/
        }
    </style>
</head>
<body>
<p>Lorem ipsum dolor sit amet,
    consectetur adipisicing elit.
    Aliquid assumenda, beatae
    consequatur culpa debitis
    doloribus ducimus impedit
    itaque molestias nihil non
    omnis, optio quaerat quia
    quod sint unde ut velit.</p>
</body>
</html>

效果图：

这里写图片描述

11.多列

column-count:5;分成5列

column-gap:20px;列间距

column-rule:solid 2px #f00;间隔线

column-width:100px;列宽

columns: column-width,column-count

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        p{
            column-count:3;/*分成几列*/
            column-gap:10px;/*列间距*/
            column-rule:dashed 2px #f00;/*间隔线*/
            /*column-width:100px;*//*列宽*/
        }
    </style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur dolor explicabo facilis nam quidem quo recusandae repellendus vitae. Ab eius hic in? Autem eius fuga laboriosam officiis placeat porro sapiente?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, aliquam, culpa dignissimos ducimus ea est exercitationem illo ipsam laborum nobis pariatur perspiciatis quam quia quidem reiciendis similique temporibus unde. Magnam!</p>
</body>
</html>

效果图：

这里写图片描述

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        p{
            columns:100px 3;
        }
    </style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur dolor explicabo facilis nam quidem quo recusandae repellendus vitae. Ab eius hic in? Autem eius fuga laboriosam officiis placeat porro sapiente?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, aliquam, culpa dignissimos ducimus ea est exercitationem illo ipsam laborum nobis pariatur perspiciatis quam quia quidem reiciendis similique temporibus unde. Magnam!</p>
</body>
</html>

效果图：

这里写图片描述

12.窗口调整
resize:none;textarea去掉变化
resize:both双向变化/horizontal水平变化/vertical垂直变化
div增加变化

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        textarea{
            resize:none;
        }
    </style>
</head>
<body>
<textarea name="" id="" cols="30" rows="10" ></textarea>
</body>
</html>

这里写图片描述

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            width:300px;
            height:100px;
            border:solid 1px #000;
            resize:vertical;/*both 双向*//*horizontal 水平*//*vertical 垂直*/
            overflow:auto;
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

这里写图片描述

13.box-sizing：border-box/content-box;

border:2px solid #f00;

outline:2px solid #000;

outline-offset:15px;

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        p{
            margin:100px auto 0;
            height:100px;
            width:120px;
            border:solid 2px #000;
            outline:dashed 2px #f00;
            outline-offset:10px;
        }
    </style>
</head>
<body>
<p>HTML5+CSS3</p>
</body>
</html>