Rumah >hujung hadapan web >html tutorial >使用css3制作渐变分割线_html/css_WEB-ITnose
使用css3制作渐变分割线_html/css_WEB-ITnose
- WBOYasal
- 2016-06-21 08:57:101822semak imbas
原理是使用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> 效果图：
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：腾讯干货！从四个方面帮你做好移动页面性能优化_html/css_WEB-ITnoseArtikel seterusnya：POSTCSS快速入门使用_html/css_WEB-ITnose