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;
关键字 | 是否必须 | 作用 | 值 |
---|---|---|---|
hoffset | 是 | 阴影的水平偏移量 | 长度值,正值代表阴影向右偏移,负值代表阴影向左偏移 |
voffset | 是 | 阴影的垂直偏移量 | 长度值,正值代表阴影向下偏移,负值代表阴影向上偏移 |
blur | 否 | 模糊值 | 长度值,值越大盒子的边界越模糊,默认值0,边界清晰 |
spread | 否 | 阴影的延伸半径 | 长度值,正值代表阴影向盒子各个方向延伸扩大,负值代表阴影沿相反方向缩小 |
color | 否 | 阴影的颜色 | 颜色值,如果省略,浏览器会自行选择一个颜色 |
inset | 否 | 将外部阴影设置为内部阴影 | 布尔类型 |
轮廓
轮廓是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。
background: #cd6600;
outline: 15px solid #cdcd00;
outline语法:
outline: outline-width outline-style outline-color;
关键字 | 作用 | 值 |
---|---|---|
outline-color | 规定边框的颜色 | 颜色值 |
outline-style | 规定边框的样式 | 样式的可选值如下:
|
outline-width | 规定边框的宽度 | 数值,可以使用一下常量:
|
阴影和轮廓的运用
创建多重边框效果
使用阴影和轮廓可以为元素创造出多重边框效果,但两者略有不同。
使用阴影
将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的一半(其实可以更小一些,有兴趣的同学自己下去算算),且小于等于轮廓的宽度。