CSS3常⽤属性讲解

最新推荐文章于 2024-10-16 23:00:23 发布

不吃青椒！

最新推荐文章于 2024-10-16 23:00:23 发布

阅读量98

点赞数

分类专栏： html+css 文章标签： css3 css html

本文链接：https://blog.csdn.net/weixin_65728526/article/details/125236029

版权

html+css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

第1集 CSS3边框

圆角

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            margin: 0 auto;
            border: 3px solid red;
            /* border-radius: 10px 0 15px 0;
            这是让他的角有一定的弧度，设置4个是四个角，设置一个一下子设置4个角 */
            border-radius: 50%;
            border-radius: 100px;
            /* 这两种都能让这个方格变成圆形 */
        }
    </style>
</head>

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

</html>

阴影

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            back-ground:red;
            margin: 0 auto;
            box-shadow: 10px 10px 10px black;
            /* 第一个是设置左右阴影的幅度 第二个是上下的幅度 第三个是，值越大越虚幻 第四个是颜色 */
        }
    </style>
</head>

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

</html>

边界图片

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 500px;
            height: 500px;
            margin: 0 auto;
            border: 50px solid red;
            background-color: red;
            border-image: url(https://xd-video-pc-img.oss-cn-beijing.aliyuncs.com/xdclass_pro/default/head_img/21.jpeg);
        }
    </style>
</head>

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

</html>

第2集 CSS3渐变

（透明度用的最多）

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            /* background-image: linear-gradient(to right, red, blue) */
            /* background-image: linear-gradient(to bottom right, red, blue);从左上到右下 */
            /* 0是从下到上。180是从上到下，90 是从左到右 */
            /* background-image: linear-gradient(123deg, red, blue); */
            /* 多个颜色的话直接加就可以 */
            /* rgba就是带透明度的颜色，rgb是不带透明度的，接下来我们讲透明度， */
            /* background-image: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 0)); */
            /* 前三个属性是颜色，最后一个是透明度的表示1——>0,逐渐透明 */
            /* 下面是重复 */
            background-image: repeating-linear-gradient(red, blue, green, 10);
            /* 第四个元素是重读的次数 设置5个的话也可以设置20%，（1除以分成的次数） */
        }
    </style>
</head>

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

</html>

第3集 CSS3⽂本效果

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            /* 这里是文本阴影，水平方向右移5px，竖直方向向下5px,阴影的虚度是5px 颜色为红色 */
            /* text-shadow: 5px 5px 5px red; */
            /* 这里讲文本溢出 */
            background-color: red;
            /* 一行表示，超出200px宽度的文字用省略号表示 */
            overflow: hidden;
            /* 溢出隐藏是overflow：hidden */
            white-space: nowrap;
            /* 下面是省略号代替 ellipsis省略号截止 clip就是普通的，不加也可以 */
            text-overflow: ellipsis;
            /* 超过2⾏省略/裁剪 */
            /* overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2; */
            /* 下面是文本换行，长文本换行word-wrap:break-word; 单词拆分换行，break-all */
            word-wrap: break-all;
            /* 不隐藏的时候可以用到 */
        }
    </style>
</head>

<body>
    <div>
        <!-- 小滴课堂 -->
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda quis tempore ut vitae incidunt. Suscipit repellat non corrupti quasi voluptatem.
    </div>

</body>

</html>

第4集 CSS3⽹格布局（grid）

/* 使⽤ */
display: grid;
grid-template-columns: 10px 10px 10px;
grid-template-rows: 10px 10px 10px;
/* 百分⽐使⽤ */
display: grid;
grid-template-columns: 33.33% 33.33% 33.33%;
grid-template-rows: 33.33% 33.33% 33.33%;
/* repeat()函数简化 */
display: grid;
grid-template-columns: repeat(3, 33.33%);
grid-template-rows: repeat(3, 33.33%);

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 800px;
            height: 800px;
            background-color: pink;
            display: grid;
            /* grid就是网格的意思; */
            /* grid-template-columns: 200px 200px 200px 200px; */
            /* grid-template-rows: 400px 400px; */
            /* 现在讲百分比 */
            grid-template-columns: 50% 50%;
            /* grid-template-rows: 200px 200px 200px 200px; */
            /* grid-template-rows: repeat(4, 200px); */
            grid-template-rows: repeat(4, 25%);
        }
        
        .red {
            width: 400px;
            height: 200px;
            background-color: green;
            border: 1px solid blue;
            box-sizing: border-box;
        }
    </style>
</head>

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

</html>