CSS笔记
关注
分享
扫一扫
文章平均质量分 58
幻想山外小楼听雨
一只小码农
展开
-
前端精选文摘：BFC 神奇背后的原理
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。转载 2016-09-01 09:34:50 · 881 阅读 · 0 评论 -
(转)使用CSS将图片转换成黑白(灰色、置灰)
转原文地址张鑫旭博客转载 2018-08-20 10:12:22 · 757 阅读 · 0 评论 -
Chrome不能显示小于12px的字体的解决办法，同时解决-webkit-transform: scale不支持行内标签的问题
解决方案让指定文字使用自定义的class，如forcefontsize10<a> Products <sup class="forcefontsize10"> 88 </sup></a>并在css中自定义以下类：...转载 2018-09-17 15:33:54 · 960 阅读 · 0 评论 -
transform失效了？iconfont字体图标无法旋转，无法缩放？的解决办法
其实只要是 transform 属性的内容运用在 iconfont 图标上都是无效的原因：查参考手册，transform适用于：所有块级元素及某些内联元素css参考手册A transformable element is an element in one of these categories:an element whose layout is governed by th...原创 2018-09-18 14:33:34 · 5392 阅读 · 0 评论 -
如何更改浏览器默认滚动条样式
body{ scrollbar-arrow-color: red; /*上下按钮上三角箭头的颜色*/ scrollbar-face-color: #CBCBCB; /*滚动条凸出部分的颜色*/ scrollbar-3dlight-color: blue; /*滚动条亮边的颜色*/ scrollbar-high...原创 2018-10-17 15:13:56 · 469 阅读 · 0 评论 -
如何在 CSS 背景图片中对 SVG 图片进行着色 ，修改svg图片颜色
在CSS背景图片中使用SVG的优点在CSS背景图片中使用SVG，可以使用css background属性的诸多特性，比如图片尺寸和图片位置等等。可以非常轻松的根据设备的尺寸来控制图片的尺寸，还有一个好处就是可以不用把SVG图片插入到html中，从而保持html的整洁。在CSS背景图片中使用SVG，有很多的优点，对提高性能也是有很大帮助的。那在CSS背景图片中使用SVG，有什么方法来改变它...原创 2018-10-22 18:05:56 · 29227 阅读 · 2 评论 -
text-align:justify无效解决办法
text-align实现两端对齐文本效果，但是要特别注意text-align不会处理被打断的行和最后一行！如果你的文字只占了一行，同事它也是最后一行了，所以text-align设置为justify不会产生任何效果。解决方法是使用text-align-last，并将其设置为justify。不过不幸的是，text-align-last不是所有浏览器支持。所以对于不支持text-align-l...原创 2018-10-23 10:11:42 · 8713 阅读 · 1 评论 -
简单说 通过CSS实现 文字渐变色 的两种方式
说明这次的重点就在于两个属性， background 属性 mask 属性 这两个属性分别是两种实现方式的关键。解释方式一效果图代码<!DOCTYPE html><html><head> <meta charset="utf-8"> <style> span { ...转载 2018-11-27 13:33:16 · 1455 阅读 · 0 评论 -
CSS Modules 详解及 React 中实践
CSS 是前端领域中进化最慢的一块。由于 ES2015/2016 的快速普及和 Babel/Webpack 等工具的迅猛发展，CSS 被远远甩在了后面，逐渐成为大型项目工程化的痛点。也变成了前端走向彻底模块化前必须解决的难题。CSS 模块化的解决方案有很多，但主要有两类。一类是彻底抛弃 CSS，使用 JS 或 JSON 来写样式。Radium，jsxstyle，react-style 属于这一...转载 2019-01-30 13:58:13 · 691 阅读 · 0 评论 -
css3文字炫彩电音效果
偶然在Maroon 5的官网看到这样的文字效果真的很酷就记录下来感兴趣的话也可以自己去看飞机票刚好在写小程序就在小程序中模仿了下html：css：.css3 { margin: 40px; font-size: 30px; color: #000; font-weight: bold; animation: dubstep 1....原创 2019-02-22 18:14:27 · 1034 阅读 · 0 评论 -
5分钟DIY一个自定义单选框单选按钮
转眼间2017年了，在这里祝大家2017都能 展翅高飞、心想事成！ 上次写博已经是两个月前了，这两个月七搞八搞学了不少黑科技日后必会分享给大家~下面咱们就开门见山了由于浏览器本身自带的单选按钮且不说好看不好看，各大浏览器厂商也是一人一个样儿想要统一效果相对来说比较麻烦，所以我们常见的做法就是 自定义 一个单选按钮。像这样的效果：这样的一个性别选择按钮非常的常见，类似的效果也都可以用这种方法写出来。原创 2017-01-05 00:07:19 · 12828 阅读 · 0 评论 -
div层调整z-index属性无效原因分析及解决方法
div层调整zindex属性在IE中无效原因分析及解决方法很久没有写前端代码了，最近有个项目需要亲自动手，但是在做的过程中，发现了一个很简单却又很多人应该碰到的问题，设置Z-INDEX属性无效。在CSS中，只能通过代码改变层级，这个属性就是z-index，要让z-index起作用有个小小前提，就是元素的position属性要是relative，absolute或是fixed。1.第一种情况（z-in转载 2016-10-24 15:36:06 · 4596 阅读 · 1 评论 -
CSS:haslayout知多少
因元素hasLayout而导致的问题其实一般都很容易发现：往往是内容出现错位甚至完全不可见，比如含浮动或者绝对定位子元素的容器高度会塌陷，在ie6/ie7下我们为其添加zoom：1属性就触发了haslayout，从而修复高度塌陷的问题;再比如，我们经常会碰到ie6和ie7同时出现的bug，这个时候可以考虑是否源于 haslayout，可以添加一些可以触发haslayout的属性来解决。转载 2016-09-01 09:42:55 · 572 阅读 · 0 评论 -
a标签伪类排列的顺序
css中关于超链接的四个属性一般正常顺序为：link，visited，hover，active，一个简便快捷的记忆方法就是LVha，LV哈哈 相信大家都懂。转载 2016-08-22 11:07:52 · 5521 阅读 · 0 评论 -
span、a标签之间的换行空白问题
我们平时在写行内元素时，经常会不小心换行写个空格啥的，然后就会惊奇的发现浏览器中居然有空格。<span>第一个span标签</span><span>第二个span标签</span>效果是这样的：<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><style type="text/css"> s原创 2016-09-26 23:30:52 · 12832 阅读 · 0 评论 -
css清除浮动float的七种常用方法总结和兼容性处理
7、万能清除法 **after伪类** 清浮动（现在**主流**方法，**推荐使用**）```选择符:after{ content:"."; clear:both; display:block; height:0; overflow:hidden; visibility:hidden;原创 2016-10-09 23:04:14 · 41044 阅读 · 0 评论 -
span，a标签，label标签文字右边的1px空白的解决办法
最近在做一个这样的效果时注意到了一个span的小细节——当span标签的内容最后一个字为中文时，会默认给文字右边留1px的空白像素（类似内填充，但是它无法清除）。这样就导致我们在计算两个span标签之间的margin时需要减去这1px，否则就会和设计效果出现几像素的误差。a标签也是一样，这里我们就不另外说了，各位自己去测试。下面我来重现一下这1px误差是如何产生的： 首先我们写连个相连的span标原创 2016-09-25 20:58:16 · 6285 阅读 · 0 评论 -
css图片垂直居中自适应
我们在应用图片的时候经常会碰到要让图片在容器里居中的情况，水平居中很简单直接给容器添加text-align: center;就ok了。那么垂直居中呢？是不是给img加vertical-align: middle;就可以了呢？答案显然是否定的，单纯的给img加vertical-align: middle;并不能行，我平时用的比较多的办法有两种。方法一： <style type="text/css">原创 2016-10-10 08:47:27 · 11854 阅读 · 4 评论 -
取消a标签在移动端点击时的背景颜色
一、取消a标签在移动端点击时的蓝色 1 2 3 4 -webkit-tap-highlight-color: rgba(255,255,255,0); -webkit-user-select:none; -moz-user-focus:none; -moz-user-select:none; ...转载 2019-08-06 15:41:17 · 486 阅读 · 0 评论