css阴影怎么做_CSS

上一篇: css如何设置超出部分滚动条隐藏下一篇:css如何去掉li前面的点

css阴影怎么做

发布时间：2022-05-17 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了css阴影怎么做，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

在css中，可以使用box-shadow属性来设置阴影，语法“box-shadow:X轴 Y轴大小颜色 inset”；其中“inset”值是可选的，加上时该阴影表示内阴影，不加时该阴影表示外阴影。

css阴影怎么做

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

box-shadow为css阴影设置，其中分为外阴影和内阴影，一般默认为外阴影

外阴影的属性为：X轴 Y轴 px color
属性说明（顺序依次对应）：阴影的X轴(可以使用负值) 阴影的Y轴(可以使用负值) 阴影模糊值（大小）阴影的颜色

<style>
 .one{
  margin: auto;
  width: 200px;
  height: 200px;
  border: 1px solid #ffa;
  box-shadow: 0 0 20px #000;
 }
</style>
<body>
<p class="one"> 
</p>
</body>

其结果为：

css阴影怎么做

内阴影的属性为：X轴 Y轴 px color inset
属性说明（顺序依次对应）：阴影的X轴(可以使用负值) 阴影的Y轴(可以使用负值) 阴影模糊值（大小）阴影的颜色 inset

<style>
 .one{
  margin: auto;
  width: 200px;
  height: 200px;
  border: 1px solid #ffa;
  box-shadow: 0 0 20px #000 inset;
 }
</style>
<body>
<p class="one"> 
</p>
</body>

其结果为：

css阴影怎么做

若配合css3动画效果，会更加神奇

推荐学习：css视频教程

以上就是css阴影怎么做的详细内容，更多请关注脚本宝典其它相关文章！

脚本宝典总结

以上是脚本宝典为你收集整理的css阴影怎么做全部内容，希望文章能够帮你解决css阴影怎么做所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。

标签：阴影"

上一篇: css如何设置超出部分滚动条隐藏下一篇:css如何去掉li前面的点

猜你在找的CSS相关文章