在css3中box-shadow什么意思-Soal Jawab bahagian hadapan-php.cn

在css3中box-shadow什么意思

青灯夜游

发布： 2022-02-28 16:50:15

原创

6664 人浏览过

在css3中，“box-shadow”的意思为“盒子阴影”，是一个为元素添加边框阴影的新增属性；该属性可以向框添加一个或多个阴影，语法“box-shadow: 水平阴影垂直阴影模糊距离尺寸颜色 inset;”。

在css3中box-shadow什么意思

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

在css3中，“box-shadow”的意思为“盒子阴影”，是一个为元素添加边框阴影的新增属性。

box-shadow属性向框添加一个或多个阴影。

注释：使用 border-image-* 属性来构造漂亮的可伸缩按钮！

语法：

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

登录后复制

box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。

h-shadow 必需。水平阴影的位置。允许负值。
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊距离。
spread 可选。阴影的尺寸。
color 可选。阴影的颜色。请参阅 CSS 颜色值。
inset 可选。将外部阴影 (outset)改为内部阴影。

以下是我给大家做的几个小测试：

登录后复制

运行结果：
在这里插入图片描述

其中我们还演练了如何创建"polaroid"的照片和旋转图片。例如：




 







The pulpit rock in Lysefjorden, Norway.




Monterosso al Mare. One of the five villages in Cinque Terre.

登录后复制

运行结果如下：

·box-shadow阴影有许多种，比如：内阴影、外阴影、三边阴影、双边阴影、单边阴影、西线描边·······、

代表的意思就是：

例如：


  
    内阴影示例
    
  
  
    3边内影示例
    
  
  
    外阴影示例
    
  
  
    右下外阴影示例
    
  
  
    扩大阴影示例
    
  
  
    半透明阴影色示例

登录后复制

css:

.flex{display:flex;flex-wrap:wrap;} 
.flex-item{margin-right:30px;}

.box {  background-color: #CCCCCC; border-radius:10px; width: 200px; height: 200px;  }
.boxshadow1{ box-shadow:inset 0px 0px 5px 1px #000; }
.boxshadow2{ box-shadow:inset 0 1px 2px 1px #000; }
.boxshadow3{box-shadow:0 0 10px #000;}
.boxshadow4{box-shadow:2px 2px 5px #000;}
.boxshadow5{box-shadow:0 0 5px 15px #000;}
.boxshadow6{box-shadow: 12px 12px 2px 1px rgba(0, 0, 255, .2);}

登录后复制

运行结果：

在这里插入图片描述