YoDu魔改版主题v3.1更新 （修复bug）
YoDu魔改版主题v3.1更新：修复了长代码在小分辨率下无法换行问题。针对表格代码做了样式调整。回复可见代码微调。修复了footer元素由于启用了css3的弹性布局，导致tim使用软件内浏览时，其内核过旧不能支持，特重新调整，改为css2特性，取消了footer的背景渐变。字体大小调整。
标签：渐变
木灵鱼儿
CSS
用渐变来模拟斑马纹
斑马纹应用很广泛，用于表格，代码展示，列表展示等等，一般都是先给每一行加一个block的父元素，然后再用元素选择器:nth-child(odd)和:nth-child(even)来选择奇数元素和偶数元素，这样就会产生一个问题，第一行一般都是标题之类的，这样写会让标题和内容部分相同，于是又只能再加一个选择器:first-child将第一个重置。这样虽然说是可以，但是岂不是很麻烦，需要给每一个子元素加一个block，如果子元素本身就是block那好办，如果不是呢，只是纯文本呢，那不是还要用js去选择，得不偿失，于是我们可以试着用背景层去模拟，然后用em或者rem单位控制大小，这样，既可以自适...
木灵鱼儿
CSS
创建渐变条纹linear-gradient以及一些感悟
渐变条纹linear-gradient一些感悟：条纹背景其实用的还是比较少的，主要是因为色彩的调控，有点喧宾夺主，如果是只是简单的页面，非多内容的，其实也可以考虑用色彩比较淡一些的条纹做为背景，然后内容部分用颜色块去凸显主体，不过个人是没有这个调控能力，等以后有机会再试试吧！先我们来讲讲linear-gradient的代码意思：background: linear-gradient(#58a 50%,#999 70%); 这是一段常见的背景渐变，淡蓝色在上面，灰色在下面。如图：这里的50%和70%就需要特别说明一下，这个百分百并不是指颜色占据的高度或者宽度，而是颜色渐变的起始点、结束点，...
木灵鱼儿
CSS
CSS3文字渐变效果
暂时还是需要加前缀才可以生效，而且只支持webkit，个人测试电脑端新的浏览器都是可以支持的，除了ie不行，手机端我测试了安卓7.0和火狐浏览器，都是可以显示的，所以日常用一用还是可以的！效果图：代码：-webkit-text-fill-color: transparent; background:linear-gradient(to bottom,#666 50%, #aaa 50%); -webkit-background-clip:text; 注意：原理是通过设置文字填充为透明，然后让背景色渐变显示到文字中，background-clip:text将渐变展示为文本大小。由于这个属性...
没有更多了
最近评论