CSS3实现两头细中间粗的线(纵向)与一线两色\渐变线\文字投影\文字渐变等

性野喜悲

已于 2023-04-18 14:56:40 修改

阅读量3k

点赞数 2

分类专栏： vue html+css 经验分享文章标签： css3 css html

于 2020-08-12 16:39:06 首次发布

本文链接：https://blog.csdn.net/leng0920/article/details/107960897

版权

经验分享同时被 3 个专栏收录

149 篇文章 1 订阅

订阅专栏

vue

136 篇文章 4 订阅

订阅专栏

html+css

113 篇文章 1 订阅

订阅专栏

注意：1rem==100px,可自行换算

文字描边

html：

<div class="answer-title">共2道题，全对即可集章成功，可重复答题</div>

css:

        .answer-title {
            font-size: 0.28rem;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #00FFEB;
            line-height: 0.4rem;
            letter-spacing: 1px;
            -webkit-text-shadow: -0.02rem 0.02rem 0 #004BFF, 0.02rem 0.02rem 0 #004BFF,0.02rem -0.02rem 0 #004BFF,-0.02rem -0.02rem 0 #004BFF;
            -moz-text-shadow: -0.02rem 0.02rem 0 #004BFF, 0.02rem 0.02rem 0 #004BFF,0.02rem -0.02rem 0 #004BFF,-0.02rem -0.02rem 0 #004BFF;
            -ms-text-shadow: -0.02rem 0.02rem 0 #004BFF, 0.02rem 0.02rem 0 #004BFF,0.02rem -0.02rem 0 #004BFF,-0.02rem -0.02rem 0 #004BFF;
            -o-text-shadow: -0.02rem 0.02rem 0 #004BFF, 0.02rem 0.02rem 0 #004BFF,0.02rem -0.02rem 0 #004BFF,-0.02rem -0.02rem 0 #004BFF;
            text-shadow: -0.02rem 0.02rem 0 #004BFF, 0.02rem 0.02rem 0 #004BFF,0.02rem -0.02rem 0 #004BFF,-0.02rem -0.02rem 0 #004BFF;
        }

效果：

1、文字中间粗两头细

html:

<div class="homeLine"></div>

css:

  .homeLine{
        width:1px;
        height:486px;
        background:linear-gradient(244deg,rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);
    }

效果图:

2、一线两色

html：

<div class="blue-gray-line"></div>

css：

    .blue-gray-line{
      width: 300px; height: 23px; border-right: 150px solid rgba(216, 216, 216, 1); background: rgba(50, 91, 223, 1);
    }

效果图(想要细一点就调整高度)：

3、渐变线

html:

<div class="left-top-line"></div>

css:

  .left-top-line {
    width: 100%;
    height: 6px;
    background: linear-gradient(
      270deg,
      rgba(43, 250, 211, 1) 0%,
      rgba(43, 250, 211, 1) 50%,
      rgba(255, 171, 79, 1) 100%
    );

  }

效果图:

4、文字投影

html:

<div class="activity-rules-text">活动规则</div>

css:

      .activity-rules-text{
          box-sizing: border-box;
          -moz-box-sizing: border-box;
          -webkit-box-sizing: border-box;
          font-size: 46px;
          font-family: Source Han Sans CN;
          font-weight: 800;
          text-align:justify;
          color: #E6D696;
          background: linear-gradient(180deg, blue 0%, blue 100%);
          text-shadow:#FAE260 -5px -5px 0px;
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        
      }

效果图:

5、渐变文字

html:

	<div class="text-panel">
		<!-- 文字必须用span包裹,不然不会出现渐变 -->
		<span class="text">
			Gradient Text(渐变文字)
		</span>
	</div>

css:

	.text-panel{
		padding: 300px;
		background-color: beige;
	}
   .text{
		    font-size: 30px;
		    background: linear-gradient(
		      228deg,
		      rgba(0, 100, 255, 1) 0%,
		      rgba(43, 250, 211, 1) 100%
		    );
		    background-clip: text;
		    -webkit-background-clip: text;
		    -o-background-clip: text;
		    -moz-background-clip: text;
		    -ms-background-clip: text;
		    color: transparent;
	}

效果图: