CSS解决图片缩放变模糊不清晰

CSS解决图片缩放变模糊不清晰

位图在放大尺寸后都会变得模糊不清晰,但在网页中插入图片时,即使原图非常清晰,缩小尺寸后也可能变得模糊。 使用CSS的image-rendering属性,可以解决这一问题,使用前后对比 …

超出父元素宽度的子元素在父元素中水平居中方法

对于宽度小于父元素宽度的行内子元素,要实现水平居中,可以给父元素使用: div { text-align: center; } 小于父元素宽度的情况,如果已知子元素宽度,可以使用相对定位和负外边距方法: div img { position: relative; left: 50%; margin-left: -130px; //元素 …

CSS文本显示行数控制

对于单行的文字截断,可以使用text-overflow: ellipsis属性来实现: li { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 此时,溢出的文字会被省略号…代替。 多行文本的情况,例如博客文章摘要,在PC端和 …

Bootstrap4 Carousel轮播上下滚动、淡入淡出效果

Bootstrap4 Carousel轮播非常简单好用,默认左右滚动效果,但通常的需求是三种情况:左右滚动(水平滚动)、上下滚动(垂直滚动)、淡入淡出。 通过增加少量的CSS,就可以为Bootstrap …

CSS未知高度元素垂直居中解决方法

通常产品列表,我们希望产品图片是在一个盒子内垂直居中,如果图片尺寸未知,且希望保持原来的宽高比例,就涉及到未知高度元素垂直居中的问题。 如果不用考虑IE6/7,问题会非常简单,dis …

清除网络运营商植入广告CSS代码

前面我发表了屏蔽网络运营商植入广告jQuery代码,但是有一个缺陷,广告仍然会显示一瞬间,虽然一眨眼的功夫就消失了,给人的感觉还是不很好。 所以,我写了一段CSS代码来屏蔽: #colophon ~ * { …

-webkit-appearance导致checkbox复选框消失

-webkit-appearance: none会清除WebKit引擎浏览器默认样式,有时会很有用,但使用这个样式后会导致checkbox复选框和radio单选框消失。 解决办法: input[type="checkbox"] { -webkit-appearance: checkbox; } input[type="radio"] { -webkit-appearance: radio; } 添加以上CSS即可解 …

CSS截断文字技巧

在响应式设计中,经常需要将文字截断,例如一个两列水平排列的列表,通常不希望li的内容换行,当视图尺寸过小时内容就会被挤到第二行,常用的截断方法为: li { white-space: nowrap; overflow: hidden; } 该方法有一个问题,经 …

CSS清除点击元素移动端蓝色边框

表单元素和超链接获得焦点时会呈现出难看的边框,可以通过CSS样式清除: *:focus { outline: none; } 然而今天要说的是移动端点击元素出现蓝色边框,不论什么元素,只要点击就会有蓝色边框。 清除方法: * { -webkit-tap-highlight-color: transparent; …

pre标签内容溢出父容器

<pre>标签可定义预格式化的文本,被包围在pre元素中的文本通常会保留空格和换行符,而文本也会呈现为等宽字体。 通常在包含一段代码时,我们会用到<pre>标 …