当前位置：首页 > Web开发 > 正文

h-shadow：值为正数时

2024-03-31 Web开发

语法:

box-shadow:程度暗影垂直暗影模糊距离（虚实）暗影尺寸（影子巨细）暗影颜色内/外暗影；

技术图片

前两个属性是必需写的，其余的可以省略。

h-shadow：值为正数时，暗影往右移动，反之，往左移动。

v-shadow：值为正数时，暗影往下移动，反之，往上移动。

blur：值0，，就是纯色，值越大，越模糊（即越虚）。

spread：控制暗影的巨细，值越大，暗影越大，反之，暗影越小。

外暗影 (outset) 是默认的，但是本身不能写outset，想要内暗影可以写 inset。【一般都用外暗影】

div { width: 200px; height: 200px; border: 10px solid red; /* box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4); */ /* box-shadow:程度位置垂直位置模糊距离暗影尺寸（影子巨细）暗影颜色内/外暗影； */ box-shadow: 0 15px 30px rgba(0, 0, 0, .4); } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div { width: 200px; height: 200px; background-color: pink; margin: 50px auto; /*box-shadow:程度暗影垂直暗影模糊距离（虚实）暗影尺寸（影子巨细）暗影颜色内/外暗影；*/ box-shadow: 0 15px 30px rgba(0,0,0,.3); } </style> </head> <body> <div></div> </body> </html>

内暗影：

技术图片