首页
首页
AI Coding
NEW
沸点
课程
直播
活动
AI刷题
APP
插件
搜索历史
清空
创作者中心
写文章
发沸点
写笔记
写代码
草稿箱
创作灵感
查看更多
会员
登录
注册
CSS
赵十八
创建于2023-02-07
订阅专栏
CSS相关
等 2 人订阅
共13篇文章
创建于2023-02-07
订阅专栏
默认顺序
默认顺序
最早发布
最新发布
opcity引发的元素层级变化
我发现含有opcity属性的元素层级会比其他元素的层级高,这时候z-index是不起作用的,opcity会一直高于其他元素的层级。 给其他元素加上position属性,会使该元素跟opcity处在同一
css3 + Js:有趣的图片马赛克~ (高斯模糊)
实现原理基础版本HTMLJS(当作JS文件引入)兼容移动端优化版本HTMLJS(当作JS文件引入)最后可查看实际效果:demo演示地址借鉴于张鑫旭大神
CSS3:图片的高斯模糊效果
高斯模糊的这个属性是对整个元素进行高斯模糊。如果你需要局部模糊,需要结合背景定位。原理就是两层图片叠加,底层清晰,上层模糊。接下来我会结合拖拽和背景定位实现图片的局部模糊。下一篇传送门:js拖拽实现
CSS揭秘:4.边框内圆角
两个div实现内圆角很容易,只需要内圆角外直角即可。 这种方案更加灵活,我们可以在box上设置更多的样式,但是需要两个元素才能实现。 还记得上篇中,outline和box-shadow对于圆角的区别显示吗?box-shadow会贴合border的圆角,outline不会。当我们…
CSS揭秘:6.复杂的背景图案(上)
上一篇文章中我们学会了如何使用渐变实现条纹状的背景,但是实际上条纹背景并不是我们能实现的唯一的背景图案,利用渐变我们可以实现很多更为复杂的图案,本篇会介绍一些其他的简单而实用的背景图案。 网格的原理其实很简单,目前我们已经实现了条纹背景,那么如果我们将条纹背景组合呢?互相穿插组…
CSS:border-radius(圆角)失效了?
原本这两个属性是没有什么联系的,但是当同时出现在同一个元素上时,就会发生圆角效果被滑动条覆盖的情况。 例如: 这种情况下,div的右上角和右下角都会因为滚动条的存在而显示的是直角。 其实div的四个角
CSS实验:linear-gradient 实现「四角边框」和「 字体渐变」
本文想要介绍一些linear-gradient的更多实用性比较强的用法,前面有根据CSS揭秘总结的讲线性渐变实现条纹背景的方法。 red,yellow,blue代表渐变色,表示从red - yellow - blue (相当于red 0% - yellow 50% - blue…
CSS揭秘:1.半透明边框
这段css样式,我们期待的效果是有一个半透明的边框。而实际效果是怎么样的呢? 没错,边框不见了。这跟我们所期待的效果并不符合。原因在于,默认情况下,背景颜色会延伸到边框上,这点我们可以通过虚线边框来发现实际发生了什么。 所以,实际上我们的透明边框其实是存在的,只不过由于背景颜色…
CSS揭秘:2.多重边框
以上是box-shadow的基本参数。box-shadow是为元素添加阴影效果的样式。但是我们可以通过对其属性的设置,呈现边框效果。 将x偏移量 ,y偏移量设置为0px,此时阴影会在元素下面不会超出元素本身。 模糊度设为0px,使阴影呈现实体效果。 增大扩散半径,可以理解为阴影…
CSS揭秘:3.灵活的背景定位
1. background-position扩展语法 background-position扩展语法: css3 中background-position 语法可以通过在偏移量前指定关键字,来设置四条边的偏移量。 2. background-origin background-…
CSS揭秘:5.条纹背景(上)
red,yellow,blue代表渐变色,表示从red - yellow - blue (相当于red 0% - yellow 50% - blue 100%)。 意思是从0%距离处为red,通过0%-50%的距离渐变到yellow,再通过50%-100%的距离渐变到blue。…
CSS揭秘:5.条纹背景(下)
上篇文章讲述了实现条纹效果所使用的CSS特性并实现了水平和垂直条纹,接下来我们来实现斜向条纹。 现在我们来试一下斜向条纹的效果。 1. 斜向 First Try 看来效果并不是我们想象的那样。 2. 斜向 Second Try 双条纹 第一次尝试失败了,但是失败的经验还是有的,…
CSS:文本的水平垂直居中
文字居中 垂直居中(vertical-align) 我们都知道有这么一个属性可以让图片,文本等在元素中垂直居中 vertical-align值有很多...