CSS实现推荐高亮区域

如何灰色其他DOM元素,只高亮所选元素。

  1. 高亮区域position 绝对定位或者固定定位
 .x { 
       position: absolute; 
       // ...other style
  }
  1. 使用box-shadow, 无限大阴影即可(border也可以,但是会导致盒模型变化)。
 .x { 
       position: absolute; 
       box-shadow: 0 0 0 1000em rgb(0,0,0,0.3);
  }
  1. 添加需要高亮区域的宽高及位置
 .x { 
       position: absolute; 
       box-shadow: 0 0 0 1000em rgb(0,0,0,0.3);
       height: 100px;
       width: 300px;
       top: 300px;
       left:  200px; 
  }
  1. 增加出场动画 - [可选]
  .x {
       position: absolute; 
       box-shadow: 0 0 0 1000em rgb(0,0,0,0.3);
       height: 100px;
       width: 300px;
       top: 300px;
       left:  200px; 
       box-shadow .2s;
   }

核心元素 box-shadow 盖上去,dom本身没有颜色即可。

  • 简单预览效果,放大box-shadow范围即可。
image.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1、常用那几种浏览器测试?有哪些内核(Layout Engine)?- 浏览器:IE,Chrome,FireFox...
    编码梦想家阅读 1,367评论 0 1
  • 转自:http://www.cnblogs.com/star91/p/5659134.html 1.HTML5新元...
    程芬KELA阅读 367评论 0 0
  • HTML5 1.HTML5新元素 HTML5提供了新的元素来创建更好的页面结构: 标签描述 定义页面独立的内容区域...
    L怪丫头阅读 2,831评论 0 4
  • 1、属性选择器:id选择器 # 通过id 来选择类名选择器 . 通过类名来选择属性选择器 ...
    Yuann阅读 1,656评论 0 7
  • 一、CSS中的属性和取值 1.文本类属性: text-align属性:此标签内容的水平对齐方式,内容须为具体文字/...
    刘远舟阅读 527评论 0 1