今日学习CSS3基础

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

遠2002

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

阅读量56

点赞数

文章标签：前端 html

本文链接：https://blog.csdn.net/asdfg_asdsa/article/details/125915198

版权

border-radius：圆角

一个值：四个角

两个值：左上右下、右上左下

三个值时为：左上、右上左下、右下

四个值时分别为：左上、右上、右下、左下

以椭圆为基础画出的圆角，border-radius：x半径/y半径

border-radius：50% 变成圆形

例：

代码：

<!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: 100px;
            height: 100px;
            background-color: red;
            /* 一个值 */
            /* border-radius: 15px; */
            /* 两个值 */
            /* border-radius: 10px 20px; */
            /* 三个值 */
            border-radius: 15px 20px 5px;
            /* 四个值 */
            /* border-radius: 5px 10px 15px 20px; */
            /* 圆 */
            /* border-radius: 50%; */
        }
        
    </style>
</head>

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

</html>

box-shadow：阴影

box-shadow：水平位置垂直位置模糊距离阴影尺寸(阴影大小) 阴影颜色内(inset)/外阴影

前两个值必须写，模糊距离不能为负

内外阴影同时设置，用逗号隔开

例：

代码：

<!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>
        .div2 {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            background-color: rgb(0, 255, 174);
            box-shadow: 15px 15px 5px rgba(0, 0, 0, 0.118) inset, 5px 5px 5px rgba(128, 255, 0, 0.31);
        }
    </style>
</head>

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

</html>

边界图片

border-image属性，使用图片创建边框

border-image-source：边框背景图片路径

border-image-slice：图片边框向内偏移(切片)

border-image-width：图片边框的宽度

border-image-outset：边框图像区域超出边框的量

border-image-repeat：图片边框是否应该平铺(repeat)/铺满(round)/拉伸(stretch) (针对切片图形)

例：

代码：

<!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>
        .div3 {
            width: 200px;
            height: 100px;
            border: 20px solid transparent;
            border-image: url(img/border.png) 28 28 round;
        }
        
        .div4 {
            width: 200px;
            height: 100px;
            border: 20px solid transparent;
            border-image: url(img/border.png) 28 28 repeat;
        }
        
        .div5 {
            width: 200px;
            height: 100px;
            border: 20px solid transparent;
            border-image: url(img/border.png) 28 28 stretch;
        }
    </style>
</head>

<body>
    <div class="div3"></div>
    <br>
    <div class="div4"></div>
    <br>
    <div class="div5"></div>
</body>

</html>

背景图片

background-image：添加背景照片。可多个，用逗号隔开，前面的背景图片在上面。

background-size：指定图片的大小。

background-origin：指定背景图像的位置区域。border-box图像在边框上，padding-box图像在内边距上，content-box图像在内容上。

background-clip：背景剪裁属性是从指定位置开始绘制。border-box从边框上开始，padding-box从内边距上开始，content-box从内容上开始。

例：

代码：

<!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>
        .div6 {
            width: 400px;
            height: 400px;
            border: 20px solid rgba(255, 0, 0, 0.233);
            padding: 20px;
            /* background-image: url(img/flower.gif), url(img/paper.gif);
            background-position: right bottom, left top;
            background-repeat: no-repeat, repeat; */
            float: left;
            background-image: url(img/flower_small.gif);
            /* contain，cover */
            /* background-size: cover; */
            background-repeat: no-repeat;
            background-origin: border-box; /*图片从边框开始*/
            background-color: aqua;
            background-clip: border-box;  /*浅蓝色背景从边框开始布满*/
        }
        
        .div7 {
            width: 400px;
            height: 400px;
            border: 20px solid rgba(255, 0, 0, 0.233);
            padding: 20px;
            /* background-image: url(img/flower.gif), url(img/paper.gif);
            background-position: right bottom, left top;
            background-repeat: no-repeat, repeat; */
            float: left;
            background-image: url(img/flower_small.gif);
            background-repeat: no-repeat;
            background-origin: padding-box; /*图片从内边距开始*/
            background-color: aqua;
            background-clip: padding-box;  /*浅蓝色背景从内边距开始布满*/
        }
        
        .div8 {
            width: 400px;
            height: 400px;
            border: 20px solid rgba(255, 0, 0, 0.233);
            padding: 20px;
            /* background-image: url(img/flower.gif), url(img/paper.gif);
            background-position: right bottom, left top;
            background-repeat: no-repeat, repeat; */
            float: left;
            background-image: url(img/flower_small.gif);
            background-repeat: no-repeat;
            background-origin: content-box; /*图片从内容处开始*/
            background-color: aqua;
            background-clip: content-box;  /*浅蓝色背景从内容开始布满*/
        }
    </style>
</head>

<body>
    <div class="div6">
        <p>打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字</p>
        <p>打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字</p>
        <p>打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字</p>
    </div>
    <div class="div7">
        <p>打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字</p>
        <p>打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字</p>
        <p>打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字</p>
    </div>
    <div class="div8">
        <p>打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字</p>
        <p>打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字</p>
        <p>打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字打点字</p>
    </div>
</body>

</html>