css & box-shadow & outline
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-cardborder

@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的更多相关文章
- CSS 笔记三(Tables/Box Model/Outline)
CSS Tables border border: border-width border-style border-color|initial|inherit; border-width borde ...
- CSS Box Model(盒子模型)
CSS Box Model(盒子模型) 一.简介 所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用. CSS盒模型本质上是一个盒子,封 ...
- CSS:CSS 轮廓(outline)
ylbtech-CSS:CSS 轮廓(outline) 1.返回顶部 1. CSS 轮廓(outline) 轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用. ...
- 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 ...
- CSS Box Model 盒子模型
1. 介绍 1.1 什么是 Box Model 在HTML中的每个element(元素)都可以看作一个矩形的盒子,矩形从内到外依次由元素的内容(content).内边距(padding).边框(bor ...
- CSS BOX模型
对于box模型概念的理解以及它与决定元素最终尺寸的方式有何关系,是理解如何设定网 页上的元素位置的基础.box模型应用到块级元素.一个随之而来的概念,内联布局模型 定义了如何设定内联元素的位置. 对于 ...
- 如何设置box shadow的透明度
(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期2014-04-24) 今天发现使用box-shadow属性,可以很好的给div添加阴影效果,但是添加的效果如果是: -moz-box- ...
- UGUI text image 等加Shadow OutLine等
Text,文本控件,同NGUI中的Label.支持动态字库.大小调节.富文本(基本的html标签格式)等等.描边.阴影等需要Effect组件支持.Add Component-->UI--> ...
- 分享div、text、Box Shadow(阴影)演示及代码的页面
附图: 直接上链接:www.css88.com/tool/css3Preview/Box-Shadow.html
- CSS 奇技淫巧十八招
http://www.tuicool.com/articles/VZneI3 開始覺得自己會寫 CSS 也算有一段時間了,常常遇到一些非常實用的技巧不斷地反覆使用,但是我個人覺得對初學者來說很難從 ...
随机推荐
- Hash Map集合和Hash Set集合
HashMap集合的使用 1.1.每个集合对象的创建(new) 1.2.从集合中添加元素 1.3.从集合中取出某个元素 1.4.遍历集合 public class HashMapTest { publ ...
- 使用 Tye 辅助开发 k8s 应用竟如此简单(一)
最近正巧在进行 Newbe.Claptrap 新版本的开发,其中使用到了 Tye 来辅助 k8s 应用的开发.该系列我们就来简单了解一下其用法. Newbe.Claptrap 是一个用于轻松应对并发问 ...
- 项目管理/Bug管理/问题管理—Phabricator
项目管理/Bug管理/问题管理-Phabricator 1.项目管理/Bug管理/问题管理工具 2.Phabricator 3.Docker 方式安装Phabricator 3.1Docker方式安装 ...
- Prometheus+Grafana+kafka_exporter监控kafka
Prometheus+Grafana+kafka_exporter搭建监控系统监控kafka 一.Prometheus+Grafana+kafka_exporter搭建监控系统监控kafka 1.1K ...
- Elastic Stack简介和Elasticsearch--先搞清楚概念第二篇
ELK 是三款软件的简称:分别是Elasticsearch. Logstash.Kibana组成 .在发展的过程中,又有新成员Beats等的加入,所以就形成了Elastic Stack.ELK 是旧的 ...
- Linux Bash编程
在Linux系统介绍中,介绍了shell的多个版本,现在的Linux发行版基本都默认使用bash(Bourne Again shell),兼容Bourne shell (sh),本文将简要介绍Bash ...
- Birkhoff-von Neumann Crossbar 光交换网络的调度方案
Birkhoff-von Neumann Crossbar 光交换网络的调度方案 This is a summary aimed at looking for "high perform ...
- jQuery读取数据
1.jQuery读取JSON <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...
- hdu4348 To the moon (主席树 || 离线线段树)
Problem Description Background To The Moon is a independent game released in November 2011, it is a ...
- Codeforces Round #653 (Div. 3) D. Zero Remainder Array (数学,模拟)
题意:有一组数,刚开始时\(x=0\),每次可以让\(x\)++或让某一个元素+=\(x\)后\(x\)++,每个元素只能加一次\(x\),问最少操作多少次使得所有元素能被\(k\)整除. 题解:每个 ...