当前位置:首页 > html5+css3 > 正文内容

实现背景色半透明渐变效果

tigon3年前 (2021-06-23)html5+css32053

父级相对定位

.box__shadow_left,.box__shadow_right{
  position: absolute;
  top:0;
  height: 65rpx;
  width: 60px;
  z-index: 9;
}  
左边的效果
.box__shadow_left{
  left: 2rpx;
  background-image: linear-gradient(to right, rgb(255, 255, 255), transparent);
}
右边的效果
.box__shadow_right{
  right: 2rpx;
  width: 16px;
  background-image: linear-gradient(to left, rgb(255, 255, 255), transparent);
}

版权声明:本文由Web学习之路发布,如需转载请注明出处。

本文链接:https://webge.net/?id=125

返回列表

上一篇:弹出框在页面左右上下居中的写法

没有最新的文章了...

“实现背景色半透明渐变效果” 的相关文章

动态计算rem适应

<script>~ function(){function computed(){let HTMl=document.documentElement,deviceW=HTML.clientWidth, //显示屏宽度deviceWdesignw=750,     &n...

弹出框在页面左右上下居中的写法

自适应写法 .dialog{ border-radius: 8px; display: flex; flex-direction: column; position: absolute; top: 50%; left: 50%;...