作者:手机用户2502856895 | 来源:互联网 | 2023-05-18 14:46
css3 渐变标题线
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content=" name="viewport">
<title>css3 渐变标题线title>
<style type="text/css"> *{list-style: none;} .jbfgx{ width: 100%; height: 100px; text-algin:center; } .jbfgx .title{ position: relative; text-align: center; } .jbfgx .title:before, .cutting_line:after{ content:""; width: 40%; height: 1px; position: absolute; top: 50%; } .jbfgx .title:before{ background: -webkit-linear-gradient(right, #666, #eee); background: -moz-linear-gradient(left, #666, #eee); background: -ms-linear-gradient(left, #666, #eee); background: -o-linear-gradient(left, #666, #eee); background: linear-gradient(to left, #666, #eee); left: 2px; } .jbfgx .title:after{ background: -webkit-linear-gradient(left, #666, #eee); background: -moz-linear-gradient(right, #666, #eee); background: -ms-linear-gradient(right, #666, #eee); background: -o-linear-gradient(right, #666, #eee); background: linear-gradient(to right, #666, #eee); right: 2px; } style>
head>
<body>
<div class="jbfgx">
<p class="title">这是个标题p>
div>
body>
html>