CSS | inset()函数

inset()函数是一个用于设置CSS属性为内嵌框架的函数，常用于设置阴影、边框等装饰性效果。该函数接受1到4个参数，分别表示位置偏移和模糊半径等参数。

语法

box-shadow: inset [offset-x] [offset-y] [blur-radius] [spread-radius] [color];

• offset-x：水平方向的偏移量。
• offset-y：垂直方向的偏移量。
• blur-radius：模糊半径。
• spread-radius：扩展半径。
• color：阴影的颜色。

除color为必填外，其它参数均可选。如果不填写半径，则默认为0。

例子

/* 单独的内阴影 */
box-shadow: inset 0 0 10px #000;

/* 单独的内阴影，偏移和扩展半径为负数 */
box-shadow: inset -5px -5px 5px -5px #000;

/* 指定多重的内阴影 */
box-shadow: inset 0 -10px 10px #000, inset 0 10px 10px #000;

/* 指定垂直偏移和扩展半径为0 */
box-shadow: inset 0 0 10px 0 #000;

/* 改变阴影颜色 */
box-shadow: inset 0 0 10px #f00;

兼容性

由于该函数为CSS3新增的函数，因此在低版本浏览器中可能不被支持。建议先检查浏览器是否支持该函数再进行使用。

结论

inset()函数是一个用于设置CSS属性为内嵌框架的函数，主要用于设置阴影、边框等装饰性效果。对于需要设置内显和外显效果时，可以结合使用box-shadow和border等属性。