Maison >interface Web >tutoriel HTML >使用css3制作渐变分割线_html/css_WEB-ITnose
使用css3制作渐变分割线_html/css_WEB-ITnose
- WBOYoriginal
- 2016-06-21 08:57:101821parcourir
原理是使用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> 效果图：
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：腾讯干货！从四个方面帮你做好移动页面性能优化_html/css_WEB-ITnoseArticle suivant：POSTCSS快速入门使用_html/css_WEB-ITnose