- 博客(14)
- 收藏
- 关注
RSS订阅原创 CSS3的filter滤镜特效
Filter主要是运用在图片上，以实现一些特效。（尽管他们也能运用于video上），不过我们在些只来讨论图片上的运用。-webkit-filter是css3的一个属性，Webkit率先支持了这几个功能，感觉效果很不错。下面咱们就学习一下filter这个属性吧。现在规范中支持的效果有：grayscale 灰度 值为0-1之间的小数sepia 褐色 ...
2019-04-28 20:59:29
388
原创 CSS3利用text-shadow属性实现多种效果文字特效
一、效过图展示：已经是比较久之前学习的文字效果了。但是还是很实用很有趣的。利用CSS3提供的text-shadow属性可以给页面上的文字添加阴影效果，因此可以替换掉之前使用过的一些繁琐的图片。到目前为止Safari、FireFox、Chrome和Opera等主流浏览器都支持该功能。二、介绍CSS3的 text-shadow属性text-shadow属性可以给页面上的文字添加阴影效果，基本语法...
2019-04-27 19:33:32
1003
原创 CSS3box-shadow属性详解
CSS3 --添加阴影（盒子阴影的使用）CSS3 - 给div或者文字添加阴影（盒子阴影、文本阴影的使用）CSS3定义了两种阴影：盒子阴影和文本阴影。其中盒子阴影需要IE9及其更新版本，而文本阴影需要IE10及其更新版本。下面分别介绍box-shadow阴影的使用：1、盒子阴影box-shadowbox-shadow属性向box添加一个或多个阴影。语法：box-shadow: of...
2019-04-27 19:18:37
101038
7
原创 CSS3径向渐变radial-gradient详解
上一章我们详细讲解的linear-gradient线性渐变，来现在我们来讲解radial-gradient径向渐变CSS3径向渐变radio-gradient1、语法径向渐变不同于线性渐变，线性渐变是从“一个方向”向“另一个方向”的颜色渐变，而径向渐变是从“一个点”向四周的颜色渐变。其语法如下：background: radial-gradient(center, shape, siz...
2019-04-22 21:52:15
12135
1
原创 如何使用linear-gradien线性CSS3渐变
使用linear-gradienCSS渐变使用CSS 渐变 是在 CSS3 Image Module 中新增加的 <image> 类型. 使用 CSS 渐变可以在两种颜色间制造出平滑的渐变效果. 用它代替图片，可以加快页面的载入时间、减小带宽占用。同时，因为渐变是由浏览器直接生成的，它在页面缩放时的效果比图片更好，因此你可以更加灵活、便捷的调整页面布局。浏览器支持两种类型的渐变...
2019-04-22 20:51:18
1401
原创 CSS伪元素:before和:after用法详解
css的伪元素，之所以被称为伪元素，是因为他们不是真正的页面元素，html没有对应的元素，但是其所有用法和表现行为与真正的页面元素一样，可以对其使用诸如页面元素一样的css样式，表面上看上去貌似是页面的某些元素来展现，实际上是css样式展现的行为，因此被称为伪元素。如下图，是伪元素在html代码机构中的展现，可以看出无法伪元素的结构无法审查。css有一系列的伪元素，如:before，:aft...
2019-04-21 13:38:17
717
原创 HTML标签嵌套规则以及常规应用
HTML分类1、块级元素：div、h1~h6、address、blockquote、center、dir、dl、dt、dd、fieldset、form、hr、isindex、menu、noframes、noscript、ol、p、pre、table、ul、li特点：总是在新行上开始，高度、行高以及上下边距都可控制，宽度默认是容器的100%，除非设定宽度。功能：主要是用来搭建网站架构、网...
2019-04-21 12:28:29
1904
原创 CSSz-index详解
CSS教程：Z-index属性大多数的CSS属性都很容易使用。常常，当您对标记语言的元素使用CSS属性时，产生的结果会随着您刷新页面而立即呈现。而另一些CSS属性，却会有一些复杂，且只能在给定的环境下才会工作。Z-index属性便属于上面所说的后面的那一组。Z-index无疑的比其他任何属性都会频繁的导致（兼容性）上的混乱和（开发者心理上）的挫败感。但滑稽的是，一旦你真正理解了Z-index，...
2019-04-14 10:49:59
954
原创 深入理解css基线与行高
一、基本概念1、基线、底线、顶线、中线注意：基线（base line）并不是汉字文字的下端沿，而是英文字母“x”的下端沿2、内容区内容区是指底线和顶线包裹的区域（行内元素display:inline;可以通过background-color属性显示出来）实际中不一定看得到，但确实存在。内容区的大小依据font-size的值和字数进行变化。3、行距、行高行高（line-hei...
2019-04-13 22:16:11
301
原创 css中替换元素和不可替换元素及显示元素详细探讨
元素是文档结构的基础，在css中，每个元素生成了一个包含了元素内容的框（box，也译为“盒子”）。但是不同的元素显示的方式会有所不同，例如和就不同，而<strong>和<p>也不一样。在文档类型定义（dtd）中对不同的元素规定了不同的类型，这也是dtd对文档之所以重要的原因之一。1. 替换和不可替换元素从元素本身的特点来讲，可以分为替换和不可替换元素。a) 替换元素...
2019-04-13 21:28:44
302
原创 CSStransform变换属性
CSS3属性transform属性详解在CSS3中，可以利用transform功能来实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形处理，本文将对此做详细介绍。一、旋转rotate用法：transform: rotate(45deg);共一个参数“角度”，单位deg为度的意思，正数为顺时针旋转，负数为逆时针旋转，上述代码作用是顺时针旋转45度。二.缩放 scale用法：trans...
2019-04-13 21:00:21
600
原创 CSS3景深、三维变换属性及旋转三维立方体的实现
三维立体效果我觉得是CSS3中最有意思的地方，不得不佩服那些开发者大神们，让我们能够通过几行CSS代码就能得到酷炫的视觉体验。浏览器坐标系在讲正式语法之前，首先需要了解浏览器坐标系，这需要我们把浏览器界面想象成一个立体的场景。注意要想象这是网上流传很广的浏览器坐标系图片，从左到右的方向是浏览器x轴的正方向，从上到下的方向是浏览器y轴的正方向，而z轴正方向是面对于我们的，了解这个很重要，...
2019-04-07 12:21:20
509
原创 HTMLvideo视频标签
HTML video 标签定义和用法 标签定义视频，比如电影片段或其他视频流。属性HTML新增属性autoplay 属性如果出现该属性，则视频在就绪后马上播放。autoplay 属性规定一旦视频就绪马上开始播放。如果设置了该属性，视频将自动播放。controls 属性如果出现该属性，则向用户显示控件，比如播放按钮。controls 属性规定浏览器应该为视频提供播放控件。...
2019-04-06 12:44:03
639
原创 css3transition(过渡)
CSS过渡使用CSS3过渡，我们可以通过改变CSS属性来创建动画。无需使用Flash动画或JavaScript下表列出了所有过渡属性：transition - 用于设置四个转换属性的简写属性transition-delay - 指定过渡效果何时开始transition-duration - 指定完成转换所需的秒数或毫秒数transition-property - 指定转换所用的CSS...
2019-04-06 11:06:40
964
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人