css3边框、阴影和背景图_css border 背景图-优快云博客

本文链接：https://blog.youkuaiyun.com/sh2001824/article/details/125915085

本文介绍了CSS3中的border-radius属性用于创建圆角，详细解释了不同数量值的含义；box-shadow属性用于添加盒子阴影，以及其参数设置方法；border-image属性用于用图片创建边框，包括切片、宽度和重复方式；最后讨论了background-image属性在添加背景图时的使用，以及background-origin和background-clip属性对背景图位置和裁剪的影响。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.圆角

在css3中 border-radius属性被用于创建圆角（圆角的4个值、3个值、2个值和1个值分别代表什么）

1：个值我们都知道就是代表4个角
2个值：第一个值代表左上角和右下角第二个值表示右上角和左下角
3个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
4个值：则依次对应左上角、右上角、右下角、左下角（顺时针方向）
如果想要画圆把 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>
        .div1 {
            width: 400px;
            height: 200px;
            /* border-radius: 30px; */
            /*顺序： 左上  右上 右下  左下 */
            /* border-radius: 20px 30px 20px 40px; */
            /*顺序：左上  右上和左下  右下 */
            /* border-radius: 20px 30px 50px; */
            border: 5px solid red;
            /* 椭圆圆角        水平 、垂直*/
            /* border-radius: 40px/80px; */
            /* 画圆 */
            /* border-radius: 50%; */
            /* 画椭圆 加宽度就行*/
            border-radius: 50%;
        }
    </style>
</head>

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

</body>

</html>

效果：

2.css3盒子阴影

在css3中的 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: 100px;
            height: 100px;
            background-color: aqua;
            /*        水平偏移  垂直偏移  模糊半径 颜色 */
            /* box-shadow: 10px 20px 5px red; */
            /* 设置内阴影 */
            border-radius: 50%;
            /* box-shadow: 20px 20px 5px rgba(0, 0, 0, 0.164) inset; */
            /* 内外结合 */
            box-shadow: 20px 20px 5px rgba(0, 0, 0, 0.137) inset, 20px 20px red;
        }
    </style>
</head>

<body>

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

</body>

</html>

效果：

3.使用图片创建边框

css3中border-image属性用于创建图片边框

border-image-source：边框图片路径（一般使用border-image也可以）
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 {
            margin-top: 20px;
            width: 200px;
            height: 200px;
            /*  
            给元素设置透明边框
            transparent:透明*/
            border: 15px solid transparent;
            border-image: url(../img/border.png) 27 27 round;
        }
        
        .div4 {
            margin-top: 20px;
            width: 200px;
            height: 200px;
            /*  
            给元素设置透明边框
            transparent:透明*/
            border: 15px solid transparent;
            border-image: url(../img/border.png) 27 27 repeat;
        }
        
        .div5 {
            margin-top: 20px;
            width: 200px;
            height: 200px;
            /*  
            给元素设置透明边框
            transparent:透明*/
            border: 15px solid transparent;
            border-image: url(../img/border.png) 27 27 stretch;
        }
    </style>
</head>

<body>

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

</html>

效果：

4. css3背景图

css3中 background-image属性添加背景图
不同的背景图和图像要用逗号隔开，所以图像中显示最顶端的图像
background-origin：指定了背景图像的位置区域（content-box、padding-box和border-box区域内可以放置图像）
background-clip：背景剪裁属性是从指定位置开始绘制（content-box、padding-box和border-box区域内可以放置图像）

1. background-image属性添加背景图（两张图片一张平铺，一张在右下）

代码如下：

<!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>
        .div1 {
            width: 700px;
            border: 1px solid red;
            background-image: url(../img/flower.gif), url(../img/paper.gif);
            background-position: right bottom, left top;
            background-repeat: no-repeat, repeat;
        }
    </style>
</head>

