全国旗舰校区

不同学习城市 同样授课品质

北京

深圳

上海

广州

郑州

大连

武汉

成都

西安

杭州

青岛

重庆

长沙

哈尔滨

南京

太原

沈阳

合肥

贵阳

济南

下一个校区
就在你家门口
+
当前位置:首页  >  技术干货

css3box-shadow的用法|box-shadow属性

发布时间:2023-05-29 13:04:00
发布人:zyh

  CSS3中的box-shadow属性用于实现阴影效果。它可以为元素添加一个或多个阴影效果,让元素看起来更加立体和有层次感。

  box-shadow语法:

box-shadow: h-shadow v-shadow blur spread color inset;

    其中,

css3box-shadow的用法|box-shadow属性

  - h-shadow:必选,表示水平方向上的阴影位置,可以为正数、负数或0。正数表示向右偏移,负数表示向左偏移。

  - v-shadow:必选,表示竖直方向上的阴影位置,可以为正数、负数或0。正数表示向下偏移,负数表示向上偏移。

  - blur:可选,表示阴影的模糊程度,可以为0。数值越大,阴影越模糊。

  - spread:可选,表示阴影的扩散程度,可以为0。正数表示扩大阴影范围,负数表示缩小。

  - color:可选,表示阴影颜色,可以为具体值或颜色关键字,也可以为rgba()、hsla()等颜色模式。

  - inset:可选,表示是否将阴影嵌入元素,可以为inset或不填。不填表示阴影在元素外,inset表示阴影在元素内。

  box-shadow使用示例:

div {
box-shadow: 9px 9px 20px rgba(0,0,0,0.4);
}

     上述代码表示为元素添加一个向右偏移9px,向下偏移9px,模糊20px,透明度为0.4的黑色阴影效果。

div {
box-shadow: 0 0 0 5px #00f;
}

     上述代码表示为元素添加一个宽度为5px,颜色为蓝色的外边框效果,也可以用来实现“发光”效果。

  总之,box-shadow是CSS3中比较实用的属性之一,能够实现各种阴影效果,利用好它可以让页面更具立体感和层次感。

相关文章

python写入json文件?

python写入json文件?

2023-11-02
vscode设置tab为4个空格?

vscode设置tab为4个空格?

2023-11-02
更新pycharm?

更新pycharm?

2023-11-02
anaconda每次打开都要安装?

anaconda每次打开都要安装?

2023-11-02

最新文章

武汉新媒体行业公司排名

武汉新媒体行业公司排名

2023-11-01
武汉新媒体就业现状好吗

武汉新媒体就业现状好吗

2023-11-01
武汉全媒体行业发展现状及趋势

武汉全媒体行业发展现状及趋势

2023-10-31
武汉全媒体现状

武汉全媒体现状

2023-10-31
在线咨询 免费试学 教程领取