// 为div添加边缘淡化效果
function fadeEdgesWithOverlay(selector) {
  $(selector).css({
    'position': 'relative',
    'overflow': 'hidden'
  }).append(
    $('<div>').css({
      'position': 'absolute',
      'top': 0,
      'left': 0,
      'right': 0,
      'bottom': 0,
      'background': 'linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 10%, rgba(255,255,255,0) 90%, rgba(255,255,255,1) 100%)',
      'pointer-events': 'none'
    })
  );
}

// 使用示例
fadeEdgesWithOverlay('.my-div');

function fadeEdgesWithMask(selector) {
  $(selector).css({
    '-webkit-mask-image': 'linear-gradient(to right, black 0%, transparent 10%, transparent 90%, black 100%)',
    'mask-image': 'linear-gradient(to right, black 0%, transparent 10%, transparent 90%, black 100%)'
  });
}

// 使用示例
fadeEdgesWithMask('.my-div');

function dynamicFadeEdges(selector) {
  $(selector).each(function() {
    var $this = $(this);
    var width = $this.width();
    var fadeWidth = width * 0.1; // 10%的宽度用于淡化
    
    $this.css({
      'mask-image': `linear-gradient(to right, 
        black 0%, 
        transparent ${fadeWidth}px, 
        transparent ${width - fadeWidth}px, 
        black ${width}px)`,
      '-webkit-mask-image': `linear-gradient(to right, 
        black 0%, 
        transparent ${fadeWidth}px, 
        transparent ${width - fadeWidth}px, 
        black ${width}px)`
    });
  });
}

// 使用示例（需要在元素可见后调用）
$(window).on('load resize', function() {
  dynamicFadeEdges('.my-div');
});