使用css3制作渐变分割线

最新推荐文章于 2023-06-01 15:39:41 发布

原创最新推荐文章于 2023-06-01 15:39:41 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #ViewUI

前台&美工专栏收录该内容

118 篇文章

订阅专栏

本文介绍了一种利用CSS3渐变背景实现标题分割线的方法。通过设置元素:before和:after伪元素的不同渐变方向，可以创建从深色到浅色的过渡效果，形成美观的分割线。

[url]http://my.oschina.net/hwxn/blog/615201[/url]
原理是使用css3的渐变背景，再将高设为分割线的高度

<!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>
<p class="title">这是一个标题</p>
</body>
</html>