css学习笔记2--多重边框

(1) box-shadow方案

box-shadow支持逗号分隔，我们可以创建任意数量的投影。

它不会影响布局，也不会受到box-sizing的影响。

创建的假“边框”出现在元素的圈外，不会影响鼠标事件。但是可以通过给box-shadow属性加上insert关键字，使投影绘制在元素的圈内。

注意：它是层层叠加的，因此需要调整扩张半径。

        body {background: url("xxxx.jpg") ;}div {margin: 100px;width: 200px;height: 200px;background: yellowgreen;box-shadow: 0 0 0 10px #655,0 0 0 15px deeppink,0 0 0 20px rgba(0,0,0,.2);}
复制代码

效果如图：

(2) outline方案

如果只需要两层边框，那么你完全可以使用border+outline来实现，这一方法的优点在于边框样式十分灵活（比如虚线边框）。

        body {background: url("xxxx.jpg") ;}div {margin: 100px;width: 200px;height: 200px;background: yellowgreen;border: 10px solid #655;outline: 5px solid deeppink;}
复制代码

转载于:https://juejin.im/post/5c6ce8ce6fb9a049fb443de6

css学习笔记2--多重边框相关推荐

【温故知新】CSS学习笔记（盒子边框介绍）
CSS盒子边框 CSS中其实就三个大模块:盒子模型.浮动.定位. 其中所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子,也就是一个装内容的容器,每个矩形都由元素的内容.内边距(padding ...
HTML/CSS学习笔记03【CSS概述、CSS选择器、CSS属性、CSS案例-注册页面】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
HTML/CSS学习笔记01【概念介绍、基本标签】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
div+css学习笔记一（转）
div+css学习笔记一 (2011-05-12 07:32:08) 标签: div css 居中背景图片 ie6 ie7 margin 杂谈分类: 网页制作 1.IE6中用了float之后导致m ...
HTML+CSS学习笔记（3）- 认识标签（2）
HTML+CSS学习笔记(3)- 认识标签(2) 1.使用ul,添加新闻信息列表在浏览网页时,你会发现网页上有很多信息的列表,如新闻列表.图片列表, 这些列表就可以使用ul-li标签来完成.ul-l ...
CSS 学习笔记 - 盒模型
CSS学习笔记 - 盒模型外边距margin 内边距padding 背景background 背景图background-image 边框border 样式宽度颜色圆角边框图片border- ...
CSS学习笔记（详细，不定期更新）
CSS 学习笔记 CSS书写规范顺序布局位置属性(position, top, right, z-index, display, float等) 自身大小盒子模型(width, height, p ...
CSS 学习笔记 - 网格布局（栅格系统）
CSS 学习笔记 - 网格布局(栅格系统) 开启网格模式基本概念属性说明容器属性内容属性效果展示 grid-template-rows.grid-template-columns 基本用法 ...
CSS学习笔记（狂神-完整版）
CSS学习笔记(狂神-完整版) HTML + CSS + JavaScript 结构 + 表现 + 动作 1.什么是CSS 如何学习 CSS是什么 CSS怎么用(快速入门) CSS选择器(重点+难点) ...

css学习笔记2--多重边框

css学习笔记2--多重边框相关推荐

最新文章

热门文章