![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
css学习
xi1213
在前端路上摸爬滚打的菜狗子
展开
-
解决使用filter: blur时图片四周泛白的问题
发现问题在使用filter: blur(15px)模糊背景图时,发现图片周围会泛白。解决问题查了好多办法:1、使用StackBlur.js处理图片模糊。2、改变background-size:cover为background-size:150% 150%。3、给body添加同样的背景图。4、直接使用transform: scale(1.2);。总结使用第四种办法最方便,不用引入其他包,不用再次引入图片。...原创 2022-03-07 23:33:23 · 1649 阅读 · 0 评论 -
css实现瀑布流
jquery时代大多使用插件实现瀑布流布局,但现在我们可以直接使用存粹的css来实现。从css3开始出现了column-count与column-gap后,我们便可直接使用此属性来进行布局,其中column-count代表列数,column-gap代表列之间的距离。值得注意的是,当使用column-count时,容器中不只一个元素时,列末尾容器中一部分元素可能会断裂至另一列中,为防止此种情况发生可以使用break-inside: avoid,避免容器断裂成两部分。各大浏览器支持程度:实例: &l原创 2022-03-02 16:33:11 · 2138 阅读 · 0 评论 -
box-sizing属性的理解
使用原因在布局盒模型因为padding与border也是具有尺寸的,为避免其对页面布局产生影响,可使用box-sizing: border-box;属性设置盒模型,此时便可只用设置元素宽高。属性详解box-sizing的属性有content-box、border-box、inherit。content-box:宽度和高度分别应用到元素的内容框,在宽度和高度之外绘制元素的内边距和边框,此为默认值。border-box:元素设定的宽度和高度决定了元素的边框盒。元素指定的任何内边距和边框都将在已设定的宽原创 2022-02-28 14:19:19 · 4097 阅读 · 0 评论 -
css设置滚动条样式
::-webkit-scrollbar {/滚动条整体/width: 7px;height: 7px;}::-webkit-scrollbar-track{/滑轨/background-color:#aaa;border-radius: 30px;}::-webkit-scrollbar-thumb{background-color: #555;/滑块/::-webkit-scrollbar-button{/两端的按钮/display:none;}...原创 2022-02-28 09:50:58 · 154 阅读 · 0 评论 -
flex布局
什么是flex布局flex布局即为弹性布局,使用display:flex进行布局,此布局使得盒模型布局更易使用。值得注意的是设为flex布局后,子元素的float、clear和vertical-align属性将失效。flex的使用当元素使用flex后,该元素则成为flex容器(container),其容器属性有:flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content。该容器中的元素则成为flex项目(it原创 2022-02-28 16:23:24 · 5593 阅读 · 3 评论