首页 > html > border > Page Widget - 如何创造与梯度的边界

Page Widget - 如何创造与梯度的边界

border 【border】
我们想知道如何创造与梯度的边界。
代码展示 运行结果 

<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
.one {
  width: 400px;
  padding: 20px 25px;
  border-top: 5px solid #000;
  margin: 40px auto;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#000),to(transparent));
  background-image: -webkit-linear-gradient(#000, transparent);
  background-image: -moz-linear-gradient(#000, transparent),-moz-linear-gradient(#000, transparent);
  background-image: -o-linear-gradient(#000, transparent),-o-linear-gradient(#000, transparent);
  background-image: linear-gradient(#000, transparent),linear-gradient(#000, transparent);-moz-background-size: 5px 100%;
  background-size: 5px 100%;
  background-position: 0 0, 100% 0;
  background-repeat: no-repeat;
}
.two {
  position: relative;
  width: 400px;
  padding: 20px;
  border: 5px solid transparent;
  border-top-color: #000;
  margin: 40px auto;
}

.two:before, .two:after {
  content: "";
  position: absolute;
  top: -5px;
  bottom: -5px;
  left: -5px;
  width: 5px;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#000),to(transparent));
  background-image: -webkit-linear-gradient(#000, transparent);
  background-image: -moz-linear-gradient(#000, transparent);
  background-image: -o-linear-gradient(#000, transparent);
  background-image: linear-gradient(#000, transparent);
}

.two:after {
  left: auto;
  right: -5px;
}
</style>
</head>
<body>
  <div class="one">Pellentesque habitant morbi tristique senectus
    et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam,
    feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero
    sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris
    placerat eleifend leo. Quisque sit amet est et sapien ullamcorper
    pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare
    sit amet, wisi.</div>
  <div class="two">Pellentesque habitant morbi tristique senectus
    et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam,
    feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero
    sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris
    placerat eleifend leo. Quisque sit amet est et sapien ullamcorper
    pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare
    sit amet, wisi.</div>
</body>
</html>