CSS3文本阴影、盒子阴影

最新推荐文章于 2022-11-30 21:59:29 发布

weixin_46386994

最新推荐文章于 2022-11-30 21:59:29 发布

阅读量102

点赞数

本文链接：https://blog.csdn.net/weixin_46386994/article/details/104732162

版权

文本阴影属性

text-shadow:10px 10px 10px red

注：第一个值：水平方向的距离
（必须有的：支持负值正值向左偏负值向右）
第二个值：垂直方向的距离
（必须有的：支持负值正值在下显示阴影正值在上显示阴影）
第三个值：阴影的模糊程度（不支持负值）
第四个值：阴影的颜色
当给同一个文字设置多个阴影的时候，阴影和阴影之间用逗号隔开：

<style type="text/css">
   *{margin: 0;padding: 0;}
   div{width: 200px;
   height: 150px;
   border: 2px solid #00FF00;
   text-align: center;
   padding-top: 50px;
   color: red;
   text-shadow:0 0 4px white,
     0 -5px 4px #ff3,
     2px -10px 6px #fd3,
     -2px -15px 11px #f80,
     2px -25px 18px #f20;
   }
   p{
    text-shadow: 10px 10px 10px #0000FF;
   }
  </style>
 </head>
 <body>
  <div>
   开心每一天
  </div>
  <p>ssssssss</p>
 </body>

在这里插入图片描述

盒子阴影属性

box-shadow 盒子阴影：

X-shadow 必需的。水平阴影的位置。允许负值正值在边框右负值在边框左
Y-shadow 必需的。垂直阴影的位置。允许负值正值在边框下负值在边框上
blur 可选。模糊距离
spread 可选。阴影的大小
color 可选。阴影的颜色。
inset 可选。从外层的阴影（开始时）改变阴影内侧阴影
默认阴影显示在盒子外
当给一个盒子设置多个阴影的时候，阴影和阴影之间用逗号隔开：

<style type="text/css">
   *{margin: 0;padding: 0;}
   div{width: 200px;
   margin: auto;
   height: 150px;
   border: 2px solid #00FF00;
   text-align: center;
   padding-top: 50px;
   color: red;
   text-shadow:0 0 4px white,
     0 -5px 4px #ff3,
     2px -10px 6px #fd3,
     -2px -15px 11px #f80,
     2px -25px 18px #f20;
      box-shadow: 20px 20px 20px 10px red;
   }
   
  </style>
 </head>
 <body>
  <div>
   开心每一天
  </div>
 </body>

在这里插入图片描述
设置多个阴影

<style type="text/css">
   *{margin: 0;padding: 0;}
   div{width: 200px;
   margin: auto;
   height: 150px;
   border: 2px solid #00FF00;
   text-align: center;
   padding-top: 50px;
   color: red;
   text-shadow:0 0 4px white,
     0 -5px 4px #ff3,
     2px -10px 6px #fd3,
     -2px -15px 11px #f80,
     2px -25px 18px #f20;
      box-shadow: 20px 20px 20px 10px red,30px 30px 30px 30px yellow;
   }
   
  </style>
 </head>
 <body>
  <div>
   开心每一天
  </div>
 </body>

在这里插入图片描述
添加inset效果如下