CSS揭秘—多重边框（二）
前言：
所有实例均来自《CSS揭秘》，该书以平时遇到的疑难杂症为引，提供解决方法，只能说秒极了，再一次刷新了我对CSS的认知
该书只提供了关键CSS代码，虽然有在线示例代码链接，但访问速度较慢。下面示例代码是我自己写的，若有错误，欢迎指正
注：我会在最开头附上每个相关示例所需CSS属性链接作为补充，以供查阅和学习
我会在每个示例最后附上书中提供的在线示例代码链接；
我会从书中选择一些css技巧来分享，有兴趣的小伙伴可以去看看这本书，你不会失望的
CSS需知：
场景：
如果让你实现下图多重边框的效果，你会怎么做呢？
可能聪明的你首先想到利用 outline 属性来实现，如下代码
div {
margin: 50px auto;
width: 200px;
height: 200px;
background: yellowgreen;
border: 10px solid #655;
outline: 10px solid deeppink;
}
如果你还想加上阴影效果，使用box-shadow 属性即可，
box-shadow: 10px 10px 5px 10px rgb(0,0,0,.5);
问题：
现在有个问题，如果多重边框像上面一样只有2重，那使用 outline 属性是没有问题的。
但如果是3重，4重，甚至更多重边框的情况就行不通了，如下图，3重边框
解决方法：
上面问题只需用 box-shadow 属性，即可迎刃而解。
box-shadow支持逗号分隔，比如像下面这样，想加几个边框就加几个，用逗号分隔开就行
box-shadow: 0 0 0 10px #655, 0 0 0 20px deeppink, 0 0 0 30px brown;
注：这里要注意 box-shadow的第四个属性，表示阴影的大小（就是上面代码的10px，20px，30px）
如果你想要添加多条边框，就需要把阴影大小的值依次递增，否则无效
box-shadow: 0 0 0 10px #655, 0 0 0 20px deeppink,0 0 0 30px brown, 10px 10px 5px 30px rgb(0, 0, 0, .5);
注：如果你还要添加阴影效果，也需要把阴影大小的值进行调整，只能 >= 你设置的最后一条边框的阴影大小值
比如上面代码中的3条边框阴影大小值分别为，10px，20px，30px，那后面阴影的值只能设置30px，或比30px大
DEMO
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<title></title>
<style>
div {
margin: 50px auto;
width: 200px;
height: 200px;
background: yellowgreen;
box-shadow: 0 0 0 10px #655, 0 0 0 20px deeppink,0 0 0 30px brown, 10px 10px 5px 30px rgb(0, 0, 0, .5);
}
</style>
</head> <body> <div></div>
</body> </html>
书中在线实例链接：http://dabblet.com/gist/012289cc14106a1bd7a5
CSS揭秘—多重边框（二）的更多相关文章
- CSS实现多重边框和内凹圆角
CSS实现多重边框 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=&q ...
- [css 揭秘]：CSS揭秘 技巧（二）：多重边框
我的github地址:https://github.com/FannieGirl/ifannie/ 源码都在这上面哦! 喜欢的给我一个星吧 多重边框 问题:我们通常希望在css代码层面以更灵活的方式来 ...
- CSS揭秘-半透明边框与多重边框
场景一: 实现半透明边框: 由于CSS样式的默认行为,背景色的渲染范围是 content+padding+border. 半透明边框被主调色影响, 实现的效果为 解决方案: 使用backgroun ...
- 【基础】CSS实现多重边框的5种方式
简言 目前最优雅地实现多重边框的方案是利用CSS3 的 box-shadow属性,但如果要兼容老的浏览器,则需要选择其它的方案.本文简要地列举了几种多重边框的实现方案,大家可以根据项目实际及兼容性要求 ...
- CSS揭秘—透明边框（一）
前言: 所有实例均来自<CSS揭秘>,该书以平时遇到的疑难杂症为引,提供解决方法,只能说秒极了,再一次刷新了我对CSS的认知 该书只提供了关键CSS代码,虽然有在线示例代码链接,但访问速度 ...
- [css]《css揭秘》学习（二）-多重边框
一.box-shadow属性 box-shadow除了生成投影,还可以用来生成边框:它接受第4个值作为扩张半径,0的x轴偏移+0的y轴偏移+0的模糊值+0的扩张半径,得到的显示效果和边框是一样的:但是 ...
- CSS揭秘之多重边框&连续的图像边框
1.多重边框 我们可以通过使用border-image来写一个多重边框,或使用多个元素来模拟多重边框,不过我们有更好的办法来制作一个多重边框,那就是使用box-shadow的第四个参数(称为扩张半径) ...
- CSS揭秘（二）背景与边框
Chapter2 背景与边框 1. 半透明边框 基础:了解 RGBA & HSLA 颜色(色调 0~360.饱和度.亮度 (0%黑色~100%白色).透明度) 默认情况下,背景在边框的下层,容 ...
- css多重边框
一.使用box-shadow实现多重边框 html <div class="multiple"></div> css .multiple{ backgrou ...
随机推荐
- node 单个表加条件查询
export const getTeacher = query => { const wh = model.query(qb => { qb.where('isNoLectur ...
- my new blog
博客迁移至: https://www.dboop.com/
- 第三次Java作
- [Hadoop]Hadoop章2 HDFS原理及读写过程
HDFS(Hadoop Distributed File System )Hadoop分布式文件系统. HDFS有很多特点: ① 保存多个副本,且提供容错机制,副本丢失或宕机自动恢复.默认存3份. ② ...
- 修改pudb颜色
2019-02-19,18点20vim调整颜色vim ~/.vimrc 这个pudb的配色用上的方法改不了.调试状态时候按o和回车能切换console和调试界面. 成功了.通过修改pudb源代码来实现 ...
- 重启rabbitmq服务
重启rabbitmq服务通过两个命令来实现: rabbitmqctl stop :停止rabbitmq rabbitmq-server restart : 重启rabbitmq 因为rabbitmqc ...
- Linux 下 Samba 服务器搭建
初学,分享 环境和条件--- 虚拟机:VMware虚拟机 系统:Linux ubuntu 4.4.0-31-generic #50~14.04.1-Ubuntu SMP Wed Jul 13 01:0 ...
- Lucene实现自己的英文空格小写分词器
看一下继承图,Tokenizer和TokenFilter都是继承于TokenStream,TokenStream继承了AttributeSource package com.lucene.demo.a ...
- AJAX随笔2
Ajax作用: 是用JavaScript向服务器发送异步请求,然后服务器给出响应,然后以XML格式的文件返回给浏览器端! 异步: 当浏览器向服务器发送请求的时候,不是整个页面刷新,而是局部刷新[局部信 ...
- day31并发
以后你为之奋斗的两点: 提高cpu的利用率 提高用户的体验 1.纯概念/纯方法 操作系统的发展历程 #主要的人机矛盾是什么:CPU的使用率 #输入\输出数据和CPU计算没有关系 #操作系统是怎么进化 ...