<body>
    <div class="div1">
        <p>柳还记得基督教的电动机的绝佳基督教的电动机的绝佳基督教的电动机的绝佳基督教的电动机的绝佳</p>
        <p>柳还记得基督教的电动机的绝佳基督教的电动机的绝佳基督教的电动机的绝佳基督教的电动机的绝佳</p>
        <p>柳还记得基督教的电动机的绝佳基督教的电动机的绝佳基督教的电动机的绝佳基督教的电动机的绝佳</p>
        <p>柳还记得基督教的电动机的绝佳基督教的电动机的绝佳基督教的电动机的绝佳基督教的电动机的绝佳</p>
        <p>柳还记得基督教的电动机的绝佳基督教的电动机的绝佳基督教的电动机的绝佳基督教的电动机的绝佳</p>
        <p>柳还记得基督教的电动机的绝佳基督教的电动机的绝佳基督教的电动机的绝佳基督教的电动机的绝佳</p>
        <p>柳还记得基督教的电动机的绝佳基督教的电动机的绝佳基督教的电动机的绝佳基督教的电动机的绝佳</p>
        <p>柳还记得基督教的电动机的绝佳基督教的电动机的绝佳基督教的电动机的绝佳基督教的电动机的绝佳</p>
    </div>

</body>

</html>

效果：

2.background-origin

代码如下：

<!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>
        .div4 {
            width: 500px;
            border: 20px solid rgba(255, 0, 0, 0.205);
            background: url(../img/flower_small.gif) no-repeat;
            /*cover,contain注意这两个值的区别 */
            /* background-size: contain; */
            float: left;
            padding: 40px;
            background-origin: border-box;
            /* background-origin: padding-box; */
            /* background-origin: content-box; */
        }
    </style>
</head>

<body>

    <div class="div4">
        <p>柳还记得基督教的电动机的绝佳基督教的电动机的绝佳基督教的电动机的绝佳基督教的电动机的绝佳</p>
        <p>柳还记得基督教的电动机的绝佳基督教的电动机的绝佳基督教的电动机的绝佳基督教的电动机的绝佳</p>
        <p>柳还记得基督教的电动机的绝佳基督教的电动机的绝佳基督教的电动机的绝佳基督教的电动机的绝佳</p>
        <p>柳还记得基督教的电动机的绝佳基督教的电动机的绝佳基督教的电动机的绝佳基督教的电动机的绝佳</p>
        <p>柳还记得基督教的电动机的绝佳基督教的电动机的绝佳基督教的电动机的绝佳基督教的电动机的绝佳</p>
        <p>柳还记得基督教的电动机的绝佳基督教的电动机的绝佳基督教的电动机的绝佳基督教的电动机的绝佳</p>
        <p>柳还记得基督教的电动机的绝佳基督教的电动机的绝佳基督教的电动机的绝佳基督教的电动机的绝佳</p>
        <p>柳还记得基督教的电动机的绝佳基督教的电动机的绝佳基督教的电动机的绝佳基督教的电动机的绝佳</p>
    </div>

</body>

</html>

效果：

3.background-clip

代码如下：

<!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>
        .div5 {
            width: 500px;
            border: 20px solid rgba(255, 0, 0, 0.205);
            background: url(../img/flower_small.gif) no-repeat;
            float: left;
            padding: 40px;
            background-color: aqua;
            /* background-clip: border-box; */
            /* background-clip: padding-box; */
            background-clip: content-box;
        }
    </style>
</head>

<body>

    <div class="div5">
        <p>柳还记得基督教的电动机的绝佳基督教的电动机的绝佳基督教的电动机的绝佳基督教的电动机的绝佳</p>
        <p>柳还记得基督教的电动机的绝佳基督教的电动机的绝佳基督教的电动机的绝佳基督教的电动机的绝佳</p>
        <p>柳还记得基督教的电动机的绝佳基督教的电动机的绝佳基督教的电动机的绝佳基督教的电动机的绝佳</p>
        <p>柳还记得基督教的电动机的绝佳基督教的电动机的绝佳基督教的电动机的绝佳基督教的电动机的绝佳</p>
        <p>柳还记得基督教的电动机的绝佳基督教的电动机的绝佳基督教的电动机的绝佳基督教的电动机的绝佳</p>
        <p>柳还记得基督教的电动机的绝佳基督教的电动机的绝佳基督教的电动机的绝佳基督教的电动机的绝佳</p>
        <p>柳还记得基督教的电动机的绝佳基督教的电动机的绝佳基督教的电动机的绝佳基督教的电动机的绝佳</p>
        <p>柳还记得基督教的电动机的绝佳基督教的电动机的绝佳基督教的电动机的绝佳基督教的电动机的绝佳</p>
    </div>
</body>

</html>

效果：