CSS应用：阴影和轮廓
来源：互联网 发布：打卡机数据导不出 编辑：程序博客网 时间：2024/06/04 19:03
CSS中使用box-shadow属性可以为元素添加阴影效果，阴影的效果有些类似元素的边框，但存在一些差别。outline属性则可以为元素添加轮廓，轮廓主要用于吸引用户的注意。
阴影和轮廓介绍
阴影
使用box-shadow属性可以为元素添加阴影效果，下面是使用box-shadow的一个例子：
background: #cd6600;
box-shadow: 0 2px 5px 15px #cdcd00;
box-shadow语法：
box-shadow: h-shadow v-shadow blur spread color inset;
轮廓
轮廓是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
background: #cd6600;
outline: 15px solid #cdcd00;
outline语法：
outline: outline-width outline-style outline-color;
- none：默认，定义无轮廓；
- dotted：定义点状的轮廓；
- dashed：定义虚线轮廓；
- solid：定义实线轮廓；
- double：定义双线轮廓，双线的宽度等同于outline-width的值；
- groove：定义3D凹槽轮廓，此效果取决于outline-color值；
- ridge：定义3D凸槽轮廓，此效果取决于outline-color值；
- inset：定义3D凹边轮廓，此效果取决于outline-color值；
- outset：定义3D凸边轮廓，此效果取决于outline-color值；
- inherit：规定应该从父元素继承轮廓样式的设置。
- thin：规定细轮廓；
- medium：默认，规定中等的轮廓；
- thick：规定粗的轮廓；
- length：允许您规定轮廓粗细的值；
- inherit：规定应该从父元素继承轮廓宽度的设置。
阴影和轮廓的运用
创建多重边框效果
使用阴影和轮廓可以为元素创造出多重边框效果，但两者略有不同。
使用阴影
将hoffset、voffset和blur设置为0可以是阴影达到边框的效果：
background: #cd6600;
box-shadow: 0 0 0 10px #cdcd00;
阴影位于border的外部，如果我们为元素添加一个border：
background: #cd6600;
box-shadow: 0 0 0 10px #cdcd00;
border: 10px solid #fafafa;
我们还可以为元素添加多个阴影，需要注意每个阴影都是从边框外开始绘制，因此如果你想达到多重边框的效果，你需要将外围的阴影宽度加大：
background: #cd6600;
box-shadow: 0 0 0 10px #cdcd00, 0 0 0 15px #cd0001;
border: 10px solid #fafafa;
在拥有了所有这些之后，我们还可以再为元素添加阴影效果：
background: #cd6600;
box-shadow: 0 0 0 10px #cdcd00,
0 0 0 15px #cd0001,
0 2px 5px 15px #cdcd00;
border: 10px solid #fafafa;
这样我们就有了一个带阴影效果的多重边框效果，但还没有结束，阴影还可以响应border圆角的变化：
background: #cd6600;
box-shadow: 0 0 0 10px #cdcd00,
0 0 0 15px #cd0001,
0 2px 5px 15px #cdcd00;
border: 10px solid #fafafa;
border-radius: 6px;
更进一步，我们还可以将阴影放到元素内部，但注意这样会占据元素内部的空间：
background: #cd6600;
box-shadow: 0 0 0 10px #cdcd00 inset,
0 0 0 15px #cd0001,
0 2px 5px 15px #cdcd00;
border: 10px solid #fafafa;
border-radius: 6px;
感觉不错吧，但也并不是所有事情都这么美好，阴影有它自生的限制：
- 阴影并不能完全像border一样，它无法影响到布局，不会像border一样占据宽度，因此在使用了阴影后你需要通过padding或margin来调整布局；
- 阴影也不能捕获鼠标事件，例如hover或者click等，如果这一点很重要，你只有为阴影添加inset关键字将阴影放到你的元素内部，但注意你需要添加额外的padding来创造出足够的空间；
- 阴影不能像border一样指定一个类型（solid、dotted等），因此只能作为solid类型的border使用。
使用轮廓
轮廓也可以达到多重边框的效果，但由于不支持多重轮廓，因此使用轮廓仅能为元素添加两个边框。但轮廓可以指定类型，因此使用轮廓也给了我们更多的选择。
下面是一个使用轮廓的例子：
background: #cd6600;
border: 10px solid #fafafa;
outline: 15px solid #cd0001;
使用轮廓可以创造出一些特殊的效果，这里运用虚线的轮廓和指定outline-offset属性在元素内部创建一个虚线边框：
background: #cdcd00;
border: 10px solid #cdcd00;
border-radius: 6px;
outline: 1px dashed #fff;
outline-offset: -10px;
同样，轮廓也有自己的限制：
- 每个元素仅能有一个轮廓；
- 轮廓不支持border的radius效果，当你在轮廓内部使用radius时，轮廓任然呈现为直角（见下“使用轮廓时采用圆角边框”）；
- CSS3规范并没有强制要求轮廓是一个矩形框，虽然大部分浏览器都将其实现为矩形。
使用轮廓时采用圆角边框
background: #cd6600;
border: 10px solid #cd6600;
border-radius: 20px;
outline: 3px solid #cdcd00;
内圆角
使用边框、阴影和轮廓可以创建出内圆角效果，如下：
background: #cd6600;
box-shadow: 0 0 0 5px #cdcd00;
border-radius: 10px;
outline: 10px solid #cdcd00;
下面介绍实现该效果的具体步骤：
- 首先我们给元素一个圆角边框:第一步
border-radius: 10px;
background: #cd6600;
- 然后给元素一个轮廓，由于轮廓不会适应圆角的边框而呈现为直角，成为这个效果：第二步
border-radius: 10px;
background: #cd6600;
outline: 10px solid #cdcd00;
- 最后，为了填补圆角边框和轮廓之间的空隙，需要在圆角边框和空隙之间增加一个阴影：第三步
border-radius: 10px;
background: #cd6600;
outline: 10px solid #cdcd00;
box-shadow: 0 0 0 5px #cdcd00;
这样就达到了我们希望的效果，需要注意的是阴影的宽度应该大于等于radius的一半（其实可以更小一些，有兴趣的同学自己下去算算），且小于等于轮廓的宽度。
- CSS应用：阴影和轮廓
- css阴影和轮廓
- 边框阴影、轮廓、分栏
- CSS盒子和文字阴影
- CSS 轮廓
- Css轮廓
- CSS 轮廓
- CSS属性之边框和轮廓属性
- css 阴影
- CSS-阴影
- css阴影
- CSS 阴影
- css阴影
- CSS 文字阴影在网页设计中的应用
- CSS 盒子模型(Box Model)和轮廓（outline）
- CSs阴影框，Div阴影
- CSS学习之 轮廓
- CSS之轮廓样式
- 页面上，如何实现超链接切换多语种？
- HTTP的一些状态消息
- hdu——1062Text Reverse（反转函数reverse）
- android随笔26--常用代码
- 第一篇博客
- CSS应用：阴影和轮廓
- Java,String与InputStream相互转化
- 自定义导航按钮UIBarButtonItem
- SSH过程中关闭对主机HostKey值的验证
- iOS Cocoapods安装
- Android学习笔记 3.1View的基础知识
- 城市中的原始人（三）：社交恐惧
- leetcode 196. Delete Duplicate Emails delete
- 链表实现约瑟夫环
