Web前端入门第 33 问：CSS 元素外观常用属性（边框、阴影、轮廓、透明度）
background 作为元素外观里的重点功臣介绍完毕，本文再一览其他常用的外观属性。本文示例中，盒子基础样式：
.box {
font-size: 20px;
margin: 20px;
padding: 20px;
width: 250px;
height: 180px;
border: 10px dashed rgba(0,255,0,1);
}边框 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 实现三角形
看右侧效果，左侧为盒模型占用空间位置：
不同方向的 transparent 可设置不同朝向的三角形。
设置边框图片 border-image
border-image 属性允许用图像来定义边框样式，与背景图类似，允许使用渐变。
特别注意：在使用 border-image 时，再设置边框圆角是无效的，嗯...也不是说无效，就是圆角属性控制不到 border-image，包括 border-style 也无法控制 border-image，所以个人觉得 border-image 应用场景有限。
一个简单例子：
.box {
font-size: 20px;
margin: 20px;
padding: 20px;
width: 250px;
height: 180px;
background-color: #ff4757;
border: 10px dashed;
border-radius: 130px;
border-image:
linear-gradient(
to right,
#ff4757,
#ffa502,
#ffd32a,
#fff
)
10;
}
本例中用了渐变，并且设置边框样式为虚线，还设置了圆角 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 控制与元素的距离。
border: 10px dashed rgba(0,255,0,1);
border-radius: 40px;
background-color: #ff4757;
outline: 5px solid #ff4757;
outline-offset: 4px;也可使用负数，让外轮廓跑到元素内部中去：
outline-offset: -20px;
outline: 5px solid rgba(0,255,0,1);效果如下：
阴影 box-shadow
box-shadow 设置元素的阴影效果，此属性无法设置单个方向阴影，只能通过 x 轴和 y 轴偏移量稍微模拟出单个方向阴影。
/* 设置外影 */
box-shadow: 0 0 10px 0 #000;
/* 设置内阴影 */
box-shadow: 0 0 10px 0 #000 inset;
/* 使用 <spread-radius> 可模拟出第二条边框 */
box-shadow: 0 0 0 10px #000;
/* 使用 <spread-radius> 可模拟出第二条边框 */
box-shadow: 0 0 0 10px #000 inset;
/* 使用 x 轴偏移位置 */
box-shadow: 10px 0 10px #000;
/* 使用 y 轴偏移位置 */
box-shadow: 0 10px 10px #000;效果如下：
透明度 opacity
opacity 就是让元素变得透明，可以看到背后景色，嘿...就是像透视眼一样，取值范围 0.0 ~ 1.0，0 表示完全透明啥都能看到，1 表示完全不透明啥都看不到。
opacity: 0.8; /* 透明度 50% */效果如下：
总结
边框、阴影、轮廓、透明度这些属性在 Web 网页中随处可见，属于前端必备手术刀，随时都可能用上。
参考资料：https://developer.mozilla.org/zh-CN/docs/Web/CSS/border
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
页:
[1]