CSS3
文章平均质量分 82
CSS3
花铛
这个作者很懒,什么都没留下…
展开
-
《十四》CSS3 filter滤镜属性
filter 属性定义了元素的可视效果,通常是 <img>。语法:filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();可以使用空格分隔多个滤镜。属性值:none:默认值,没有效果。blur(px):给图像设置高斯模糊,值越大越模糊。br原创 2021-04-16 13:55:27 · 150 阅读 · 0 评论 -
《十二》CSS3 Grid 网格布局
网格布局将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局。Flex 布局是轴线布局,只能指定项目针对轴线的位置,可以看作是一维布局。适用于一个方向上的布局。Grid布 局则是将容器划分成行和列,产生单元格,然后指定项目所在的单元格,可以看作是二维布局。适用于有行有列的布局。Grid 布局远比 Flex 布局强大。原创 2020-12-09 17:30:10 · 1126 阅读 · 1 评论 -
《十一》CSS3 Flex 弹性布局
Flex 是 Flexible Box 的缩写,意为弹性的盒子,所以 Flex 布局也叫做 Flex 弹性布局。任何一个 HTML 元素都可以通过设置指定为 Flex 布局。采用 Flex 布局的元素,称为 Flex 容器(),简称容器。它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称项目。Flex 容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置叫做main start,结束位置叫做main end;原创 2019-03-13 11:31:14 · 1619 阅读 · 0 评论 -
《十三》CSS3 媒体查询
媒体查询:Media querys,针对不同大小的屏幕写不同的样式,让网页在不同大小的屏幕上都能正常显示。媒体查询在 CSS2 的时候已经出现,CSS2 用 link 标签,而 CSS3 用@meida定义。两者用法类似,但是 CSS3 与 CSS2 相比会减小页面的请求。原创 2019-03-13 11:29:18 · 1106 阅读 · 1 评论 -
《一》CSS3 选择器
2010 年,CSS3 规范推出。:精准匹配,选择属性 B 等于 C 的 A 元素。:开头匹配,选择属性 B 以 C 开头的 A 元素。:结尾匹配,选择属性 B 以 C 结尾的 A 元素。:任意位置匹配,选择属性 B 中包含 C 的 A 元素。:选择属性 B 中有以空格隔开的独立部分的 C 的 A 元素。:选择属性 B 中有 C 加横杠 开头的 A 元素。元素关系选择器::通用兄弟元素选择器。匹配所有位于 A 元素后面的同层级的 B 元素。:相邻兄弟选择器。匹配紧跟在原创 2019-03-13 11:27:04 · 223 阅读 · 1 评论 -
《七》CSS3 2D 与 3D 变形
CSS32D变形可以对元素进行旋转,缩放,移动和倾斜。原创 2020-01-15 15:57:28 · 418 阅读 · 0 评论 -
《八》CSS3 动画
动画通过 JS 和 CSS 都可以实现。原创 2020-01-15 17:05:49 · 245 阅读 · 1 评论 -
《四》CSS3 渐变
CSS3渐变可以在两个或多个指定的颜色之间显示平稳的过渡。以前,必须使用图像来实现这些效果。但是,通过使用CSS3渐变,可以减少下载的时间和宽带的使用;此外,渐变效果的元素在放大时看起来效果更好,因为渐变是由浏览器生成的。...原创 2020-01-15 17:16:08 · 279 阅读 · 1 评论 -
《五》CSS3文本
text-shadow:text-shadow:用来定义文本阴影。语法:text-shadow:h-shadow v-shadow blur color,第一个参数为水平阴影,第二个参数为垂直阴影,第三个参数为模糊的距离,第四个参数为阴影的颜色。h1{ text-shadow: 5px 5px 5px #FF0000;}box-shadow:适用于盒子阴影。div { ...原创 2020-01-15 18:17:23 · 126 阅读 · 0 评论 -
《六》CSS3字体
以前的CSS版本,网页设计师不得不使用用户计算机上已经安装的字体。使用CSS3,网页设计师可以使用自己的字体。只需简单地将字体文件包含在网站中,就会自动下载给用户。目前主要的网络字体:True Type(.ttf)格式:是Window和Mac最常见的字体,是一种RAW格式(未经加工),因此不为网站所优化。除IE8及更老IE版本之外,其他大部分浏览器都支持。Open Type(.otf)格...原创 2020-01-15 18:26:11 · 126 阅读 · 0 评论 -
《三》CSS3 背景
假如背景区域的宽高不能恰好包含背景图片的话,背景图片会等比例缩小以可以容纳显示在背景区域中,背景某些区域会有空白。假如背景区域的宽高不能恰好包含背景图片的话,背景图片会等比例放大以可以完全覆盖背景区域,一部分就会被裁切掉。background-origin属性指定了背景图像的位置区域。contain属性值就为contain。会保持图像的纵横比并缩放至完全容纳在背景区域中。background-clip属性用来定义背景图像的裁剪区域。length属性值为像素数。cover属性值就为cover。......原创 2020-01-16 09:20:21 · 273 阅读 · 0 评论 -
《二》CSS3边框
为像素数,只能为正值,值越大,边缘越模糊。为像素数,允许负值。正值时阴影延展扩大,负值时阴影会缩小。h-shadow必选。为像素数,允许负值。为像素数,允许负值。h-shadow为正值,v-shadow为负值时,阴影在右上角。h-shadow为负值,v-shadow为正值时,阴影在左下角。h-shadow和v-shadow都为正值时,阴影在右下角。h-shadow和v-shadow都为负值时,阴影在左上角。box-shadow只是盒阴影,即盒子的阴影。从外层阴影改变为内层阴影。...原创 2020-01-16 09:33:13 · 460 阅读 · 0 评论 -
《十》CSS3 盒模型
CSS3的box-sizing属性可以设置一个元素的width和height中是否包含padding和border。这两个div设置的宽度和高度一样,但真实显示的大小不一致,因为div2设置了内边距。,所以真实显示的宽度和高度会比设置的width和height更大。...原创 2020-01-16 09:36:58 · 122 阅读 · 0 评论 -
《九》CSS3多列
CSS3可以将文本内容设计成像报纸一样的多列布局。创建多列:column-count属性指定需要分割的列数。.newspaper{ -moz-column-count:3; /* Firefox */ -webkit-column-count:3; /* Safari and Chrome */ column-count:3;}<div class="newspaper"&g...原创 2020-01-16 10:57:16 · 102 阅读 · 0 评论