分类 CSS 下的文章

木灵鱼儿 4年前 CSS JavaScript

处理谷歌浏览器总是提示无法阻止事件的报错

这个问题一直困扰了我很久了,之前我做手机端侧栏nav的时候也会出现这个问题,因为不影响使用,也暂时没找到处理的办法,索性就没管了,今天尝试了几次方式,发现通过css设置就很很完美的解决的这个问题.首先这个问题一般都是因为我们阻止的touch事件导致的,谷歌为了让滑动能够顺滑,即便我们阻止了默认行为也是滑动的,所以才会出现这个错误.错误提示:[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See解决办法直接给body元素...

3001 0 0

谷歌报错阻止触摸事件报错

margin负值拉伸元素

木灵鱼儿 4年前 CSS

margin负值拉伸元素

今天按着书写代码的时候发现一个问题，margin负值居然无法拉伸元素，在我的理解里margin四个值都为负值的时候是可以拉伸元素的。为此我还特意百度了下，也没找到什么有价值的信息，于是自己测试了下。当元素为block话的时候，也就是正常水平流状态时，使用margin负值是可以拉伸的，但是，当你的元素设置了宽高，那么负值就不能拉伸了。他会以top和left两个方向做位置偏移。而： position: absolute; top: 0; bottom: 0; left: 0; right: 0;这种状态元素也可以看做为一个block元素，正常的水平流状态。也能用margin负值拉伸！...

3837 0 1

css动画之jojo波纹（波纹动效）

木灵鱼儿 5年前 CSS

css动画之jojo波纹（波纹动效）

先看看仿制的原作动画效果我们首先做一个分析，他首先它的本质就是一个圆圈在渐变放大然后缩小的过程，然后通过三个圆圈达到波动的效果，那么我们就可以通过动画annimation来制作。首先可以明确一点就是，他们的动画是一样的，只是触发的时间不同，那么就很简单了，动画提供延时功能，我们只需要控制三个动画的延迟即可。HTML部分：<div class="pos"> <div id="box"> <a href="#" class="img_pox"> ...

3604 0 0

动画波纹效果

为博客文章加上标签

木灵鱼儿 6年前 HTML CSS

为博客文章加上标签

突然想给博客加个标签，然后说干就干，反正挺简单的，然后效果还不错，美滋滋........

3520 0 0

反正博客标签

什么是上下文节点？？？

木灵鱼儿 6年前 HTML CSS JavaScript

什么是上下文节点？？？

学html+css的时候有在书上看到过上下文节点，但是也没详细说明，看视频的时候也有人说过，但是也是一笔带过，也没在意，今天学XPath的时候就有关于上下文节点有一个说明，但是只说了一点，没啥详细，所以自己百度了下，如下：代码：<html> <body> <a id = '1'>文本节点1</a> <a id = '2'>文本节点2</a> <a id = '3'>文本节点3</a> ...

3342 0 0

代码 html 文本

YoDu魔改版主题v3.1更新（修复bug）

木灵鱼儿 6年前 HTML CSS

YoDu魔改版主题v3.1更新（修复bug）

YoDu魔改版主题v3.1更新：修复了长代码在小分辨率下无法换行问题。针对表格代码做了样式调整。回复可见代码微调。修复了footer元素由于启用了css3的弹性布局，导致tim使用软件内浏览时，其内核过旧不能支持，特重新调整，改为css2特性，取消了footer的背景渐变。字体大小调整。

3916 0 0

主题样式大小

Typecho表格的创建写法和table的css样式分享

木灵鱼儿 6年前 CSS

Typecho表格的创建写法和table的css样式分享

之前就听说Typecho的md编辑器支持表格写法了，这次刚好在写一篇文章的时候用到了，所以顺带写了一个css分享出来，很简单的，有需要的可以复制到自己的css文件中。表格的创建写法是：|th内容|th内容| //内容与内容之间都是用|竖线分割 |---------|---| //这里用来分割表头和tbody |内容1|内容2| //需要几行就这样写几行效果展示：查看有表格的文章CSS代码：table { width: 100%; border: 1px solid #e1e1e1; border-collapse: col...

4711 0 0

Typecho表格css分享

控制tab的宽度tab-size

木灵鱼儿 6年前 CSS

控制tab的宽度tab-size

上一篇文章我们用渐变背景模拟了斑马纹，这次我们顺带简单了解下如何控制tab的宽度。浏览器默认一个tab是8个字符，这种感人的宽度简直让人吐血，你想想你在编辑器里一个tab才多宽，而且我们有时候经常是三个tab起步啊，这要是在浏览器里显示，简直突破天际，为此css3特意出了一个新属性：tab-size。目前tab-size在日常的浏览器都是支持了，but---除了微软的浏览器，微软的浏览器不知道拖了多少后腿，你想想ie....再到现在的edge，来人，做了他。嗯哼~~~有点扯远了，我们继续。tab-size目前用，建议直接用数字，虽然也能用像素单位这些，但是苹果又不行啊，所以我们还是用数字...

2769 0 0

tab-size 控制tab的宽度

用渐变来模拟斑马纹

木灵鱼儿 6年前 CSS

用渐变来模拟斑马纹

斑马纹应用很广泛，用于表格，代码展示，列表展示等等，一般都是先给每一行加一个block的父元素，然后再用元素选择器:nth-child(odd)和:nth-child(even)来选择奇数元素和偶数元素，这样就会产生一个问题，第一行一般都是标题之类的，这样写会让标题和内容部分相同，于是又只能再加一个选择器:first-child将第一个重置。这样虽然说是可以，但是岂不是很麻烦，需要给每一个子元素加一个block，如果子元素本身就是block那好办，如果不是呢，只是纯文本呢，那不是还要用js去选择，得不偿失，于是我们可以试着用背景层去模拟，然后用em或者rem单位控制大小，这样，既可以自适...

3952 0 0

渐变 linear-gradient repeating-linear-gradient

有趣的hue-rotate滤镜

木灵鱼儿 6年前 CSS

有趣的hue-rotate滤镜

css3的滤镜真的非常强大，比如这个hue-rotate滤镜，可以让图片的一些颜色变成想要的颜色，当然黑色白色除外，因为这个滤镜的原理就是改变图片的色相，如果你用过ps的话就会知道，再ps里面可以通过改变图片的色相来改变图片的颜色，而且效果很方便，不会有颜色与颜色之前的不自然感。下面我们来看看吧！我门先找一张图片：这张应该是红宝石的壁纸，我们先用ps颜色拾取工具或者红宝石的hsl色环角度。红色hsl为4deg，那么我们试着把他变成紫色的！已知紫色hsl色环值为282deg，我们需要添加多少的角度值才能等于282deg，于是：282-4=278，我们需要添加278deg，于是代码这么写;i...

3894 0 0

filter hue-rotate

CSS3 object-fit/object-position简单了解

木灵鱼儿 6年前 CSS

CSS3 object-fit/object-position简单了解

从第一次使用yodu的主题，我就很在意他是怎么让首页的文章缩略图居中且填满设置好的大小，而且不会产生形变，然后我f12查看代码的时候看到了这个：object-fit:cover；这个cover很容易理解，和background的cover是一样的，而这个object-fit又是什么意思呢？为此我特意去看了大佬“张鑫旭”的博客，从中获益匪浅！我个人的理解是这样的：首先我们要清楚img他的一些结构原理，为此我就简单画个图方便理解!我们的img是一个元素，img就像是一个div一样，他包裹着里面的图片。而img后面调用的src="xxxx.jpg"就是图片的本体，所以我们理解的时候不要想着图片...

3798 0 0

object-fit object-position 图片保持比例填满div

给伪元素也加上box-shadow

木灵鱼儿 6年前 CSS

给伪元素也加上box-shadow

在设置一些tag标签样式的时候，我们一般都是设置为一边箭头的标签样式，这个箭头一般都是使用伪元素before来进行模拟，但是当我们想要给这个标签加上阴影box-shadow的时候，你会发现你的阴影并不能应用的伪元素上。我们先看下具体代码：HTML:<div class="div1">tag</div> CSS：.div1 { display: inline-block; line-height: 20px; background-color: currentcolor; color: #00AAFF; ...

5202 0 1

box-shadow 伪元素添加阴影 drop-shadow

创建渐变条纹linear-gradient以及一些感悟

木灵鱼儿 6年前 CSS

创建渐变条纹linear-gradient以及一些感悟

渐变条纹linear-gradient一些感悟：条纹背景其实用的还是比较少的，主要是因为色彩的调控，有点喧宾夺主，如果是只是简单的页面，非多内容的，其实也可以考虑用色彩比较淡一些的条纹做为背景，然后内容部分用颜色块去凸显主体，不过个人是没有这个调控能力，等以后有机会再试试吧！先我们来讲讲linear-gradient的代码意思：background: linear-gradient(#58a 50%,#999 70%); 这是一段常见的背景渐变，淡蓝色在上面，灰色在下面。如图：这里的50%和70%就需要特别说明一下，这个百分百并不是指颜色占据的高度或者宽度，而是颜色渐变的起始点、结束点，...

4406 0 0

渐变 linear-gradient 条纹渐变

自定义字体font-face中的font-style、font-weight详解

木灵鱼儿 6年前 CSS

自定义字体font-face中的font-style、font-weight详解

自定义字体相信大家都知道是font-face，但是自定义下来总是有一大段代码，其中引用字体的我们就不谈了，这个比较简单的，我们谈的是里面经常出现的font-style和font-weight，这两个代表的含义！font-style顾名思义，就是字体的风格，常用的就是斜体（initial），非斜体（normal）。font-weight就是设置字体的字重，也就是粗细，100-900。那么为什么每次自定义字体都会出现这两个呢，而且一般都是设置重置normal，既然都是默认，再写一遍岂不是多余？？？其实不能这么理解，我们应该将其理解为引用的——条件——，并且一般是用于多套字体，一个字体名称的。...

6878 0 0

font-weight font-face font-style

自定义字体font-face中的font-style、font-weight详解

font-size为0，高度反而增高的原因

木灵鱼儿 6年前 CSS

font-size为0，高度反而增高的原因

不知道大家平时写代码的时候有没有发现一个问题，就是有时候设置某段文字font-size:0；的时候，整行高都会突然变高，如下图。以下是代码：html部分<div class="div1"> <p>x<span>x</span>sjdkdfg奥斯卡了多少卡回复</p> </div> css部分.div1 { width: 500px; line-height: 20px; background: #999; } p { margin: 0; paddi...

4592 0 0

font-size line-height 幽灵空白节点

两栏自适应布局

木灵鱼儿 6年前 HTML CSS

两栏自适应布局

两栏自适应布局，顾名思义就是当左边的高度高于右边时，右边会自动补全至其等同于左侧的高度！示意图方法有三种，按原理来算应该只能算两种，为此我们慢慢道来：第一种：margin控制外部大小的方式HTML代码：<div class="div1"> <div class="left"> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>...

3677 0 0

代码 css table-cell

弹性布局flexbox

木灵鱼儿 6年前 CSS

弹性布局flexbox

父元素设置：display: flex; justify-content: space-around; align-items: center; flex-flow: column wrap;（可选）子元素设置：flex: 1; （可选） order: 1;（可选） align-self: flex-start;（可选）解释：display: flex; 设置元素为弹性布局justify-content: space-around; 设置子元素水平对齐方式！（flex-start：起点对齐；flex-end：终点对齐；center：居中对齐；space-between：一个子元素时...

2708 0 0

弹性布局 flexbox css

CSS的简写形式合集

木灵鱼儿 6年前 CSS

CSS的简写形式合集

注：| 符号为空格！font：italic（font-style:字体倾斜样式）|small-caps（font-variant:小型大写字母）|bold（font-weight：字体粗细）|12px（font-size：字体大小）/1.5em（line-height：行高）|arial，verdana（font-family：字体）;例：完整写法：font：italic small-caps bold 12px/1.5em arial,verdana;简单写法：font: 12px arial,verdana; [字体大小必须在前面！]简写形式必须要有font-size和font-fa...

3159 0 0

css background css简写合集

这次把主题升级了下，然后哭着改完CSS（多列布局属性）

木灵鱼儿 6年前 HTML CSS

这次把主题升级了下，然后哭着改完CSS（多列布局属性）

距离自己上次魔改主题也过去了一段时间，说实话我差不多把自己改的地方都忘了，然后这次脑子一抽就更新了，然后就是666.....从凌晨2点左右就在搞了，各种更新调试，只能怪自己不熟练，找了好多地方调整，然后本来如果是直接在原来的css的属性上改会比较省事，但是发现以后要是再更新，那我不得想死，于是又单独开了一列，用了超多!important属性，然后呕心沥血的改好了，防止自己作死删了修改好的源文件，直接贴上大部分的CSS吧！又需要也可以自己粘贴使用哈哈，不过仅限于YoUDu这个主题。说下心得：本来我是想着既然css3出了一个多列布局的属性，那么不用白不用，就来体验下，发现，这个属性最大的bu...

3578 0 0

多列布局 column 魔改

CSS3文字渐变效果

木灵鱼儿 6年前 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将渐变展示为文本大小。由于这个属性...

3242 0 0

text background font

修复浏览器右侧滚动栏的宽度

木灵鱼儿 7年前 CSS

修复浏览器右侧滚动栏的宽度

第一种方法：給html标签添加overflow-y：scroll；直接給每个页面添加y轴滚动条，这样就不会有偏差了，实际显示的宽度的位置都是一样的。不过这个就很难看了，伤敌1000自损800.第二种方法，通过函数计算出滚动栏的宽度，然后添加一个padding值，让他抵消掉。給内容部分的div添加一个padding-left： calc（100vw - 100%）；其中100vm是浏览器的显示宽度，100%则是内容实际占用的宽度，让浏览器宽度减去实...

4584 0 0

html css 修复

transform

木灵鱼儿 7年前 CSS

transform

2d变形translate X Y轴移动scale X Y放大缩小rotate X Y 旋转skew X Y轴倾斜3d变形perspective 设置视距translate X Y Z轴移动scale X Y Z 放大缩小rotate X Y Z旋转移动和旋转不同，移动是轴的延长缩短，旋转是根据轴身做360度变形

2558 0 0

旋转 scale translate

clip-path:polygon裁剪多边形

木灵鱼儿 7年前 CSS

clip-path:polygon裁剪多边形

3173 0 0

clip-path polygon 裁剪多边形

字体粗细

木灵鱼儿 7年前 CSS

字体粗细

lighter mediumboldblack

3318 0 0

lighter font-weight 语义

div浮动清理浮动外边距失效

木灵鱼儿 7年前 CSS

div浮动清理浮动外边距失效

只要在中间加个div，设置好div:after {content:"."; height:0; visibility:hidden; display:block; clear:both; }就可以了

2839 0 0

伪元素清理浮动 after visibility:hidden

分类：CSS

处理谷歌浏览器总是提示无法阻止事件的报错

margin负值拉伸元素

css动画之jojo波纹（波纹动效）

为博客文章加上标签

什么是上下文节点？？？

YoDu魔改版主题v3.1更新（修复bug）

Typecho表格的创建写法和table的css样式分享

控制tab的宽度tab-size

用渐变来模拟斑马纹

有趣的hue-rotate滤镜

CSS3 object-fit/object-position简单了解

给伪元素也加上box-shadow

创建渐变条纹linear-gradient以及一些感悟

自定义字体font-face中的font-style、font-weight详解

font-size为0，高度反而增高的原因

两栏自适应布局

弹性布局flexbox

CSS的简写形式合集

这次把主题升级了下，然后哭着改完CSS（多列布局属性）

CSS3文字渐变效果

修复浏览器右侧滚动栏的宽度

transform

clip-path:polygon裁剪多边形

字体粗细

div浮动清理浮动外边距失效

最近评论

博客文章RSS订阅

博客评论RSS订阅

登录

分类：CSS

处理谷歌浏览器总是提示无法阻止事件的报错

margin负值拉伸元素

css动画之jojo波纹（波纹动效）

为博客文章加上标签

什么是上下文节点？？？

YoDu魔改版主题v3.1更新 （修复bug）

Typecho表格的创建写法和table的css样式分享

控制tab的宽度tab-size

用渐变来模拟斑马纹

有趣的hue-rotate滤镜

CSS3 object-fit/object-position简单了解

给伪元素也加上box-shadow

创建渐变条纹linear-gradient以及一些感悟

自定义字体font-face中的font-style、font-weight详解

font-size为0，高度反而增高的原因

两栏自适应布局

弹性布局flexbox

CSS的简写形式合集

这次把主题升级了下，然后哭着改完CSS（多列布局属性）

CSS3文字渐变效果

修复浏览器右侧滚动栏的宽度

transform

clip-path:polygon裁剪多边形

字体粗细

div浮动清理浮动外边距失效

最近评论

博客文章RSS订阅

博客评论RSS订阅

YoDu魔改版主题v3.1更新（修复bug）