文字阴影加渐变出现的问题


<div class="top">
        <div>
            
            <span>订餐平台数据统计span>
        div>
        
    div>


html,
body {
    width: 100%;
    height: 100%;
    font-family: Source Han Sans CN, Microsoft Yahei;
    font-size: 18px;
    color: #fff;
    font-weight: 400;
}

.top {
    width: 94.7%;
    height: 9.35vh;
    margin: auto;
    background: url(../img/top@3x.png) center;
    background-size: cover;

}

.top div {
    height: 81%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.top span {
    font-size: 38px;
    font-weight: bold;
    color: #EFF7FB;
    text-shadow: 0px 3px 0px rgba(0, 0, 0, 0.35);

    background: linear-gradient(0deg, #D5EFFF 0%, #FFFFFF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

}

img


这是上面代码执行的效果

img


这是需要的效果
请问怎么做到需要的效果，问题出在哪里？

不知道是不是你要的效果那两张图看不太出來

span 增加个text

<span text="订餐平台数据统计">订餐平台数据统计</span>

css样式

.top span {
  font-size: 38px;
  font-weight: bold;
  text-shadow: 0px 3px 0px rgba(0, 0, 0, 0.35);
  color: #d5efff;
}
.top span:before {
  content: attr(text);
  position: absolute;
  z-index: 10;
  color: #ffffff;
  -webkit-mask: linear-gradient(to left, red, transparent);
}

img

text-shadow: 0 2px 3px rgba(0,0,0,0.35); 把你的字体颜色调亮一些，这样阴影可以没那么明显，你现在字体颜色太暗了


```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
         
html,
body {
    width: 100%;
    height: 100%;
    font-family: Source Han Sans CN, Microsoft Yahei;
    font-size: 18px;
    color: #fff;
    font-weight: 400;
}
.top {
    background-color: blue;
    height: 40px;
    line-height: 40px;
    text-align: center;
}
.top span {
    text-shadow: 0 2px 3px rgb(0 0 0 / 65%);
    font-size: 26px;
    font-weight: 700;
}
    </style>
</head>
<body>
     
<div class="top">
    <div>
        
        <span>订餐平台数据统计</span>
    </div>
    
</div>
</body>
</html>

```

  • 你可以看下这个问题的回答https://ask.csdn.net/questions/7631892
  • 我还给你找了一篇非常好的博客，你可以看看是否有帮助，链接：使用上下拉条渲染部分数据方法，解决表格有大量数据又需要显示在一页进行批量操作时的卡顿问题
  • 除此之外, 这篇博客: 仿淘宝购物车实现功能：滚动页面到【结算操作】不可视时，浏览器底部出现固定栏中的 代码： 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  • <!--操作按钮-->
<div class="cart_operating clearfix">
	<div class="cart_operating_style">
          <div class="cart_price">商品总价：（不含运费）<b>￥0.00</b></div>
          <div class="cart_btn">
                 <a href="javascript:void(0);" class="payment_btn">
                 	<div class="paymentAllowed">马上付款</div></a>
                 <a href="#" class="continue_btn"></a>
          </div>
    </div>
</div>
<!-- 浮现栏 -->
<div class="floatTitle" style="border: 1px gainsboro solid;height: 50px;line-height: 50px;display: none;width: 1000px;">
       <div style="font-size: 17px;display:inline;float: left">
       		已选商品 
       		<span style="color: red;" id="float_count">0</span> 件
       </div>
      <div class="cart_price" style="display:inline;font-size: 17px;float: 	left;padding-left: 150px;padding-right: 180px;">
                        商品总价：（不含运费）<b style="color: red">￥0.00</b>
      </div>
		<div class="cart_btn" style="display:inline; ">
		   <a href="javascript:void(0);" class="payment_btn">
		   		<div class="paymentAllowed">马上付款</div>
		   	</a>
		   <a href="#" class="continue_btn"></a>
		 </div>
</div>

    <script type="text/javascript">
	$(function() {
		$(window).scroll(function () {//鼠标滑动事件
		      var height = $(".cart_btn").offset().top;//计算该框离浏览器顶部的距离
		      if (height >= $(window).scrollTop() && height < ($(window).scrollTop() + 	       $(window).height())) {
		         $(".floatTitle").hide();
		       }else {
		          $(".floatTitle").show();
		        }
		
		 });
		  //跳转到购物车页面加载时候
		  var height = $(".cart_btn").offset().top;//计算该框离浏览器顶部的距离
		  if (height >= $(window).scrollTop() && height < ($(window).scrollTop() +   $(window).height())) {
		      $(".floatTitle").hide();
		   }else {
		      $(".floatTitle").show();
		    }
	});
</script>
  • 您还可以看一下 刘建萍老师的人工智能系列课程零基础讲解知识点和实例应用线性回归梯度下降逻辑回归课程中的 讲解机器学中会涉及到的有关数学方面的知识储备有哪些小节, 巩固相关知识点