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. C++ Primer Plus读书笔记（九）内存模型和名称空间

    1.作用域和链接 int num3; static int num4; int main() { } void func1() { static int num1; int num2; } 上边的代码 ...

  2. 使用Robo 3T操作MongoDB数据库

    安装Robo 3T连接MongoDB数据库教程:https://blog.csdn.net/baidu_39298625/article/details/98845789 在IDEA中用三个jar包链 ...

  3. loj黑暗城堡

    黑暗城堡 题目描述 你知道黑暗城堡有\(N\)个房间,M 条可以制造的双向通道,以及每条通道的长度. 城堡是树形的并且满足下面的条件: 设\(D_i\)为如果所有的通道都被修建,第i号房间与第1号房间 ...

  4. tricks - 思维

    编辑 目录 tricks 系列 随机的性质 bitmask 建图 最基本的 黑白染色 Kruskal重构树 并查集维护值域 带根号的数三元环 根号分治 调和级数哈希 多属性哈希 时光倒流 时光反复横跳 ...

  5. SpringMVC听课笔记（十一：国际化）

    1. 关于国际化 -- 在页面上根据浏览器的语言设置情况对文本(不是内容),时间,数值进行本地化处理 使用JSTL的fmt标签 -- 可以在bean中获取国际化资源文件 Locale对应的消息 在be ...

  6. Language Guide (proto3) | proto3 语言指南（九）Oneof结构

    Oneof - Oneof结构 如果消息包含多个字段,并且最多只能同时设置一个字段,则可以使用oneof功能强制执行此行为并节省内存. oneof字段与常规字段类似,但oneof共享内存中的所有字段除 ...

  7. 玩转IDEA项目结构Project Structure，打Jar包、模块/依赖管理全搞定

    前言 你好,我是A哥(YourBatman). 如何给Module模块单独增加依赖? 如何知道哪些Module模块用了Spring框架,哪些是web工程? IDEA如何打Jar包?打War包? 熟练的 ...

  8. js部分知识整理，google浏览器的代码调试

    整理一些学过的js知识点,包括js中3个括号的含义,this的使用,递归,google浏览器的代码调试.Location的属性及常用方法,window对象常用方法,open方法等. js括号 在js中 ...

  9. Redis 实战 —— 13. 扩展 Redis

    简介 当数据量增大或者读写请求增多后,一台 Redis 服务器可能没办法再存储所有数据或者处理所有读写请求,那么就需要对 Redis 进行扩展,保证 Redis 在能存储所有数据对情况下,同时能正常处 ...

  10. Codeforces Round #574 (Div. 2) E.OpenStreetMap

    题目链接 题目的意思就是给你一个矩阵你要求给定子矩阵的最小值的和 单调队列扫两边即可 #include <bits/stdc++.h> #define ll long long #defi ...