2022-08-19(文段尾行渐变消失)

文段末尾文字渐变消失


p {

margin: auto;

width: 280px;

line-height: 36px;

font-size: 20px;

-webkit-mask:linear-gradient(270deg, transparent, transparent 30%, #000),

linear-gradient(270deg, #000, #000);

-webkit-mask-size: 100% 66px, 100% calc(100% - 46px);

-webkit-mask-position: bottom, top;

-webkit-mask-repeat: no-repeat;

}

©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • 常见的移动端H5页面开发问题及解决办法汇总
    1、安卓浏览器看背景图片，有些设备会模糊。 用同等比例的图片在PC机上很清楚，但是手机上很模糊，原因是什么呢？ 经...
    tpran阅读 1,715评论 0赞 0
  • CSS3渐变 阴影 遮罩
    1. CSS3渐变 渐变: 有规律的渐渐变化,在前端中通常指颜色的变化的实现方式. 通常使用在所有接受图像的属性上...
    心存美好阅读 3,486评论 0赞 13
  • CSS1
    第一章 F12: element.style 内联样式（可以直接在上面写代码进行简单调试） user agent...
    fastwe阅读 1,560评论 0赞 0
  • 1像素边框，真的是1像素吗？
    我们在html中，如果要设置一个1像素的边框，最常见的就是border: 1px solid #000; 这句就表...
    Leslie_2386阅读 1,720评论 0赞 1
  • CSS3 gradient介绍
    今天出去吃饭，饭后搞活动送了个小礼品。礼品本身不值一提，重要的的是渐变。本篇就介绍并实际做一下这个渐变效果。 线性...
    张歆琳阅读 3,276评论 6赞 14