`

使用css3制作渐变分割线

 
阅读更多
http://my.oschina.net/hwxn/blog/615201
原理是使用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>

效果图：
分享到：
| jQuery动画插件： Velocity.js
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    html5+css3制作各种响应式不规则的网页单元分割线

    CSS3的伪元素如`:before`和`:after`则可以用来在元素前后添加内容，这对于创建无内容的装饰性分割线非常实用。我们可以为这些伪元素设置背景颜色、边框或使用渐变，以实现不规则的视觉效果。结合使用`content`属性和...

    纯CSS3制作文字分割特效.zip

    【标题】：“纯CSS3制作文字分割特效” 在网页设计中，吸引用户的注意力并提供良好的用户体验是至关重要的。本资源“纯CSS3制作文字分割特效”提供了一种创新且实用的方法，利用CSS3的先进技术来增强文字展示效果，...

    html设置分割线虚线,css border设置虚线样式

    除了使用`&lt;hr&gt;`标签，还可以使用HTML元素如`&lt;div&gt;`或`&lt;span&gt;`来创建自定义的分割线，并同样通过CSS来设置虚线样式。例如： ```html &lt;div class="custom-divider"&gt;&lt;/div&gt; ``` 对应的CSS代码： ```css .custom-...

    几款漂亮的分割线，很实用

    使用这些分割线时，可以通过调整CSS样式来定制颜色、宽度、边距等属性，使其完美融入现有的设计中。 总的来说，分割线虽然看似简单，但其设计和应用却能显著影响到用户对内容的感知和页面的整体美感。选择一款合适...

    动态分割线

    3. **性能优化**：考虑到加载速度和设备性能，动态分割线的大小应尽可能小，同时也可以利用CSS精灵或WebP等现代格式来减少文件大小。 4. **兼容性**：虽然GIF在大多数浏览器中都支持，但为了更好的用户体验，可以...

    HTML分割线特效汇总实例

    分割线特效可以通过使用CSS样式或JavaScript来实现。以下是一些常用的分割线特效： 1. 两头渐变透明 使用`FILTER`属性可以实现渐变透明的效果，例如： ```html (opacity=100,finishopacity=0,style=3)" width="80%...

    半圆加虚线分割线效果

    标题“半圆加虚线分割线效果”描述了一种特定的界面设计，它结合了半圆形的图形与虚线分割线，以美观且功能性的样式分隔不同的内容区域。这种效果可以用于列表项之间的分隔，或者在布局中创造视觉上的区分。 实现...

    创意分割线404页面代码.rar

    通过CSS3，我们可以实现更高级的特性，如变换（transform）、过渡（transition）和动画（animation），这些都可能被应用在创意分割线上，使其更具视觉冲击力。 再者，网页特效通常结合了HTML、CSS和JavaScript的...

    16种很赞的 CSS3 & SVG 创意弹窗效果

    12. 带过渡的渐变背景：使用CSS3的linear-gradient或radial-gradient，弹窗背景可以平滑过渡。 13. 交互式提示：弹窗内嵌SVG元素，用户点击后显示更多信息或功能。 14. 视差滚动：结合视差滚动技术，弹窗内容随...

    HTML5+CSS3入门基础知识

    * DIV 标签（div）：用于在网页中创建一个分割线。 * SPAN 标签（span）：用于在网页中创建一个内联元素。 表格标签 HTML5 中的表格标签用于在网页中创建表格。常见的表格标签包括： * 表格标签（table）：用于在...

    CSS3文字特效艺术文字样式代码.zip

    7. **多列布局**：`column-count`和`column-gap`等属性可以将文本分割成多列显示，适合制作杂志或报纸风格的布局。 8. **字体渐变**：CSS3的`font-family`属性支持字体堆栈，可以指定一系列字体，浏览器会按顺序...

    4种纯CSS3炫酷文字动画特效

    在本文中，我们将深入探讨如何使用CSS3来创建四种炫酷的文字动画特效，这些特效能够为网站增添视觉吸引力，提升用户体验。CSS3是层叠样式表的最新版本，它引入了许多新的特性和功能，其中就包括强大的动画效果。在"4...

    CSS3彩虹色阶梯式loading加载动画特效

    总结来说，创建这个CSS3彩虹色阶梯式loading加载动画特效，需要熟练运用`@keyframes`规则定义动画，通过`animation`属性将动画应用到元素上，利用选择器和伪类控制不同元素的动画效果，以及使用颜色渐变和响应式设计...

    HTML5+CSS3开发商业站点Chapter10.pptx

    - **CSS3渐变**：使用线性渐变等效果美化页面。 - **背景属性**： - **背景颜色**：使用`background-color`属性设置背景色。 - **背景图像**：使用`background-image`属性添加背景图片。 - **背景定位**：使用`...

    css3实现结账Form表单 css3实现结账Form表单网页特效.zip

    **CSS3伪元素**如`::before`和`::after`也常用于添加装饰性内容或布局辅助元素，比如在输入框前添加货币符号，或者在表单下方添加分割线。 此外，**JavaScript和jQuery**在这个项目中可能用于实现更复杂的功能，...

    css波浪线，实例代码

    在CSS世界中，波浪线通常用于创建各种视觉效果，比如边框、分割线或装饰元素。本实例将深入探讨如何使用CSS实现波浪线效果，以及如何通过HTML和CSS结合来构建一个简单的示例。 首先，让我们了解CSS中与波浪线相关的...

    网页中常用的渐变条常常

    3. 分割线：用渐变条代替传统线条，增加设计的创新感。 4. 按钮：为按钮添加渐变效果，可以提升交互体验。 5. 图片遮罩：将渐变层叠加在图片上，可以创造独特的视觉效果。 六、浏览器兼容性 虽然现代浏览器对CSS...

    花纹背景的个人博客CSS模板_花纹橙色花博客渐变.rar

    4. bg_sidebar_title.jpg、bg_horz.jpg、bg_page.jpg、bg_sidebar.jpg、bg.jpg：这些可能是侧边栏、页面分割线、其他特定区域的背景图像，增加了博客的视觉层次感和细节。 综合以上信息，这个压缩包提供了一个完整...

    100套CSS3分页效果

    在网页设计中，分页是一种常见的用户界面元素，用于将大量内容分割成多个部分，方便用户逐步浏览。CSS3作为现代网页设计的核心技术之一，提供了丰富的样式和动画效果，使得分页设计更具吸引力和交互性。"100套CSS3...

    CSS3实现的透明方块碎片登录框特效源码.zip

    10. **伪元素（::before和::after）**：通过这些伪元素，可以在元素内容前后插入额外的结构，用于创建装饰性元素或辅助布局，比如在登录框内添加分割线或背景图案。 通过以上CSS3特性，开发者可以创造出极具创意的...

Magicbox
Global site tag (gtag.js) - Google Analytics