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. Map转换为格式化的YAML字符串

    yaml与java对象的互转 yaml与java对象的互转有snakeyaml <dependency> <groupId>org.yaml</groupId> & ...

  2. hashCode、equals详解

    hash和hash表是什么? hash是一个函数,该函数中的实现就是一种算法,就是通过一系列的算法来得到一个hash值,这个时候,我们就需要知道另一个东西,hash表,通过hash算法得到的hash值 ...

  3. Java实现windows，linux服务器word，excel转为PDF；aspose-words，Documents4j

    Java实现windows,linux服务器word,excel转为PDF:aspose-words,Documents4j 一.通过aspose-words将word,Excel文档转为PDF 1. ...

  4. JavaWeb——B/S,C/S结构，HTTP协议

    B/S: 开发基于B/S结构项目:目前主要采用三种服务器端语言:JSP,PHP,ASP.NET. 这三种语言构成三种常用应用开发组合:JSP+Oracle组合.PHP+MySQL体系.以及ASP.NE ...

  5. centos 7_本地源制作

    1.安装工具 yum install yum-utils createrepo yum-plugin-priorities   2.自己创建一个阿里源 vim /etc/yum.repos.d/ope ...

  6. Cobbler 自动化部署 (转载)

    https://www.cnblogs.com/linuxliu/p/7668048.html root默认密码为 123456 (建议修改) ks文件 #platform=x86, AMD64, o ...

  7. C++类基本--随笔一

    #include <iostream> using namespace std; class Teacher { public: Teacher(int m=3,int n=2) { a= ...

  8. Spring boot 自定义注解标签记录系统访问日志

    package io.renren.common.annotation; import java.lang.annotation.Documented; import java.lang.annota ...

  9. ness使用-漏扫

    1.登录nessus后,会自动弹出目标输入弹框: 输入目标IP,可通过CIDR表示法(192.168.0.0/80),范围(192.168.0.1-192.168.0.255),或逗号分隔(192.1 ...

  10. POJ - 1743 Musical Theme （后缀数组）

    题目链接:POJ - 1743   (不可重叠最长子串) 题意:有N(1<=N<=20000)个音符的序列来表示一首乐曲,每个音符都是1..88范围内的整数,现在要找一个重复的子串,它需要 ...