![](https://img-blog.csdnimg.cn/20190927151117521.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
CSS3学习笔记
文章平均质量分 87
全面打通 CSS3 知识点和一些实用的css小特效
优雅哥cc
人生苦短 及时行乐
展开
-
还不知道transform 3D转换怎么用?看这个就够了
还不知道transform 3D转换怎么用?看这个就够了原创 2021-03-21 21:11:06 · 8876 阅读 · 5 评论 -
CSS背景颜色之奇技淫巧
1.1 背景颜色background-color1.2 背景图片 background-image1.3 背景平铺 background-repeat1.4 背景图片位置 background-position1.5 背景图像固定 background-attachment1.6 背景色半透明 rgba原创 2021-03-18 17:28:16 · 13632 阅读 · 9 评论 -
超详细 CSS动画-animation
css3 animation@keyframes原创 2021-03-17 17:13:46 · 34023 阅读 · 15 评论 -
CSS3 2D转换 transform
文章目录一、2D转换 transform1.1 2D是什么?二、translate 移动2.1 语法2.2 特点一、2D转换 transform 转换( transform) 是CS3中具有颠覆性的特征之一,可以实现元素的位移、旋转、缩放等效果。转换( transform)你可以简单理解为变形移动:translate旋转:rotate缩放:scale1.1 2D是什么?2D转换是改变标签在二维平面上的位置和形状的一种技术,先来学习二维坐标系。二、translate 移动2D移动原创 2021-03-17 13:34:09 · 8278 阅读 · 1 评论 -
CSS3过渡 transition
文章目录一、animation 过渡1.1 语法1.2 多个属性值一、animation 过渡过渡( transition)是CSS3中具有颠覆性的特征之一,我们可以在不使用 Flash动画或Javascript I的情況下,当元素从一种样式变换为另一种样式时为元素添加效果。过渡动画:从一个状态过渡到另外一个状态可以让我们页面更好看,更动感十足,虽然低版本浏览器不支持(ie9以下版本)但是不会影响页面布局。 现在大多数经常 搭配 :hover 一起使用。 1.1 语法transition:要原创 2021-03-17 08:24:06 · 8880 阅读 · 1 评论 -
element.style 和 window.getComputedStyle的区别
element.style 和 window.getComputedStyle的区别element.stylegetComputedStyle原创 2020-10-13 20:07:43 · 8815 阅读 · 2 评论 -
CSS3学习笔记-05-盒模型详解
文章目录一、盒子模型二、使用margin实现居中效果三、外边距合并与负值3.1 外边距负值3.2 外边距塌陷一、盒子模型二、使用margin实现居中效果注意:在使用margin实现居中的时候 需要对 当前元素设置width属性,不然无效实例:<style> main{ border: 1px solid teal; } h2{ width: 40vw; border: 1px solid red;原创 2020-07-20 22:58:22 · 8248 阅读 · 0 评论 -
CSS3学习笔记-04-详解各种文本修饰
一、字体的使用1.1定义字体 @font-face二、字体样式2.1 字重定义 font-weight2.2 字号 font-size2.3 行高设置 line-height2.3 字体风格 font-style2.4 组合写法 font2.5 大小写转换 font-variant or text-transform2.6 文本线条控制 text-decoration:2.7 文本阴影 text-shadow2.8 空白处理 pre or white-space2.9 文本溢出处理原创 2020-07-03 21:17:29 · 8455 阅读 · 0 评论 -
CSS3学习笔记-03-表单伪类验证
文章目录一、input:disabled 禁用的二、input:enabled 启用的三、input:checked+label 选中的四、input:required 必填项五、input:optional 非必填项六、input:valid 输入值有效的样式七、input:invalid 输入值无效的样式八、总览一、input:disabled 禁用的<style> input:disabled{ background-color: teal; }<原创 2020-06-02 22:32:46 · 8318 阅读 · 0 评论 -
CSS3学习笔记-02-选择器
一、全局选择器二、标签选择器三、结构选择器3.1 后代选择器(华夏子孙 向下无限选择)3.2 > 儿子选择器 只往下选择一层3.3 ~ 兄弟选择器3.4 + 铁兄弟(紧挨着的)四、[] 属性选择器4.1 ^ 以什么开始 $以什么结束4.3 ~ 属性里边有这个值4.4 * 属性里边有这个字符串4.5 | 以什么开始 可以跟-符号 也可以选中五、伪类选择器5.1 常见伪类列表5.2 :target 选择器可用于选取当前活动的目标元素5.3 :empty 隐藏空的元素六、结构伪类选原创 2020-06-02 21:54:18 · 8463 阅读 · 0 评论 -
CSS3学习笔记-01-引入方式与权重(优先级)
文章目录一、link方式引用二、导入样式三、CSS优先级一、link方式引用这种标准方式rel='stylesheet' 表示这是一个样式表文件’tpye='text/css' 文档类型,不加默认也可以解析’<link rel="stylesheet" href="style.css" type="text/css">另外还有基本的嵌入式样式与行内样式,这里不做介绍。二、导入样式导入样式我们可以在外部样式表里边导入另外的样式表文件。也可以在嵌入式样式也就是<head&原创 2020-06-01 20:40:20 · 8144 阅读 · 0 评论 -
详解CSS position 属性
文章目录一、什么是position?二、static 静态定位(默认)三、absolute 绝对定位3.1 absulote 嵌套用法 同一个父元素3.2 absulote 嵌套用法四、relative 相对定位4.1 relative里边的absolute五、fixed 固定定位5.1 会固定到荧幕中的固定位置,即使滚动页面,也不会发生变化5.2 fixed与其他定位的嵌套使用六、sticky...原创 2020-04-23 23:15:56 · 7421 阅读 · 1 评论