html front_渐变线的.html

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html front_渐变线的.html相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
<head>
<style>
.title{
  position:relative;
  text-align:center;
}
.title:before, .title:after {
  content: "";
  width: 40%;
  height: 1px;
  position: absolute;
  top: 50%; 
}
.title:before {
  background: -webkit-linear-gradient(right, #666 , #eee); 
  background: -o-linear-gradient(left, #666 , #eee); 
  background: -moz-linear-gradient(left,#666 , #eee);
  background: linear-gradient(to left, #666 , #eee); 
  left: 2px;
}
.title:after {
  background: -webkit-linear-gradient(left, #666 , #eee); 
  background: -o-linear-gradient(right, #666 , #eee); 
  background: -moz-linear-gradient(right,#666 , #eee);
  background: linear-gradient(to right, #666 , #eee); 
  right: 2px;
}
</style>
</head>
<body>

<h1>Get From<a href="https://my.oschina.net/hwxn/blog/615201">一行代码</a></h1>
<p class="title">这是一个标题</p>
</body>
</html>

以上是关于html front_渐变线的.html的主要内容，如果未能解决你的问题，请参考以下文章

QLinearGradient之画渐变线

QLinearGradient之画渐变线

边框的渐变

Canvas 线性渐变原理详解

canvas绘制箭头路径效果

python_study_1-打印星号菱形