首页 > 其他分享 >css 卡片hover效果

css 卡片hover效果

时间:2023-01-06 16:13:03浏览次数:54  
标签:box hover 卡片 bottom 6px border css

 

 

 .card {
    height: 430px;
    width: 100%;
    background:#ffffff;
    border:1px solid #eaeefb;
    border-radius:5px;
    box-sizing: border-box;
    text-align: center;
    position: relative;
    bottom: 0;

 &:hover {
      bottom: 6px;
      box-shadow: 0 6px 18px 0 rgba(232,237,250,0.50);
    }
}

  

标签:box,hover,卡片,bottom,6px,border,css
From: https://www.cnblogs.com/shining-feifan/p/17030782.html

相关文章

  • 02 CSS
    CSSCSS介绍CSS(CascadingStyleSheet,层叠样式表)定义如何显示HTML元素。当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染)。CSS语法CSS实例每个CS......
  • CSS - 目录
    CSS-选择器标签选择器,id选择器,类选择器,后代选择器,子代选择器,兄弟选择器,通用选择器,组合选择器,属性选择器,伪类选择器,伪元素选择器 CSS-字体属性设置字体,大小,粗细,类......
  • CSS选择器
    nth-of-type和nth-childnth-of-type:先过滤类型,重新排序,匹配序号nth-of-child:获取所有的子元素,再匹配序号对应的类型是否一致参考:解析CSS3伪类选择器nth-of-type......
  • CSS设置多余文字自动省略
    在写界面的过程中,常用到文字排版的问题,多余文字需要自动省略为”.....“,这里分享一个自己用到的方法,效果如下图:   使用方法:在需要省略的文字css样式中写入如下代......
  • CSS - 浮动与清除浮动
    1.浮动/*左浮动*/float:left;/*右浮动*/float:right;脱离标准流,浮动的盒子不在保留原先的位置,如何元素都可以加浮动 2.清除浮动兄弟元素关系中,上元素没有设......
  • CSS - 设置内边距padding,复合写法,内边距会影响盒子大小的问题
    1.设置内边距/*设置上内边距*/padding-top:20px;/*设置下内边距*/padding-bottom:20px;/*设置左内边距*/padding-left:20px;/*设置右内边距*/padding-right......
  • CSS - 设置边框 设置边框的宽度,类型,颜色,复合写法,设置边框是否占据额外的空间
    1.设置边框的宽度/*同时设置上下左右边框*/border-width:2px;/*设置上下左右边框*/border-width:2px2px;/*设置上左右下边框*/border-width:2px1px2px......
  • CSS 干掉图片背景
    1.首先图片需要有一个容器,容器需要有背景颜色,默认是#fff<divclass="container"><imgsrc="xxx.png"alt=""/></div>2.然后指定混合模式和滤镜.container{b......
  • css中word-break和word-wrap用法详解
    css中的word-break和word-wrap属性在遇到中文和英文时的表现是不一样的,所以我们会在这些属性遇到中文、英文时分别进行说明。常用于换行word-wrap:break-word;word-b......
  • 《卡片笔记写作法:如何实现从阅读到写作》豆瓣7.9
    [德]申克·阿伦斯(SönkeAhrens)著陈琳译人民邮电出版社 2022.11.04“不写,就无法思考。”(卢曼1992,53)2023.01.04本书的观点可以概括为:我们大脑的记忆空间......