css边框颜色渐变和阴影

.table-body{
      color: #48e5e5;
      // border-top: 1px solid #48e5e5;
      // border-bottom: 1px solid #48e5e5;
      /*首先我们设置边框只显示右侧,宽度为2px的实线。*/
      border-top: 2px solid;
      border-bottom: 2px solid;
      /*设置线性渐变*/
      border-image: linear-gradient(
          90deg,
          rgba(255, 255, 255, 0) 0%,
          rgba(30, 138, 248, 0.4) 50%,
          rgba(255, 255, 255, 0) 100%
        )
        2 2 2 2;
    }

2. div边框添加阴影

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

<head>
  <style>
    div {
      width: 200px;
      height: 200px;
      /* box-shadow:0px 0px 10px 5px #090; */
      box-shadow: 0px 0px 10px 5px #090 inset;
    }
  </style>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
</head>

<body>
  <div style="width:100%;height:800px">
  </div>
</body>

</html>

猜你喜欢

转载自blog.csdn.net/weixin_44042792/article/details/136476407