CSS3之box-shadow(阴影)和border属性

最新推荐文章于 2024-05-18 11:14:38 发布

23号婷儿

最新推荐文章于 2024-05-18 11:14:38 发布

阅读量2.5k

点赞数 3

分类专栏： css3 文章标签： css3

本文链接：https://blog.csdn.net/qq_46179838/article/details/105950536

版权

css3 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

CSS3的一些属性（一）

- - 一、box-shadow(阴影)
  - 二、border属性

一、box-shadow(阴影)

1、格式：inset/outset 水平偏移量垂直偏移量模糊范围传播距离阴影颜色；

inset（内阴影，必写）outset（外阴影，可不写）
模糊范围（阴影的模糊值）：阴影的大小是基于原来的位置向两侧同时模糊
传播距离：在水平方向和垂直方向同时增加阴影的大小

2、哪个阴影最先设置的，哪个阴影就在逻辑的最上面。
阴影是在文字的下面，在背景颜色的上面

小练习1：

<!DOCTYPE html>
<html lang="zn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>border练习</title>
    <style>
        *{
            padding:0px;
            margin:0px;
        }
        body {
            background-color: #000;
        }
        div{
            width:200px;
            height:200px;
            position: absolute;
            top:calc(50% - 150px);
            left:calc(50% - 150px);
            border:1px solid black;
            box-shadow:inset 0px 0px 20px #fff,
                       5px 0px 35px #f0f,
                       0px -5px 35px #00f,
                       -5px 0px 35px rgb(247, 14, 33),
                       0px 5px 35px #fcc309;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

效果如下，具体每个边框想设置什么自己可以随意改，此处只是用来练练手，学会怎么使用这个属性
在这里插入图片描述
小练习2：

<!DOCTYPE html>
<html lang="zn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>border练习</title>
    <style>
         * {
     padding:0px;
     margin:0px;
 }
 body {
     background-color: #000;
 }
 div {
     width:300px;
     height:300px;
     border-radius:50%;
     position:absolute;
     top:calc(50% - 150px);
     left:calc(50% - 150px);
     border:1px solid #fff;

     box-shadow:inset 0px 0px 30px  #fff,
                inset 3px 0px 40px #f0f,
                inset -3px 0px 40px #0ff,
                inset 3px 0px 120px #f0f,
                inset -3px 0px 120px #0ff,
                0px 0px 50px  #fff,
                -3px 0px 65px #f0f,
                3px 0px 65px #0ff;
    }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

效果如下
在这里插入图片描述
小练习3：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>练习</title>
    <style>
        * {
            padding: 0px;
            margin: 0px;
        }

        body {
            background-color: #000;
        }
        div {
            width: 50px;
            height: 50px;
            background-color: #fff;
            position: absolute;
            top: calc(50% - 25px);
            left: calc(50% - 25px);
            border-radius: 50%;

            box-shadow: 0px 0px 100px 95px #fff,
                0px 0px 200px 150px #ff0;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

效果图
在这里插入图片描述
小练习4：当你鼠标移入正方形是，正方形出现阴影并变大，移出之后又恢复，中间都有个过渡的时间

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>练习</title>
    <style>
        * {
            padding: 0px;
            margin: 0px;
        }

        body {
            background-color: #000;
        }
        /* 鼠标移入则变大有阴影，移除恢复 */
        div {
            width: 100px;
            height: 100px;
            border-radius: 5px;
            position: absolute;
            top: calc(50% - 50px);
            left: calc(50% - 50px);
            border: 1px solid #fff;
            box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
            transition: all .6s;
        }

        div::after {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            border-radius: 5px;
            box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);
            opacity: 0;
            transition: all .6s;
        }

        div:hover {
            transform: scale(1.25 1.25);
        }

        div:hover::after {
            opacity: 1;
        }
    </style>
</head>
<body>

    <div></div>

</body>
</html>

二、border属性

1、border-radius属性
里面有四个值：top-left、top-right、bottom-right、bottom-left
也可以是三个值：top-left、top-right和bottom-left、bottom-right
还可以是两个值：top-left和bottom-right、top-right和bottom-left

border-top-right-radius:300px（水平） 300px（垂直）;和border-top-right-radius:300px;样式相同，可以改变水平和竖直方向的大小而改变形状
放在正方形中时，得到一个四分之一的圆，不同的图形中展现的效果不同

2、border-image属性
2.1格式：border-image-source | [ border-image-slice,border-image-width,border-image-outset] | border-image-repet; 一般建议分开写，有利于维护和开发，便于记忆。
连在一起我们一般都是border-image:source slice repeat; 其他的都是分开写

border-image-source:：使用绝对或相对地址( url() )或者创建渐变色linear-gradient(red, yellow)来确定图像。

border-image-slice(能添四个值，不可带px，只能写纯数字)
该属性指定从上，右，下，左 4 个方位来分割图像，将图像分成4个角，4条边和中间区域共9份，中间区域始终是透明的（即没图像填充），除非加上关键字fill。

border-image-outset：边框图像向外偏移的距离

border-image-width：设置body里面能显示的图片背景的宽度，它的默认值是1，所以该属性的计算值会是1 * border-width，相当于会直接使用border-width的定义。
特殊点：如果添的是auto，那么它会向slice看齐，取slice的值+px。

border-image-repeat：[ stretch（默认值） | repeat | round | space ]，可以一次添两个参数
stretch：将被分割的图像使用拉伸的方式来填充满边框图像区域。
repeat：将被分割的图像使用重复平铺的方式来填充满边框图像区域。当图像碰到边界时，如果超过则被截断。
round：与 repeat 关键字类似。不同在于，当背景图像不能满足被新增一个块时，会根据情况缩放图像。（先拉伸再平铺或者先压缩再平铺）
space：与 repeat 关键字类似。不同在于，当背景图像不能以整数次平铺时，会用空白间隙填充在图像周围。（会用空白间隙填充在图像周围再平铺）

23号婷儿

关注

3
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
CSS3之box-shadow(阴影)和border属性

这里写目录标题一、box-shadow(阴影)二、border属性一、box-shadow(阴影)1、格式：inset/outset 水平偏移量垂直偏移量模糊范围传播距离阴影颜色；inset（内阴影，必写）outset（外阴影，可不写）模糊范围（阴影的模糊值）：阴影的大小是基于原来的位置向两侧同时模糊传播距离：在水平方向和垂直方向同时增加阴影的大小2、哪个阴影最先设置的，哪...
复制链接

扫一扫