可以使用 CSS 的 outline 和 box-shadow 属性来设置元素的边框和阴影效果。
outline 属性可以用来设置元素的轮廓线,常用于元素获取焦点时的样式效果。
语法:
outline: [outline-width] [outline-style] [outline-color];
例如,设置一个红色、2px 宽度的轮廓线:
p {
outline: 2px solid red;
}
box-shadow 属性可以用来设置元素的阴影效果。
语法:
box-shadow: [水平偏移量] [垂直偏移量] [模糊半径] [阴影扩散半径] [阴影颜色] [投影方式];
例如,设置一个 5px 模糊半径、红色的阴影:
p {
box-shadow: 0 0 5px red;
}
可以同时设置多组阴影效果,用逗号分隔:
p {
box-shadow: 0 0 5px red, 0 0 10px blue;
}
注意:box-shadow 属性不会占据元素的空间,不会影响布局。如果需要设置一个占据空间的边框效果,可以使用 border 属性。