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. .NET5 它来了！微软大一统时代来临！

    今天双11,Microsoft released.NET 5(在他们的开发博客上同时发布).新版本的重点是改进.NET Core 3.1: 更小的单文件应用程序.对 Windows ARM64的支持以 ...

  2. Spring听课笔记（tg）

    0. 地址:https://www.bilibili.com/video/av21335209 1.综述,Spring主要的复习要点集中在以下几点 -- Spring的整体结构,Maven依赖(环境搭 ...

  3. Javascript关键字，条件语句，函数及函数相关知识

    关键字 条件语句 作用域 回调 关键字 根据规定,关键字是保留的,不能用作变量名或函数名. 下面是一些ECMAScript关键字的完整列表. break ,case,catch,continue,de ...

  4. SparkMLlib—协同过滤推荐算法，电影推荐系统，物品喜好推荐

    SparkMLlib-协同过滤推荐算法,电影推荐系统,物品喜好推荐 一.协同过滤 1.1 显示vs隐式反馈 1.2 实例介绍 1.2.1 数据说明 评分数据说明(ratings.data) 用户信息( ...

  5. ACM-古老的密码（排序qsort）

    古老的密码 题目描述:给定两个长度一样且不超过100的字符串,判断是否能把其中一个字符串的各个字母重排,之后对26个字母做一个一一映射,使得两个字符串相同例如,JWPUDJSTVP重排后可以得到WJD ...

  6. go-zero解读与最佳实践（上）

    本文有『Go开源说』第三期 go-zero 直播内容修改整理而成,视频内容较长,拆分成上下篇,本文内容有所删减和重构. 大家好,很高兴来到"GO开源说" 跟大家分享开源项目背后的一 ...

  7. jvm学习第一天

    视频教程链接 第一部分-jvm初识 0.jvm概览图 JVM由三个主要的子系统构成 类加载子系统 运行时数据区(内存结构) 执行引擎运行时数据区(内存结构) 1.什么是jvm 定义: ①. JVM 是 ...

  8. 基于Java+Spring Boot开源项目JeeSite的Jenkins持续交互介绍

    一.实战项目介绍- JeeSite 基于Spring Boot 2.0 数据存储MySQL 语言:Java 规模大小:适中,适合初学者 源码地址:https://gitee.com/thinkgem/ ...

  9. 设计模式（九）——装饰者模式(io源码分析）

    1 星巴克咖啡订单项目(咖啡馆): 1) 咖啡种类/单品咖啡:Espresso(意大利浓咖啡).ShortBlack.LongBlack(美式咖啡).Decaf(无因咖啡) 2) 调料:Milk.So ...

  10. 微信支付V3 SDK Payment Spring Boot 1.0.6 发布，实现留守红包，助力抗疫

    春节将至,为防控疫情,多地政府提倡员工.外来务工者留守本地过年,并鼓励企业向员工发放"留守红包".为此,微信支付推出"春节留守红包"能力,希望可以协助有发放需求 ...