css3的边框

最新推荐文章于 2024-04-12 22:35:54 发布

weixin_45847162

最新推荐文章于 2024-04-12 22:35:54 发布

阅读量187

点赞数

本文链接：https://blog.csdn.net/weixin_45847162/article/details/105621892

版权

一、border-radius（定义圆角）

复合写法：
border-radius: 10px; 当一个参数的时候，是4个角都是一样的
border-radius: 10px 10px; 当两个参数的时候，第一个参数代表左上角和右下角，第二个参数代表左下角和右上角
border-radius: 10px 10px 10px; 当三个参数的时候，第一个参数代表左上角，第二个参数代表右上角和左下角，的三个参数代表右下角
border-radius: 10px 10px 10px 10px; 当四个参数的时候，分别是左上角、右上角、右下角、左下角

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .yi{
            border: 1px solid red;
            width: 200px;
            height: 200px;
            border-radius: 100px;
        }
        .er{
            border: 1px solid red;
            width: 200px;
            height: 200px;
            border-radius: 10px;
        }
    </style>
</head>

<body>
    <h3>圆</h3>
    <div class="yi"></div>
    <h3>圆角正方形</h3>
    <div class="er"></div>
</body>

</html>

在这里插入图片描述

分拆独立属性语法：
每个角的弧度是可以设置两个半径分别是水平半径和垂直半径
border-top-left-radius: 10px 10px;
border-top-right-radius: 10px 10px;
border-bottom-left-radius: 10px 10px;
border-bottom-right-radius: 10px 10px;

.yi{
    border: 1px solid red;
    width: 200px;
    height: 200px; 
    border-top-left-radius: 100px 100px;
    border-top-right-radius: 150px  150px;
    border-bottom-right-radius: 100px 100px;
    margin-left: 20px;
    background-color: yellow;
}

在这里插入图片描述

二、box-shadow（边框阴影）

语法：
参数分别为 X轴偏移量（必需，可为负数，正左负右） Y轴偏移量（必需，可谓负数，正下负上）阴影模糊半径阴影扩展半径阴影颜色投影方式（默认是外部阴影，添加上inset就是内部阴影）;

box-shadow: 10px 10px 10px 10px red inset;

阴影模糊半径：其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊；
阴影扩展半径：其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值时，则缩小；

.yi{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    border-radius: 50px;
    border: 1px solid yellow;
    width: 100px;
    height: 100px; 
    /* 可以设置多个阴影，依次从上到下排序 */
    box-shadow: 0 0 10px 0px yellow,
    0 0 20px 15px rgb(255, 75, 75),
    0 0 35px 20px rgb(255, 116, 116),
    0 0 55px 35px rgb(255, 188, 188);
}

在这里插入图片描述

三、border-image（边框背景图）

border-image-source：定义元素边框背景图像，可以是图片路径或使用渐变创建的“背景图像”。
border-image-slice：定义元素边框背景图像从什么位置开始分割。
border-image-width：定义元素边框背景图像厚度。
border-image-outset：定义元素边框背景图像的外延尺寸。
border-image-repeat：定义元素边框背景图像的平铺方式。

border-image-repeat的三个属性：
repeat就是一直重复，然后超出部分剪裁掉，而且是居中开始重复。
Round 可以理解为圆满的铺满。为了实现圆满所以会压缩（或拉伸）。
Stretch 很好理解就是拉伸。

.yi{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 200px;
  height: 200px;
  background: #F4FFFA;
  border:50px solid;
  border-image-source: url("da.jpg");
  border-image-slice:50;
  border-image-outset:0;
  border-image-repeat: repeat;
}