CSS
萌萌哒小可爱啦
这个作者很懒,什么都没留下…
展开
-
css实现左上角飘带效果
css实现左上角飘带效果效果如下:html代码<div class='wrap'> <div class='ribbon'> <span>测试1</span> </div></div>css代码.wrap { /* 最外层的div容器 */ min-width: 200px; min-height: 200px; text-align: center;原创 2021-07-29 15:33:55 · 603 阅读 · 0 评论 -
CSS中修改ul标签的样式
在我们使用li标签的时候,ul样式经常会错乱ul标签样式设置如下:ul {list-style: none;padding: 0px;margin: 0px; }原创 2021-06-23 00:33:22 · 3514 阅读 · 0 评论 -
CSS中动态切换列表样式
默认第一条有背景颜色,鼠标经过时列表背景改变,点击列表背景颜色切换显示,效果如下:做到最后才发现也可以不用li标签来做,不过都可以实现html结构代码如下:<ul> <!-- `<li>`标签循环列表展示,绑定点击事件(可以传递该条列表的数据) --> <!-- 判断该条列表的索引index是否等于isActive变量的值, 以此来动态绑定样式--> <li v-for='(item,index) in this.listItem' @cli原创 2021-06-22 19:41:29 · 1003 阅读 · 0 评论 -
修改Ant design Vue组件的默认样式
在实际开发中,可能会有需要修改组件的默认样式的情况,但是不能直接在全局样式中修改,那样其他用到该组件的地方也会受到影响。Vue中,以card组件为例,要修改其内边距,如下修改不起作用<style scoped> .ant-card-body { padding: 15px; }</style>此时我们可以前面加上/deep/即可成功修改~<style scoped> /deep/ .ant-card-body { padding: 15px原创 2021-06-22 10:56:53 · 4292 阅读 · 9 评论 -
CSS中设置元素高度自适应,不出现滚动条
如果我们想设置外层容器为浏览器高度的100%,同时高度自适应,不出现滚动条,可以将高度设置为浏览器视口的高度,代码如下:<style scoped>.element { height: 100vh;/*元素的高度为浏览器视口的高度*/}</style>但是当我们遇到有固定高度的菜单栏时,此时高度设置为100vh将会产生滚动条,此时可以用100vh减去固定高度,直接相减会报错,此时可以使用calc()函数,代码如下:<style scoped>.elem原创 2021-06-21 17:54:00 · 3179 阅读 · 0 评论 -
CSS对边框添加立体阴影效果
CSS对边框添加立体阴影效果如图所示:对最底下div元素设置样式如下:<style> .class { border-top: 1px solid #ffffff; box-shadow: darkgrey 10px 10px 30px 5px ;//边框阴影 }</style原创 2021-06-17 19:18:11 · 1961 阅读 · 0 评论 -
CSS绘制三角形样式
CSS绘制三角形实现效果如下:html代码结构如图所示<div class='item_right'> <div class='right_bubble'>你好你好你好你好你好你好</div> <div class='myAvatar'></div></div>css样式代码如下:.item_right { /*flex布局设置输入框和气泡的对齐方式*/ width: 100%; disp原创 2021-06-17 18:54:00 · 222 阅读 · 0 评论