![](https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS
文章平均质量分 83
辰聂
这个作者很懒,什么都没留下…
展开
-
CSS之linear-gradiend ——实现条纹背景效果
用角度值指定渐变的方向(或角度)。角度顺时针增加。描述渐变线的起始点位置。它包含两个关键词:第一个指出垂直位置left or right,第二个指出水平位置top or bottom。关键词的先后顺序无影响,且都是可选的。to top == o度, to bottom == 180度, to left == 270度 , to right == 90度案例所用颜色:条纹间隔由background-size属性控制,下图div的css样式为:{background: linear-gradien转载 2021-03-05 16:52:39 · 559 阅读 · 0 评论 -
CSS Variables:css自定义属性的使用
CSS Variables,一个并不是那么新的东西,但对css来说绝对是一场革命。之前使用变量的时候,需要借助sass、less等预处理工具来实现,现在我们可以直接使用css来声明变量。一、兼容性先来看下兼容性 二、语法语法有点难看但很简单,--*来声明变量名,var(--*)来使用,也许你要问了,为什么使用–不用$一类的呢,唉,那不是sass、less两个货用了吗1、声明和使用必须放在{}代码块里body{ --bg-color: lightblue; background-转载 2021-02-03 13:31:27 · 359 阅读 · 0 评论 -
css如何将div画成三角形
首先了解一下盒模型:盒模型先看一段代码:#div1{ height: 100px; border-style: solid; border-width: 100px 100px 100px 100px; border-color: red forestgreen blue cyan; width: 100px;}根据代码渲染,显示效果如下(边框颜色border-color四个值默认的加载方向,top right bottom left): 根据css代转载 2021-02-03 11:59:27 · 1236 阅读 · 0 评论 -
position为fixed时设置z-index失效
有时候在调试一个页面时出现了如下bug。左侧的菜单固定为fixed时,二级菜单无法设置有效的z-index,导致菜单隐藏在页面元素之下,明明页面元素的z-index是1,但是无论把菜单的z-index设置为多大,都不管用。查阅了资料,原来谷歌浏览器在设置position:fixed;后会触发元素创建一个新的层叠上下文,并且当成一个整体在父层叠上下文中进行比较。如上面的dom结构,当给b设置了position:fixed属性后,会触发创建一个新的层叠上下文,它的父层叠上下文变成了a,所以b只能在a的内部进转载 2020-11-06 08:50:37 · 2304 阅读 · 0 评论 -
关于 CSS3 中的 animation 属性
animation属性为多个属性混合的简写属性,可以为元素设置动画。CSS语法:animation: name duration timing-function delay iteration-count direction fill-mode play-state值说明animation-name指定要绑定到选择器的关键帧的名称animation-duration动画指定需要多少秒或毫秒完成animation-timing-function设置动画将如何完成一个原创 2020-10-11 12:37:51 · 581 阅读 · 2 评论 -
关于 CSS3 中的 filter(滤镜) 属性
filter 属性定义了元素(通常是<img>)的可视效果(例如:模糊与饱和度)。CSS语法:filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url()提示:若想在一个元素上应用多个滤镜,可用空格分隔filter函数:注意: 滤镜通常使用百分比 (如:原创 2020-10-11 10:38:18 · 913 阅读 · 0 评论 -
关于设置z-index层级无效的问题
最近在写一个小项目,遇到很多小细节的问题,果然还是要实战才能知道自己的不足之处啊~回归正题,我在一个div明明设置了属性z-index,但是为什么在网页上显示无效呢?首先排除设置的层级不够的问题;然后我就去 W3School 查询了才知道问题所在。先来看官方给的定义的用法:z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。注释:元素可拥有负的 z-index 属性值。注释:Z-index 仅能在定位元素上奏效(position属性值设置除默认值sta转载 2020-09-20 12:21:23 · 1009 阅读 · 0 评论