热搜:前端 nest neovim nvim

css黑影是怎么做的?

lxf2023-03-16 18:36:02

在css中,可以用box-shadow特性来设置黑影,词法“box-shadow:X轴 Y轴 尺寸 色调 inset”;在其中“inset”值是可供选择的,再加上时该黑影表明内阴影,不加时赛该黑影表明外黑影。

css黑影是怎么做的?

本实例教程作业环境:windows7系统软件、CSS3&&HTML5版、Dell G3计算机。

box-shadow为css黑影设定,在其中分成外黑影和内阴影,一般默认外黑影

  1. 外黑影的特性为: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黑影是怎么做的?

  1. 内阴影的特性为: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黑影是怎么做的具体内容,大量欢迎关注AdminJS其他类似文章!