![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS3
蓬莱老仙
这个作者很懒,什么都没留下…
展开
-
CSS3-字体图标的使用
字体图标具有轻量、灵活、兼容性强的特点;比图片有较好的可编辑性,占用空间小、可复用性强,从而被广泛使用。下面详细介绍一下字体图标的下载:首先要到一些字体图标库网站去下载需要的字体图标,一般 阿里巴巴矢量图标库 中都能找到自己需要的图标进入网站后进行登录,没有账号注册后再登录即可登录完成后在搜索栏中搜索自己需要的图标或直接在图标库 中查找找到需要的图标后将其加入购物车...原创 2020-03-12 11:21:50 · 754 阅读 · 1 评论 -
CSS3-flex伸缩布局
概述CSS3 中在布局方面做了非常大的改进,新增了伸缩布局通过该布局方式开发人员对块级元素的布局排列会变得十分灵活,其强大的伸缩性,在响应式开中发挥极大的作用。将指定元素的 CSS 样式中的 display 属性设置为 flex,这个元素就是一个伸缩布局的容器,其内部的子元素会从左到右水平排列(效果很像浮动)。简单例子:.box { width: 800px; /* 设置父级盒子为...原创 2020-03-09 21:51:03 · 381 阅读 · 0 评论 -
CSS3-@keyframes动画
在 CSS3 中可以通过 @keyframes 来创建动画,由当前样式逐渐变为新样式的动画效果。创建动画的语法就像创建 JS 函数函数一样,动画需要指定动画的名称,使用时需要通过名称来调用。创建语法一:@keyframes 动画名称 { /* 从 from 指定的样式 */ from { css样式 } /* 过渡到 to 指定的样式 */ to { css样式 }}创...原创 2020-03-08 19:29:53 · 448 阅读 · 0 评论 -
CSS3-3D转换效果
CSS3 中是通过 transform-style 样式属性来实现 3D 立体效果的,为父元素设置了该属性其子元素就会具有 3D 效果,对应的属性值如下:flat 所有子元素在2D平面呈现preserve-3d 所有子元素在3D空间中呈现举个例子:CSS:.box { width: 300px; height: 300px; margin: 20px auto; /*...原创 2020-02-02 20:22:25 · 271 阅读 · 0 评论 -
CSS3-透视效果
CSS3 中的 perspective 属性用于设置元素距视图的距离,单位为像素(px); 设置了 perspective 属性的子元素可以实现透视效果(就是由远及近的效果),设置该属性的元素本身没有。透视只是视觉上呈现出有近大远小的效果, 实际上还是在一个平面中;透视并不是真正的 3D 盒子, 无法构成真正 3D 空间。示例:CSS:.box { width: 400px; he...原创 2020-02-02 14:45:22 · 5423 阅读 · 0 评论 -
CSS3-transform 2D转换
transform 转换,是CSS3最具颠覆性的特性之一,既可以应用2D转换,也可以应用3D转换。2D转换:通过该属性可以对元素在平面上进行缩放、旋转、移动和斜切等操作。通过 transform 中的方法对元素进行缩放,移动等不同于传统方法(设置 width、height等)会影响页面的布局,transform 中的方法并不会影响页面的布局。缩放通过 scale() 方法将元素根据中心原点...原创 2020-01-31 17:52:40 · 279 阅读 · 0 评论 -
CSS3-过渡动画
CSS3 中的 transition 属性用于实现元素从一种样式变换为另一种样式时为元素添加过渡效果。transition 属性是一个综合属性,可以简写也可以单独设置某个单一的属性。综合设置语法:transition: property duration timing-function delay;property 需要过渡的样式属性(必要);值为 ...原创 2020-01-30 16:31:03 · 275 阅读 · 0 评论 -
CSS3-径向渐变
径向渐变就是从一个中心点开始向四周产生渐变的效果;CSS3 中提供了实现径向渐变的 radial-gradent() 函数;使用该函数时,至少需要两个终止色。语法:background-image: radial-gradient(shape size at position, start-color, ..., last-color);shape 用于设置径向渐变的的形状;未指定渐变形...原创 2020-01-29 16:37:01 · 526 阅读 · 0 评论 -
CSS3-背景原点、背景裁剪
background-origin 用于设置背景图像相对于什么位置来定位(背景图的起点)。语法:background-origin: padding-box|border-box|content-box;属性值作用border-box背景相对于元素边框来定位; 从 border 区域(含border)开始显示背景图像padding-box背景相对于内边距来定位...原创 2020-01-26 16:42:55 · 395 阅读 · 0 评论 -
CSS3-文本阴影
文本阴影是通过 text-show 样式属性来设置;通过该属性可以向文本添加一个或多个阴影。语法:text-shadow: h-shadow v-shadow blur color;h-shadow 水平阴影的位置(可以是负值,正值向右偏移)v-shadow 垂直阴影的位置(可以是负值,正值向下偏移)blur 阴影模糊距离clor 阴影的颜色示例:CSS:h1 { te...原创 2020-01-26 14:35:16 · 1728 阅读 · 0 评论 -
CSS3-线性渐变
CSS 通过 linear-grandient() 函数来创建一个表示两种或多种颜色的线性渐变的“图像”;其结果属于 <gradient> 数据类型,是一种特别的 <image>数据类型。语法:background-image: linear-gradient(direction, color-stop1, color-stop2, ...);direction...原创 2020-01-26 11:11:35 · 395 阅读 · 0 评论 -
CSS3-:empty、:not()选择器的用法
`:empty` 用于选择指定的没有子元素(包括文本节点)的元素。`:not(selector)` 选择每个元素不是指定的元素或选择器部分;就是取非。原创 2020-01-25 00:14:44 · 1192 阅读 · 0 评论 -
CSS3-属性选择器
属性选择器通过标签中存在的属性来选择特定的 HTML 元素语法:element[Attribute_Name]element HTML 元素Attribute_Name 属性名分类描述示例E[att]选择属性为 att 的 E 元素input[name]E[att = “val”]选择 att 的属性值为 val 的 E 元素input[auto...原创 2020-01-24 18:41:44 · 147 阅读 · 0 评论 -
CSS3-nth-child() 选择器的使用
:nth-child(n) 选择属于其父元素的第 n 个子元素相对于父级做参考,选择所有子元素中匹配元素的奇数子元素;被选中的元素符合匹配条件且为奇数个的元素.dl_box dd:nth-child(odd){ color: skyblue;}相对于父级做参考,选择 所有子元素中匹配元素的偶数子元素.dl_box dd:nth-child(even){ color: red;}...原创 2019-09-29 16:05:36 · 798 阅读 · 1 评论 -
CSS3-::section选择器、::placeholder选择器的用法说明
::section 选择器::selection 选择器用于设置匹配元素中被用户选中或处于高亮状态的部分;::selection 只能设置少数的CSS属性:color、 background、cursor、和 outlinep { width: 300px; border: 1px solid gray;}p::selection { color: red; background...原创 2019-09-30 10:49:40 · 1175 阅读 · 0 评论 -
CSS-背景色 background 半透明
想要实现背景色的半透明效果可以是将 background 的属性值设置为 rgba()语法:background: rgba(0, 0, 0, 0.5);前三个值(红绿蓝)的范围为0到255之间的整数或者0%到100%之间的百分数;这些值描述了红绿蓝三原色在预期色彩中的量最后一个参数是 alpha 透明度 取值范围 0~1之间,0.5为半透明rgba(255,255,255,0)则表...原创 2019-10-01 15:25:29 · 9726 阅读 · 0 评论 -
CSS3 transform、translate 2D 转换的使用
transform 属性用于设置元素的 2D 或 3D 转换;通过这个属性可以对元素进行旋转,缩放,移动,倾斜等操作2D 转换中的移动是 2D 转换中的一种功能,可用来改变元素在页面中的位置,与定位很类似属性值描述none不进行转换translate(x, y)设置为 2D 转换translateX(x)只设置 x 轴的转换translateY(y)...原创 2019-10-02 11:21:56 · 871 阅读 · 0 评论 -
CSS3-border-radius 边框样式属性
CSS3 中的 border-radius 属性用来设置变工况的样式,可以将直角边框改为圆角边框,甚至可以将一个矩形设置成一个圆形,该属性与其他样式属性结合使用可以做出许多有趣的图案border-radius 属性主要是修改块级元素的四个角的弧度来改变元素的形状,该属性是一个综合属性,四个角的样式可以单独设置也可以综合设置;其属性值可以是 像素(px)、百分比(%)、em 等border-ra...原创 2019-10-04 00:16:23 · 3089 阅读 · 0 评论 -
CSS3-盒子阴影
CSS3 新增了 box-shadow 样式属性用来给元素设置一个或多个下拉阴影的框;该属性可以设置多个属性值语法:box-shadow: h-shadow v-shadow blur spread color inset;属性值说明:属性值说明h-shadow必需的值,用于设置水平阴影的位置,可以为负值(阴影方向原来方向相反)v-shadow必需的值,用于...原创 2019-10-04 13:22:32 · 229 阅读 · 0 评论 -
CSS3-选择器,子代选择器 ">"、顺序选择器、下一个兄弟选择器、后面所有的兄弟选择器 的用法
一些 CSS3 选择器子代选择器 “>”只选择某个元素的子元素,div>p{ color:red;}div 标签的儿子 p 标签。和 div 标签的后代 p 标签的截然不同。能够选择:<div> <p>我是div的儿子</p></div>不能选择:<div> <ul> ...原创 2019-09-29 11:35:35 · 11872 阅读 · 0 评论