L-YASHU 2017-09-09 10:18 采纳率: 41.7%
浏览 3511

CSS实现横线两段逐渐变细变淡

图片说明

请问大家，怎么用CSS实现上图中横线两端逐渐变细变淡的效果？

  • 写回答

2条回答 默认 最新

  • /*----无忧----*/ 2017-09-11 02:50
    关注

    用css3渐变就好啦！

     <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width:500px;
            height:2px;
            background: -webkit-linear-gradient(left, #fff 14%,#333 50%,#fff 100%);
        }
    </style>
</head>
<body>
<div class="box"></div>
</body>
</html>
    评论

报告相同问题？

  • 前端基础之CSS
    2020-03-15 11:06
    autotian的博客 css：最大的贡献就是让HTML从样式中解脱，实现了HTML专注于结构呈现，样式交给CSS。 1、CSS的初识 css（Cascading Style Sheets）类化样式，提供了丰富的功能，如字体、颜色背景的控制及整体排版等...
  • 01-CSS3基础
    2022-03-06 19:12
    人俗� 话不多的博客 css规则主要有两个盒子模型主要部分构成: 选择器以及一条或多条声明. 属性和属性值以键值对的形式出现 属性和属性值之间用 “:” 分开 多个键值对中间用";" 进行区分 代码规范 空格规范: p { color: ...
  • 基于java web新生报到系统设计与实现
    2024-07-24 07:00
    翰文编程的博客 而且在本系统开发完成后，不必增加管理工作人员的岗位，故没有人力资源成本的增加，反而，可以充分提高相关人员的工作效率，用很低的成本就可实现较大的效益。信息技术正是基于计算机而发展起来的，随着计算机的大量...
  • LayUI_02 前端框架 页面元素
    2022-07-11 11:38
    £轻描～淡写°的博客 目录一、栅格系统与后台布局示例codeHTML二、layui 颜色设计感三、字体图标四、CSS3动画类按钮 - 页面元素五、表单 - 页面元素HTMLcode行区块结构code六、导航相关 - 页面元素七、基础菜单 - 页面元素HTMLcodeJS八、...
  • 前端笔记(Html+CSS+JS+DOM+网页特效+jQuery+HTML5+CSS3+canvas 标签+web开发重难点+面向对象+AJAX)
    2018-07-02 00:09
    thinkplayer的博客 并且逐渐变小。（h1标签是最大的。） 注意：一个页面只能有一个h1标签。 p标签( P aragraph)：段落标签 作用：给页面的上一段文字加上段落的说语义 代码： 这是段落 特点：页面上的一个段落，...
  • HTML知识点大全 + CSS
    2019-01-10 19:53
    北岭有燕的博客 看到一段觉得比较励志的话：“当年我是个很普通的屌丝，一事无成，同学都很优秀，各种奖学金拿到天上去。终于发现一件可以做得来的事情，于是有了兴趣，然后在”follow your heart”这句话的激励下，披荆斩棘在前端...
  • 前端知识整理
    2019-03-06 19:00
    CGGAO的博客 前端不规范，运营两行泪 *HTML HTML 语义化 HTML 语义化是指仅仅从 HTML 元素上就能看出页面的大致结构，比如需要强调的内容可以放在 <strong> 标签中，而不是通过样式设置 <span> 标签去做。不同...
  • Vue2基础知识概览与总结
    2023-07-10 12:05
    染个代码的博客 (后面的VUE生命周期会详细讲解这个例子) 以下是直接使用methods中的方法导致的无限循环bug： <html lang="en"> <head> <title>Documenttitle> head> <body> <div id="app"> 好好吃，颜色会变淡h2> {{changeStyle()}}...
  • CSS变量实用指南及注意事项
    2018-10-29 11:28
    weixin_34306593的博客 近年来，一些动态特性已经开始成为 CSS 语言本身的一部分。 CSS变量 – 官方的术语为 “自定义属性” – 已经已经加入规范并且具有很好的浏览器支持，而 CSS mixins 目前正在开发中 。...什么是CSS变...
  • Vue.js 基础
    2023-02-21 22:11
    读书的小蜗牛的博客 （在控制台中 age 的颜色是淡紫色） Object.keys(person) 可以获得一个以对象属性为元素的数组，但是里面没有age，因为age不参与枚举 ​ 如果想要 age 属性参与枚举，可以配置 enumerable 属性 Object....
  • 没有解决我的问题, 去提问