位图在放大尺寸后都会变得模糊不清晰，但在网页中插入图片时，即使原图非常清晰，缩小尺寸后也可能变得模糊。 使用CSS的image-rendering属性，可以解决这一问题，使用前后对比如下图所示： 代码如下： img { image-rendering: -webkit-optimize-contrast; /* 针对WebKit引擎 */ image-rendering: cr...

阅读全文

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

阅读全文

对于单行的文字截断，可以使用text-overflow: ellipsis属性来实现： li { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 此时，溢出的文字会被省略号...代替。 多行文本的情况，例如博客文章摘要，在PC端和手机端需要显示不同数量的文字，那么则可以使用以下代码来控制显示行...

阅读全文

Bootstrap4 Carousel轮播非常简单好用，默认左右滚动效果，但通常的需求是三种情况：左右滚动（水平滚动）、上下滚动（垂直滚动）、淡入淡出。 通过增加少量的CSS，就可以为Bootstrap4 Carousel轮播增加上下滚动（垂直滚动）、淡入淡出效果。 新增的CSS如下： .carousel-fade .carousel-inner .caro...

阅读全文

通常产品列表，我们希望产品图片是在一个盒子内垂直居中，如果图片尺寸未知，且希望保持原来的宽高比例，就涉及到未知高度元素垂直居中的问题。 如果不用考虑IE6/7，问题会非常简单，display: table-cell 可以将元素以表格单元格的形式呈现，那么垂直居中就不是问题了，现在我们的情况是要考虑IE6/7...

阅读全文

前面我发表了屏蔽网络运营商植入广告jQuery代码，但是有一个缺陷，广告仍然会显示一瞬间，虽然一眨眼的功夫就消失了，给人的感觉还是不很好。 所以，我写了一段CSS代码来屏蔽： #colophon ~ * { display: none !important; width: 0 !important; height: 0 !important; font-size: 0 !important; ov...

阅读全文

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

阅读全文

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

阅读全文

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

阅读全文

<pre>标签可定义预格式化的文本，被包围在pre元素中的文本通常会保留空格和换行符，而文本也会呈现为等宽字体。 通常在包含一段代码时，我们会用到<pre>标签，与<code>标签的区别是<pre>是块级的，而<code>是行内元素。 之所以使用<pre>标签，最大的目的莫过于...

阅读全文