css3学习
文章平均质量分 68
学习CSS3新特性
远近2021
这个作者很懒,什么都没留下…
展开
-
25 常用技巧
文章目录1、CSS实现垂直⽔平居中水平居中垂直居中2、布局1、CSS实现垂直⽔平居中水平居中内联元素 text-align:center块级元素 margin的 left和right设置auto ,故margin:0 auto利⽤flex布局的justify-content: center在主轴上⽔平居中垂直居中将height和line-height设为相同值使元素垂直居中利⽤vertical-align:middle实现⼦元素的垂直居中利⽤flex布局的flex-direction原创 2021-10-07 23:14:49 · 94 阅读 · 0 评论 -
24 项目实战
原创 2021-10-07 23:07:18 · 124 阅读 · 0 评论 -
23 flex布局项⽬六大属性
文章目录9、flexflex-growflex-shrinkflex-basis三个属性的组合——flex10、align-self9、flexflex 属性实际上是三个属性的简写形式:flex: flex-grow || flex-shrink || flex-basis;所以在介绍 flex 之前,我们先来介绍这三个属性各自的特性。flex-grow当容器比子元素大很多,子元素的宽高又设置的很小,这个时候即使水平垂直居中,整个布局看起来仍然很奇怪:又或者根据实际的需要,子元素需要将容器原创 2021-10-04 22:42:10 · 170 阅读 · 0 评论 -
22 flex布局容器六大属性
文章目录3、flex-direction4、flex-wrap5、flex-flow6、justify-content7、align-items8、align-content3、flex-directionflex-direction 属性指定了主轴线的方向,子元素默认是按照主轴线排列的,所以 flex-direction 也指定了弹性子元素在弹性容器中的排列方式, 有以下四个值:row :(默认)横向从左到右排列。row-reverse :顾名思义,从右向左横向排列,反向。column : 纵原创 2021-10-04 22:40:50 · 1585 阅读 · 0 评论 -
21 CSS3的多列布局
文章目录1、`column-count`2、`column-gap`3、`column-rule-style`4、`column-rule-width`5、`column-rule-color`6、`column-rule`7、`column-width`8、示例1、column-countcolumn-count 指定了需要分割的列数.colCount { -webkit-column-count: 3;/* Chrome, Safari, Opera */ -moz-column-count:原创 2021-10-04 09:59:21 · 75 阅读 · 0 评论 -
20 CSS3 边框和盒阴影
文章目录1、`CSS3`圆⻆属性`border-radius`2、`CSS3`盒阴影属性`box-shadow`3、`CSS3`图⽚边框属性`border-image`1、CSS3圆⻆属性border-radiusCSS3圆⻆属性border-radius: 被⽤于创建圆⻆border-radius属性每个半径四个值的顺序分别是左上⻆,右上⻆,右下⻆,左下⻆可传的值如下length:定义圆形半径或椭圆的半⻓轴,半短轴。负值⽆效。percentage:使⽤百分数定义圆形半径或椭圆的半⻓轴,原创 2021-10-01 10:18:33 · 105 阅读 · 0 评论 -
13多媒体查询
文章目录1、媒体类型2、媒体查询使用方法最大宽度 max-width最小宽度 min-width多个媒体特性使用not 关键词1、媒体类型CSS3 的多媒体查询继承了 CSS2 的多媒体类型的所有思想,取代了查找设备的类型,CSS3 根据设置自适应显示,CSS3 有以下几种多媒体类型:all :用于所有的多媒体类型设备。print :用于打印机。screen :用于电脑屏幕、智能手机、平板等。speech :用于屏幕阅读器。@media 的语法为:@media not|only medi原创 2021-09-30 00:11:20 · 185 阅读 · 0 评论 -
12 CSS3Flex布局
文章目录1、简介2、基本概念3、flex-direction4、flex-wrap5、flex-flow6、justify-content7、align-items8、1、简介Flex 是 Flexible Box(弹性盒子)的缩写,意为“弹性布局”,用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。div { display: flex;}行内元素也可以使用 Flex 布局。span { display: inline-flex;}Webkit 内核的浏原创 2021-09-30 00:10:52 · 101 阅读 · 0 评论 -
11CSS3动画
文章目录1、@keyframes2、其他属性动画是使元素从一种样式逐渐变化为另一种样式的效果。在 CSS3 中 ,我们可以创建动画,取代以往的网页动画图象。1、@keyframes在 CSS3 标准下,我们使用 @keyframes 规则来创建动画。我们无需将动画的每一帧都描绘出来,只需要给出变化的关键帧,然后给出变化时间,其余的等待它自动计算完成就可以了。 @keyframes 里描述了动画的关键帧的相关属性,语法如下:@keyframes 动画名称 { 0% { /*css code原创 2021-09-30 00:10:22 · 115 阅读 · 0 评论 -
10CSS3——2D3D转换
文章目录1、转换属性2、transform-originCSS3 转换可以对元素进行移动、缩放、转动、拉长或拉伸。我们将结合过渡功能对 CSS3 的 2D 、3D 转换进行学习。2D 转换3D 转换1、转换属性转换有下列属性:transform: 将 2D 或 3D 转换应用到元素上去。transform-origin:可以改变被转换元素的位置。transform-style:规定被嵌套元素如何在 3D 空间中显示。perspective:规定 3D 元素的透视效果,与 perspe原创 2021-09-30 00:09:53 · 218 阅读 · 0 评论 -
09CSS3过渡
文章目录transition在 CSS3 中,我们如果想要实现一种样式到另一种样式的转变,无需再使用 Flash 动画或者是 JavaScript ,CSS3 为我们提供了过渡的效果。transition属性 transition 应用于元素的过渡效果,使用时需要指定希望过渡的属性以及过渡持续的时间。transition属性对应了四个值:transition: transition-property | transition-duration | transition-timing-functio原创 2021-09-30 00:09:30 · 81 阅读 · 0 评论 -
08CSS3渐变
文章目录1、线性渐变线性渐变 - 从上到下(默认情况下)线性渐变 - 从左到右线性渐变-对角2、径向渐变径向渐变 - 颜色结点均匀分布(默认情况下)径向渐变 - 颜色结点不均匀分布设置形状在 CSS3 之前,渐变效果需要图像来完成,这增大了下载时间和带宽的使用。 CSS3 的渐变是由浏览器生成的,所以其更具优势。CSS3 定义了两种类型的渐变:线性渐变径向渐变渐变属于 image 类型,所以渐变只能在可以使用 image 的地方使用。1、线性渐变渐变至少是一种颜色朝另一种颜色变化,可以让你在原创 2021-09-30 00:08:58 · 118 阅读 · 0 评论 -
07CSS3文本——overflow-wrap & word-break
文章目录1、overflow-wrap2、word-breakoverflow-wrap 和 word-break 都可以起到对单词的换行作用,前者用来表明是否允许浏览器在单词内进行断句,例如出现了一个很长的 url 或者单词,由于找不到自然段句点空格或标点符号而产生了溢出,这时候就可以使用 overflow-wrap 来解决这个问题;word-break 则是用于表明怎样在单词内进行断句。1、overflow-wrapoverflow-wrap 常用的有两个取值:normal:浏览器保持默认处理原创 2021-09-30 00:08:23 · 9789 阅读 · 0 评论 -
06CSS文本——text-overflow
文本框经常会出现文本溢出的情况,在只有单行文本框,文本又出现溢出的情况,这时候就需要 text-overflow 来处理这些溢出的文本了。text-overflow 有三个取值:clip :修剪文本。ellipsis :显示省略符号来代替被修剪的文本。string :使用给定的字符串来代替被修剪的文本。<head> <meta charset="UTF-8"> <title>Title</title> <style t原创 2021-09-30 00:07:42 · 472 阅读 · 0 评论 -
14 CSS3新增的用户界面属性
文章目录1、resize2、box-sizing3、outline-offset相比 CSS2 ,CSS3 增加了一些新的特性来调整元素尺寸、框尺寸和外边框。resizebox-sizingoutline-offset1、resize属性 resize 允许用户调整元素的尺寸,但是需要将元素的 overflow 属性设置为 auto 、hidden 或 scroll,resize 属性才能生效。resize 有以下四个值:none :用户无法调整元素尺寸。both :用户可以调整元素的原创 2021-09-30 00:13:25 · 226 阅读 · 0 评论 -
05CSS文本——text-shadow
属性 text-shadow 用于给文本添加阴影,语法为:text-shadow: 水平阴影 垂直阴影 模糊阴影 阴影颜色;水平阴影:规定水平阴影的位置(阴影与文本的水平偏移,正值向右偏移,负值向左偏移),必选项垂直阴影:规定垂直阴影的位置(阴影与文本的垂直偏移,正值向下偏移,负值向上偏移),必选项模糊阴影:规定模糊的距离,可选项;值越大,模糊半径越大,阴影也就越大越淡阴影颜色:规定阴影颜色,可选项;如不规定该项的值,则使用UA(用户代理)自行选择的颜色。如果想保持跨浏览器的一致性,阴影的颜原创 2021-09-26 11:31:07 · 192 阅读 · 0 评论 -
04CSS文本——颜色之RGBA
RGB 是一种色彩标准,是由红(R)、绿(G)、蓝(B)的变化以及相互叠加来得到各式各样的颜色。RGBA 是在 RGB 的基础上增加了控制 alpha 透明度的参数。语法:color:rgba(R,G,B,A)取值:R:红色值,正整数 | 百分数。G:绿色值,正整数 | 百分数。B:蓝色值,正整数 | 百分数。A:Alpha 透明度,取值 0~1 之间。以上 R、G、B 三个参数,正整数值的取值范围为:0 - 255。百分数值的取值范围为:0.0% - 100.0%。超出范围的数值将被原创 2021-09-26 11:29:50 · 1145 阅读 · 0 评论 -
03 CSS3边框属性升级
文章目录1、border-radiusCSS3 中,针对边框的样式作了一些升级调整,这里主要讲解三个属性: - border-radius - border-image - box-shadow1、border-radius在 CSS2 中添加边框圆角是一件很困难的事情,我们需要在每个角落使用不同的图像。但是,在 CSS3 中,我们只需要使用属性 border-radius 就可以创建圆角。border-radius: 20px; /*所有的角都使用半径为20px的圆角*/<hea原创 2021-09-26 11:25:54 · 83 阅读 · 0 评论 -
02 CSS3背景属性升级
文章目录1、背景background-sizebackground-originbackground-clip在 CSS 中,对背景图片的定位我们使用了 background-position 来调整,不够直观,并且,图片的大小是根据图片的原像素尺寸大小决定的,这些不便在 CSS3 中都有了改善。1、背景在 CSS3 中,背景的样式作了一些升级调整,让我们可以更好的控制背景元素的样式。这里主要介绍以下几个调整: - background-size - background-origin - ba原创 2021-09-26 11:25:22 · 115 阅读 · 0 评论 -
01CSS3简介
文章目录1、什么是CSS32、CSS3的好处3、浏览器引擎前缀CSS3 是 CSS2 的升级版本,3 只是版本号,它在 CSS2.1 的基础上增加了很多强大的新功能。 目前主流浏览器 chrome、safari、firefox、opera、甚至 360 都已经支持了 CSS3 大部分功能了,IE10 以后也开始全面支持 CSS3 了。1、什么是CSS3CSS3 是CSS(层叠样式表)技术的升级版本,于 1999 年开始制订,2001 年 5 月 23 日 W3C 完成了 CSS3 的工作草案,主要包括原创 2021-09-26 11:23:24 · 122 阅读 · 0 评论 -
19 CSS3选择器——伪类选择器二
文章目录1、`::selection`2、`el:out-of-range`3、`el:in-range`4、`el:read-write`5、`el:read-only`6、`el:optional`7、`el:required`8、`el:valid`9、`el:invalid`1、::selection::selection匹配被⽤户选中或处于⾼亮状态的元素该选择器只可以应⽤于少数的css属性:color,background,cursor和outline<h1>html5<原创 2021-09-26 11:22:23 · 314 阅读 · 0 评论 -
17CSS3选择器——伪类选择器一
文章目录1、E:root2、E:nth-child(n)3、E:nth-last-child(n)4、E:nth-of-type(n)5、E:nth-last-of-type(n)6、E:last-child7、E:first-of-type8、E:last-of-type9、E:only-child10、E:only-of-type11、E:empty12、E:target13、E:not(s)14、E:enabled & E:disabled15、E:checked1、E:root该选择器选原创 2021-09-26 10:53:32 · 791 阅读 · 0 评论 -
18 CSS3选择器——子元素选择器
文章目录1、`el:first-of-type`2、`el:last-of-type`3、`el:only-of-type`4、`el:only-child`5、`el:nth-child(n)`6、`el:nth-last-child(n)`7、`el:nth-last-of-type(n)`8、`el:last-child`1、el:first-of-typeel:first-of-type匹配的el元素是其⽗元素的第⼀个⼦元素p:first-of-type { color: aqua;}原创 2021-09-26 10:17:24 · 1055 阅读 · 0 评论 -
15CSS3选择器——常用选择器
CSS 的常用选择器包括了通配符选择器、元素选择器、类选择器等。CSS3 中新增了一个常用选择器:通用兄弟元素选择器(E~F)E 和 F 属于同一父元素之内,并且 F 在 E 之后,通用兄弟选择器会选择符合这样排列的所有的 F 元素。<head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> .test ~ p原创 2021-09-26 08:54:00 · 82 阅读 · 0 评论 -
16CSS3选择器——属性选择器
文章目录1、E[attr^="value"]2、E[attr$="value"]3、E[attr*="value"]1、E[attr^=“value”]选择属性名为 attr ,属性值以 value 开头的元素。<head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> a[title^='test'] {原创 2021-09-26 09:01:46 · 149 阅读 · 0 评论