亮框提示

最新推荐文章于 2024-01-28 19:13:25 发布

春风欲雨

最新推荐文章于 2024-01-28 19:13:25 发布

阅读量192

点赞数

分类专栏： css 文章标签：亮框提示

本文链接：https://blog.csdn.net/WebDestiny/article/details/100778817

版权

css 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

效果图（鼠标经过图片上移，亮度增加，添加盒子阴影以及边框）：

代码：

<template>
  <div>
    <ul>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },

  methods: {},

  created() {}
};
</script>
<style>
li {
  display: inline-block;
  height: 200px;
  width: 150px;
  background: url("../assets/face.png");
  background-size: 100%;
  border: 2px solid transparent;
  border-radius: 5px;
  filter: brightness(0.7);
  cursor: pointer;
  transition: all 0.2s;
  margin: 0 100px;
}
li:hover {
  /* 阴影 */
  box-shadow: 0 0 10px 0 skyblue;
  /* 边框 */
  border: 2px solid skyblue;
  /* 偏移距离 */
  transform: translate(0%, -20%);
  /* 滤镜控制亮度 */
  filter: brightness(1.5);
}
</style>