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. AutoMapper 10.0使用教程

    这里有个目录 什么是AutoMapper 配置 使用MapperConfiguration配置 使用Profile Instances配置 Naming Conventions(命名约定) Repla ...

  2. 洛谷P6218

    感觉此题是P4317 花神的数论题的变形版 Description 求一段区间内二进制中 \(0\) 的个数不小于 \(1\) 的个数的数的个数 Solution 数位 DP 先考虑状态转移方程式,如 ...

  3. Linux 文件搜索神器 find 实战详解，建议收藏！

    大家好,我是肖邦,这是我的第 10 篇原创文章. 在 Linux 系统使用中,作为一个管理员,我希望能查找系统中所有的大小超过 200M 文件,查看近 7 天系统中哪些文件被修改过,找出所有子目录中的 ...

  4. HttpClient之基本使用

    1.HttpClient简介 http协议可以说是现在Internet上面最重要,使用最多的协议之一了,越来越多的java应用需要使用http协议来访问网络资源,特别是现在rest api的流行,Ht ...

  5. apache和LAMP架构

    资源池: httpd依赖包:apr 和 apr-util 下载:点击这里 httpd 下载:点击这里 mysql 下载:点击这里 php 下载: 点击这里 本章资源: 点击这里 资源提取码:u2jv ...

  6. pythonchallenge总述

    Pythonchallenge是一个过关式的解谜站点,使用的是经典在线解谜站点Not Pr0n的模式:根据提示找出下一关的网页地址.和Not Pr0n不同的是,在每一关里你都需要编写程序来寻找答案.虽 ...

  7. 如何学习Java？从标识符开始

    标识符 1.定义 Java对各种变量.方法和类等要素命名时使用的字符序列称为标识符(包含但不限于:类名.变量名.方法名.接口名.包名--) 2.命名规则 1.由26个英文字母大小写,0-9,_或$组成 ...

  8. 零基础如何使用python处理字符串？

    摘要:Python的普遍使用场景是自动化测试.爬取网页数据.科学分析之类,这其中都涉及到了对数据的处理,而数据的表现形式很多,今天我们来讲讲字符串的操作.   字符串是作为任意一门编程语言的基础,在P ...

  9. 【bzoj 3232】圈地游戏（算法效率--01分数规划+图论--最小割）

    题目:DZY家的后院有一块地,由N行M列的方格组成,格子内种的菜有一定的价值,并且每一条单位长度的格线有一定的费用.DZY喜欢在地里散步.他总是从任意一个格点出发,沿着格线行走直到回到出发点,且在行走 ...

  10. 【uva 11093】Just Finish it up（算法效率--贪心）

    题意:环形跑道上有N个加油站,编号为1~N.第 i 个加油站可以加油Ai加仑,从加油站 i 开到下一站需要Bi加仑汽油.问可作为起点走完一圈后回到起点的最小加油站编号. 解法:我们把每个加油站的Ai, ...