Web前端入门第 33 问：CSS 元素外观常用属性（边框、阴影、轮廓、透明度）

background 作为元素外观里的重点功臣介绍完毕，本文再一览其他常用的外观属性。
本文示例中，盒子基础样式：

1. .box {
2.   font-size: 20px;
3.   margin: 20px;
4.   padding: 20px;
5.   width: 250px;
6.   height: 180px;
7.   border: 10px dashed rgba(0,255,0,1);
8. }

复制代码

边框 border

border 也是简写属性，它包含有 3 个子属性：

• border-width：边框宽度
  
• border-style：边框样式
  
• border-color：边框颜色
  

边框宽度和边框颜色没啥好说的啦，就跟之前介绍过的 CSS 单位和 CSS 颜色一样，凡浏览器支持的 CSS 单位和 CSS 颜色都可以喂给它两吃。
边框样式 border-style 不同值之间的区别

边框样式支持 none、 hidden、 dotted、 dashed、 solid、 double、 groove、 ridge、 inset、 outset 有这么多种，看看具体区别是啥：

特别注意 none 和 hidden 区别，在表格中边框重叠情况下，none 隐藏自身，但不隐藏兄弟边框，而 hidden 会隐藏自身和兄弟边框。

巧用边框透明色 transparent 实现三角形

1. [/code]看右侧效果，左侧为盒模型占用空间位置：
2. [align=center] [/align]
3. 不同方向的 transparent 可设置不同朝向的三角形。
4. [size=4]设置边框图片 border-image[/size]
6. border-image 属性允许用图像来定义边框样式，与背景图类似，允许使用渐变。
7. [b]特别注意：在使用 border-image 时，再设置边框圆角是无效的，嗯...也不是说无效，就是圆角属性控制不到 border-image，包括 border-style 也无法控制 border-image，所以个人觉得 border-image 应用场景有限。[/b]
8. 一个简单例子：
9. [code].box {
10.   font-size: 20px;
11.   margin: 20px;
12.   padding: 20px;
13.   width: 250px;
14.   height: 180px;
15.   background-color: #ff4757;
16.   border: 10px dashed;
17.   border-radius: 130px;
18.   border-image:
19.     linear-gradient(
20.       to right,
21.       #ff4757,
22.       #ffa502,
23.       #ffd32a,
24.       #fff
25.     )
26.   10;
27. }

复制代码

本例中用了渐变，并且设置边框样式为虚线，还设置了圆角 130px，然而虚线和圆角对边框都无效，圆角对背景色确生效了。
更多使用方式参考 MDN：https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-image
边框圆角属性 border-radius

圆角跟 margin 一样，都是设置四个方向，不同的是每个方向可以设置两个值，表示椭圆的两个半径（分别表示水平大小和垂直大小），使用一个值就表示正圆。
来看一张 MDN 的圆角解释图：

说明：以上图片来源 MDN

除了使用固定值，也可以使用百分比设置圆角弧度，以下是不同的圆角值显示效果：

不常用的边框属性

border-block 用于逻辑块向边框。
border-inline 用于逻辑行向边框。
border-collapse 用于表格单元格边框是否合并。
border-spacing 用于表格单元格边框之间距离。
外轮廓 outline

outline 与 border 很相似，在盒模型绘制上，outline 不占用空间位置，可通过 outline-offset 控制与元素的距离。

1. border: 10px dashed rgba(0,255,0,1);
2. border-radius: 40px;
3. background-color: #ff4757;
4. outline: 5px solid #ff4757;
5. outline-offset: 4px;

复制代码

也可使用负数，让外轮廓跑到元素内部中去：

1. outline-offset: -20px;
2. outline: 5px solid rgba(0,255,0,1);

复制代码

效果如下：

阴影 box-shadow

box-shadow 设置元素的阴影效果，此属性无法设置单个方向阴影，只能通过 x 轴和 y 轴偏移量稍微模拟出单个方向阴影。

1. /* 设置外影 */
2. box-shadow: 0 0 10px 0 #000;
3. /* 设置内阴影 */
4. box-shadow: 0 0 10px 0 #000 inset;
5. /* 使用 <spread-radius> 可模拟出第二条边框 */
6. box-shadow: 0 0 0 10px #000;
7. /* 使用 <spread-radius> 可模拟出第二条边框 */
8. box-shadow: 0 0 0 10px #000 inset;
9. /* 使用 x 轴偏移位置 */
10. box-shadow: 10px 0 10px #000;
11. /* 使用 y 轴偏移位置 */
12. box-shadow: 0 10px 10px #000;

复制代码

效果如下：

透明度 opacity

opacity 就是让元素变得透明，可以看到背后景色，嘿...就是像透视眼一样，取值范围 0.0 ~ 1.0，0 表示完全透明啥都能看到，1 表示完全不透明啥都看不到。

1. opacity: 0.8; /* 透明度 50% */

复制代码

效果如下：

总结

边框、阴影、轮廓、透明度这些属性在 Web 网页中随处可见，属于前端必备手术刀，随时都可能用上。
参考资料：https://developer.mozilla.org/zh-CN/docs/Web/CSS/border

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！