css & box-shadow & outline

CSS3 box-shadow : 4 sides symmetry

https://learning.xgqfrms.xyz/CSS3/box/box-shadow/box-shadow-4sides-symmetry.html

https://www.w3schools.com/cssref/tryit.asp?filename=trycss_outline

demo

overwrite el-card border



@charset "utf-8";

.clickable{

  cursor: pointer;

}

.not-clickable{

  cursor: default;

}

[data-class="selected"] {

  box-sizing: border-box;

  // border: 1px solid red;

  // width: calc(100% - 2px);

  // height: calc(100% - 2px);

}

[data-class="not-selected"] {

  box-sizing: border-box;

  // border: 0;

}

[data-class="selected"] > div.el-card {

  border: 1px solid red !important;

  box-shadow: 0px 0px 5px 5px #f00;

  // outline: 3px dotted green;

}

[data-class="not-selected"] > div.el-card {

  border: 1px solid #EBEEF5;

}

xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

css & box-shadow & outline的更多相关文章

  1. CSS 笔记三（Tables/Box Model/Outline）

    CSS Tables border border: border-width border-style border-color|initial|inherit; border-width borde ...

  2. CSS Box Model（盒子模型）

    CSS Box Model(盒子模型) 一.简介 所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用. CSS盒模型本质上是一个盒子,封 ...

  3. CSS：CSS 轮廓（outline）

    ylbtech-CSS:CSS 轮廓(outline) 1.返回顶部 1. CSS 轮廓(outline) 轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用. ...

  4. CSS Box Model All In One

    CSS Box Model All In One CSS 盒子模型 All In One CSS Box Model CSS Box Model Module Level 3 W3C Working ...

  5. CSS Box Model 盒子模型

    1. 介绍 1.1 什么是 Box Model 在HTML中的每个element(元素)都可以看作一个矩形的盒子,矩形从内到外依次由元素的内容(content).内边距(padding).边框(bor ...

  6. CSS BOX模型

    对于box模型概念的理解以及它与决定元素最终尺寸的方式有何关系,是理解如何设定网 页上的元素位置的基础.box模型应用到块级元素.一个随之而来的概念,内联布局模型 定义了如何设定内联元素的位置. 对于 ...

  7. 如何设置box shadow的透明度

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期2014-04-24) 今天发现使用box-shadow属性,可以很好的给div添加阴影效果,但是添加的效果如果是: -moz-box- ...

  8. UGUI text image 等加Shadow OutLine等

    Text,文本控件,同NGUI中的Label.支持动态字库.大小调节.富文本(基本的html标签格式)等等.描边.阴影等需要Effect组件支持.Add Component-->UI--> ...

  9. 分享div、text、Box Shadow(阴影)演示及代码的页面

    附图: 直接上链接:www.css88.com/tool/css3Preview/Box-Shadow.html

  10. CSS 奇技淫巧十八招

    http://www.tuicool.com/articles/VZneI3   開始覺得自己會寫 CSS 也算有一段時間了,常常遇到一些非常實用的技巧不斷地反覆使用,但是我個人覺得對初學者來說很難從 ...

随机推荐

  1. Mapper查询技巧

    Sql字段动态比较判断 <sql id="getUserInfoList_body"> SELECT * from userinfo <dynamic prepe ...

  2. 应急响应-PDCERF模型 (转)

    目录 应急响应流程 防御模型 SDL 应急响应流程 很多人认为应急响应就是脸上被黑的机器去查查什么情况,是不是被中了botnet病毒.是不是被人中了rootkit等,是不是被挂了webshell等.应 ...

  3. ifndef /define/ endif 作用和用法

    问题:ifndef/define/endif"主要目的是防止头文件的重复包含和编译====================================================== ...

  4. UML——构件图

    宏观导图: 细节探究: 一.What 构件:是一个应用很广的名词,在建筑工程.机械工程.软件工程中等都有该概念.其实,说道底表达的都是一个意思.就像是标准化生产出来的零部件一样,具有可替换性.同质性, ...

  5. Flink-v1.12官方网站翻译-P014-Flink Architecture

    Flink架构 Flink是一个分布式系统,为了执行流式应用,需要对计算资源进行有效的分配和管理.它集成了所有常见的集群资源管理器,如Hadoop YARN.Apache Mesos和Kubernet ...

  6. python爬取酷我音乐

    我去!!!我之后一定按照搜索方式下载歌曲~~~~~~~~~ 1.首先打开我们本次主讲链接:http://www.kuwo.cn/  2.刚开始我就随便点了一个地方,然后开始在后台找歌曲的链接地址.但是 ...

  7. Codeforces Global Round 11 B. Chess Cheater (贪心,结构体排序)

    题意:你和朋友进行了\(n\)个回合的棋艺切磋,没有平局,每次要么输要么赢,每次赢可以得一分,假如前一局也赢了,那么可以得两分,结果已成定局,但是你确可以作弊,最多修改\(k\)个回合的结果,问你作弊 ...

  8. hdu5433 Xiao Ming climbing

    Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others) Total Submission ...

  9. Codeforces Round #304 (Div. 2) C. Basketball Exercise (DP)

    题意:给你两个长度相同的数组,每次从两个数组中选数(也可以不选),但是不可以在同一个数组中连续选两次,问能选的最大值是多少? 题解:dp,\(dp[i][0]\)表示第\(i\)个位置不选,\(dp[ ...

  10. 错误: 未能完成程序集的安装(hr = 0x8007000b)。探测终止。

     解决方案:VS中"工具"->"选项"->"Web项目"->"对网站和项目使用IIS Express的64位版& ...