前军教程网

中小站长与DIV+CSS网页布局开发技术人员的首选CSS学习平台

CSS3新增(1)(css3新增属性有哪些)

圆角边框:

在CSS3中,新增了圆角边框样式,这样我们的盒子就可以变圆角了

border-radius属性用于设置元素的外边框圆角。

语法:

border-radius: length;

前端面试题——css(答案陆续更新)

html语义化的理解

之前HTML仅是冷冰冰的结构化标签,没有语义。后HTML5加入语义化标签,使结构语义化,

CSS中字体图标入门(css字体图片)

1.什么是字体图标

可以看作一种特殊字体,其展示的是图标,而不再是文字,其拥有字体的特性,比如大小、颜色、透明效果、阴影等,字体图标加载快、不变形。也可以看作是矢量格式的图标。

2.字体图标常用免费资源

(1)iconmoon字体图标库:https://icomoon.io/app

(2)阿里iconfont字体图标库:https://www.iconfont.cn/

CSS filter滤镜之drop-shadow#每日一练

CSS filter滤镜之drop-shadow。

我们平时使用的box-shadow所绘制出的阴影都在元素的周围,像边框一样包裹着元素。在一些特定时刻,比如由div和两个伪类绘制出的多边形中,由于伪类的层级高于div盒子,导致伪类的阴影覆盖在了父级div上,想要解决可能要换做三个div,然后重新定位一下层级。

但如果使用滤镜中的阴影,只需要一行css代码就能实现,就是这样,其中这些参数跟box-shadow是一毛一样的。另外可以看到这个属性对于文字、图片都是能够出现一种类似内容边缘发光的效果,是有一定实用性的。

分享8个经典的HTML5 3D动画赏析特效源码

HTML5技术已经越来越被我们所接受,特别是一些3D的动画特效。本文介绍的8个HTML5 3D动画并没有特别华丽的界面,但是比较实用,涉及到3D图片、3D图表、3D按钮等方面,一起来看看。

1、HTML5 3D动画柱形图表

这次我们要来分享一款效果非常酷的HTML5 3D柱形图表,这款HTML5图表和之前分享的都不一样,主要是外观上比较吸引人,首先图表是3D立体的,有一种非常棒的视觉效果;其次,当鼠标划过柱形图表时,会有很不错的HTML5动画效果。

纯CSS做一个简单的可编辑文字霓虹灯闪烁效果~#html

这个视频来做一个可编辑的文字霓虹灯闪烁效果。显示的文字是可以修改的,比方把这些英文删掉,然后改成HELLO WORLD,过程中它是伴随着闪烁,还有一个倒影的效果。

·来看一下代码,html非常简单,就一个h1的标签,然后写了一些基本的样式。先来看一下,现在就这样,但是这些字母还不可以编辑修改。

·要对这个元素进行内容编辑,给它添加一个contenteditable属性,现在这些内容就可以修改了。

CSS3 box-shadow 元素边框制造阴影

box-shadow: h-offset v-offset blur-radius spread-radius color inset;

对象选择器 {box-shadow:X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色 [投影方式]}

1. h-offset:必需。水平阴影的位置。允许负值。如果值为0,则对象的左右边都有阴影,如果值为正值,则阴影在对象的右边,其值为负值时,阴影在对象的左边(默认是outset,如果是inset相反);

超酷的3D立体文字?分享 1 段优质 CSS 代码片段!

本内容首发于工粽号:程序员大澈,每日分享一段优质代码片段,欢迎关注和投稿!

Css3中text-shadow属性使用方法及各参数所代表的含义

在CSS3中我们可以使用text-shadow属性给页面上的文字添加阴影效果,text-shadow在CSS2.1的时候曾被删除过的一个属性,但是又在css3.0中恢复了使用。

①text-shadow的使用方法:text-shadow:length length length color

  • 第一个length表示的是阴影离开文字的横向距离;
  • 第二个length表示的是阴影离开文字的纵向的距离;
  • 第三个length表示的是阴影模糊半径;

HTML5 给图形绘制阴影(html5边框阴影)

在 HTML5 中,我们除了上一节讲过的可以对图形设置平移、旋转、缩放,还可以给图形添加阴影效果。添加阴影的时候只需要利用图形上下文对象的几个关于阴影绘制的属性就可以实现啦。

图形阴影绘制的属性



shadowOffsetX 属性和 shadowOffsetY 属性分别用于设置阴影在 X 轴和 Y 轴的延伸距离,属性值为正值表示向下或向右延伸,负值表示向上或向左延伸。

<< < 1 2 3 4 5 > >>
控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言