![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
鹿的迷雾林
这个作者很懒,什么都没留下…
展开
-
使用column-count布局的时候,box-shadow会被截断
column-count布局,可以将容器内的内容分成指定列数div { column-count:3; -moz-column-count:3; /* Firefox */ -webkit-column-count:3; /* Safari and Chrome */}但是将column-count和box-shadow同时使用时,有时候box-shadow的阴影部分会被截断解决方案:.box { column-count: 3; column-gap: 20p原创 2021-06-11 11:35:21 · 1004 阅读 · 2 评论 -
Img与background的区别
Img和bg的区别转载 2017-11-30 23:28:28 · 534 阅读 · 0 评论 -
inline-block元素设置overflow:hidden属性导致相邻行内元素向下偏移
1.背景将一个行内元素设为行内块,再设置溢出属性时: span { width: 100px; display: inline-block; overflow: hidden; }会导致左右相邻元素被奇怪的向下拉动了一定的距离。2.解决方法设置其对齐基准为bottom,vertical-align: bottom; s原创 2018-01-09 11:59:16 · 1233 阅读 · 0 评论 -
flex实现元素左右居中+垂直居中
实现方式:#container{ display:flex; justify-content:center; align-items: center;}兼容性:效果:设为 Flex 布局以后,子元素的float、clear和vertical-align属性将失效。子元素呈现左右居中+垂直居中的效果友情链接:各种上下左右居中方式 阮一峰的flex介绍原创 2018-02-12 09:13:37 · 3055 阅读 · 0 评论 -
让背景出现毛玻璃的效果
一 .最近做一个项目,UI的一个需求是:1.背景是半透明的 2.背景有毛玻璃的模糊效果 3.上面的字体清晰可见 效果如下: 二 . 我说这个简单,不就是背景用blur处理一下嘛,简单。先是背景透明,字体清晰可见div{ background:rgba(51, 51, 51, .6);}再来个模糊处理div{ background:rgba(51, 51, ...原创 2018-03-08 16:23:19 · 5399 阅读 · 0 评论 -
css实现超出文本溢出用省略号代替
一、单行直接上代码:overflow: hidden;text-overflow:ellipsis;white-space: nowrap;效果如下: 二、多行下次更新,拜拜——————————–割—— 3月20日更新 ——————————–原理1:不考虑兼容性的,适用于WebKit浏览器内核的。css代码: .box { ...原创 2018-03-12 16:51:15 · 12712 阅读 · 1 评论 -
让360双核浏览器默认极速模式打开网页
最近做的项目中,大量采用了html5和css3,希望用户都以webkit内核打开页面,但是在用360或者QQ等双核浏览器打开网站时,发现都是以IE内核的兼容模式打开。 这里找到一种方法,可以使360浏览器或者QQ浏览器以chrome内核的极速模式打开。 设置meta标签 <meta name="renderer" content="webkit|ie-comp|ie-...原创 2018-04-16 11:14:00 · 2790 阅读 · 0 评论 -
text-overflow: ellipsis判断文本是否超出
我们经常会用到超出隐藏的css代码:/*文字溢出不换行,显示省略号,分别是1行 2行 3行的控制 */.no-wrap, .multi-2-no-wrap, .multi-3-no-wrap { overflow: hidden; text-overflow: ellipsis;}.multi-2-no-wrap, .multi-3-no-wrap { -webkit-b...原创 2018-12-18 15:18:19 · 5442 阅读 · 0 评论 -
vue移动端工程在苹果ios系统上用浏览器打开不显示图片
从以下几个方面入手1.在style中不要直接用标签名写样式img{}2.用类名修改img样式时,height和width写100%.img-logo{ height:100%; width:100%;}3.border-redius样式只能内联方式,不能用类名方式修改...原创 2019-01-14 14:44:41 · 3676 阅读 · 0 评论