圆角边框:
在CSS3中,新增了圆角边框样式,这样我们的盒子就可以变圆角了
border-radius属性用于设置元素的外边框圆角。
语法:
border-radius: length;
2024年10月16日
在CSS3中,新增了圆角边框样式,这样我们的盒子就可以变圆角了
border-radius属性用于设置元素的外边框圆角。
语法:
border-radius: length;
2024年10月16日
可以看作一种特殊字体,其展示的是图标,而不再是文字,其拥有字体的特性,比如大小、颜色、透明效果、阴影等,字体图标加载快、不变形。也可以看作是矢量格式的图标。
(1)iconmoon字体图标库:https://icomoon.io/app
(2)阿里iconfont字体图标库:https://www.iconfont.cn/
2024年10月16日
CSS filter滤镜之drop-shadow。
我们平时使用的box-shadow所绘制出的阴影都在元素的周围,像边框一样包裹着元素。在一些特定时刻,比如由div和两个伪类绘制出的多边形中,由于伪类的层级高于div盒子,导致伪类的阴影覆盖在了父级div上,想要解决可能要换做三个div,然后重新定位一下层级。
但如果使用滤镜中的阴影,只需要一行css代码就能实现,就是这样,其中这些参数跟box-shadow是一毛一样的。另外可以看到这个属性对于文字、图片都是能够出现一种类似内容边缘发光的效果,是有一定实用性的。
2024年10月16日
HTML5技术已经越来越被我们所接受,特别是一些3D的动画特效。本文介绍的8个HTML5 3D动画并没有特别华丽的界面,但是比较实用,涉及到3D图片、3D图表、3D按钮等方面,一起来看看。
1、HTML5 3D动画柱形图表
这次我们要来分享一款效果非常酷的HTML5 3D柱形图表,这款HTML5图表和之前分享的都不一样,主要是外观上比较吸引人,首先图表是3D立体的,有一种非常棒的视觉效果;其次,当鼠标划过柱形图表时,会有很不错的HTML5动画效果。
2024年10月16日
这个视频来做一个可编辑的文字霓虹灯闪烁效果。显示的文字是可以修改的,比方把这些英文删掉,然后改成HELLO WORLD,过程中它是伴随着闪烁,还有一个倒影的效果。
·来看一下代码,html非常简单,就一个h1的标签,然后写了一些基本的样式。先来看一下,现在就这样,但是这些字母还不可以编辑修改。
·要对这个元素进行内容编辑,给它添加一个contenteditable属性,现在这些内容就可以修改了。
2024年10月16日
box-shadow: h-offset v-offset blur-radius spread-radius color inset;
对象选择器 {box-shadow:X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色 [投影方式]}
1. h-offset:必需。水平阴影的位置。允许负值。如果值为0,则对象的左右边都有阴影,如果值为正值,则阴影在对象的右边,其值为负值时,阴影在对象的左边(默认是outset,如果是inset相反);
2024年10月16日
在CSS3中我们可以使用text-shadow属性给页面上的文字添加阴影效果,text-shadow在CSS2.1的时候曾被删除过的一个属性,但是又在css3.0中恢复了使用。
①text-shadow的使用方法:text-shadow:length length length color
2024年10月16日
在 HTML5 中,我们除了上一节讲过的可以对图形设置平移、旋转、缩放,还可以给图形添加阴影效果。添加阴影的时候只需要利用图形上下文对象的几个关于阴影绘制的属性就可以实现啦。
shadowOffsetX 属性和 shadowOffsetY 属性分别用于设置阴影在 X 轴和 Y 轴的延伸距离,属性值为正值表示向下或向右延伸,负值表示向上或向左延伸。