![](https://img-blog.csdnimg.cn/20201014180756918.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS
CSDN_Alex_
这个作者很懒,什么都没留下…
展开
-
CSS3 Animation perperty && 3D || CSS3 动画属性 && 3D
CSS3 动画属性animation-name 定义要使用哪个动画 animation-timing-function 动画定时功能指定动画的速度曲线ease 指定一个慢启动的动画,然后加快,最后减慢结束(默认值)linear 从开始到结束指定一个具有相同速度的动画ease-in 指定一个慢启动的动画ease-out 指定一个缓慢结束的动画ease-in-out 指定一个缓慢的开始和结束的动画cubic-bezier(n, n, n, n) 让你在该函数中自定义值animation原创 2020-12-14 17:42:13 · 1004 阅读 · 0 评论 -
CSS3 transitions and transformations (二) || CSS3 过渡与转换(二)
CSS3scale()函数和多重转换1代表原始尺寸,2代表原始尺寸的两倍,以此类推animation-name:(动画名字)animation-duration:2s(动画时间)div{ width:100px; height:100px; background-color:red; animation-name:hei; animation-duration:2s;}@keyframes hei{ 0%{background-color:blue;} 50%{backgro原创 2020-12-13 14:02:54 · 115 阅读 · 0 评论 -
CSS3 transitions and transformations (一) || CSS3 过渡与转换(一)
CSS3 转换(transition)允许我们在限定的时间内从一个属性值转换到另一个属性值。transition-property 指定要转换的属性。transition-duration 指定转换发生的持续时间。transition-timing-function 指定转换的速度在其持续时间内如何变化。transition-delay 指定过渡效果的延迟,以秒为单位。 处理兼容.one{ width: 100px; height: 100px;原创 2020-12-12 20:21:41 · 120 阅读 · 0 评论 -
CSS3 Background || CSS3 背景
background-size 属性该属性在 CSS3 中让我们能够使用长度或百分比来指定背景图像的大小。contain 该值会规定自动缩放图像比例以适应容器。cover 该值也会自动将图片缩放以适应容器,但是当长宽比不同时,图像将被裁剪。background-clip 属性该属性指定了背景的绘图区域。其值如下:border-box 默认值,该值规定背景被绘制到边框的外边缘padding-box 该值规定背景被绘制到填充的外边缘content-box 该值规定背景被绘制在内容框中原创 2020-12-11 17:39:37 · 105 阅读 · 0 评论 -
CSS Radial Gradient || CSS3 径向渐变
Radial Gradient 径向渐变创建一个径向渐变,必须至少定义两种颜色节点(呈现的平稳过渡的颜色)。另外,你也可以指定渐变的中心、形状、大小。默认情况下,渐变中心为 center ,形状为 ellipse ,大小为 farthest-corner//语法:background: radial-gradient(shape(形状) size(尺寸) at position(位置), start-color(起始色), ...(过渡色), end-color(结束色));<style&原创 2020-12-10 16:38:48 · 94 阅读 · 0 评论 -
CSS3 Linear Gradient || CSS3 线性渐变
CSS3 渐变可以在两个或多个指定的颜色之间平稳呈现过渡。Linear Gradient 线性渐变//语法:background: linear-gradient(direction, color-stop1, color-stop2, ...);创建一个线性渐变,必须至少定义两种颜色节点(呈现的平稳过渡的颜色)。另外,你也可以设置一个起点和一个方向(或角度)。通过设置 bottom,top,right,bottom right,0deg,90deg 等值,可以改变颜色渐变的方向(或角度)。&原创 2020-12-09 14:31:44 · 121 阅读 · 1 评论 -
CSS3 Base || CCSS3 基础
CSS3 基础border-radius 边框圆角 参数: 左上角、右上角、右下角、左下角border-image 边框图片box-shadow 边框阴影 参数:h-shadow、v-shadow 、blur 、spread 、color 、insetrgba() 在 rgb() 的基础上加入了 Alpha 通道,通过设置 Alpha 可以实现透明的效果使用 background-image 添加多背景@font-face 规则:通过在 CSS3 中的该规则中定义字体系列,可以将字体文件存放到原创 2020-12-08 17:22:10 · 198 阅读 · 0 评论 -
Font Properties And Background Properties || 字体和背景属性
字体属性 font propertyfont 简写属性,能够在该属性中声明所有的字体属性。如字体样式、字体粗细、字体大小等。font-size 定义元素中的字体大小。font-family 定义元素中的字体系列。font-style 定义元素中的字体样式。font-weight 定义元素中的字体粗细。font-variant 设置小型的大写字母字体显示文本。背景属性 backgroundbackground 简写属性,能够在该属性中声明所有的背景属性。如背景颜色、背景图片等。原创 2020-12-05 10:43:26 · 288 阅读 · 0 评论 -
Float and its associated properties || 浮动及其相关属性
float 浮动的相关属性display 属性该属性规定了元素应该生成的框的类型。常用属性:默认值:inline,此时元素被显示为行内元素block 此时元素被显示为块级元素inline-block 此时元素被显示为行内块元素none 此时元素不会被显示float 属性该属性定义了元素往哪个方向浮动。不论浮动元素是什么类型的元素,都会生成一个块级框,变成行内块级元素常用属性:none 无浮动left 左浮动right 右浮动inherit 从父元素继承浮动visib原创 2020-12-04 21:15:43 · 117 阅读 · 0 评论 -
CSS Box Model || CSS 盒子模型
边框border 可同时定义宽度、样式、颜色。可通过在属性名中添加如 -left/right/top/bottom 指定单一方向添加样式。border-color 定义边框颜色。border-style 定义边框样式,如:solid(实线)、dashed(虚线)等等。border-width 定义边框宽度padding 设置四周的内补白(内边距)延伸属性:padding-top 设置顶部的内部边距。padding-left 设置左边的内部边距。padding-right..原创 2020-12-03 15:50:12 · 114 阅读 · 0 评论 -
CSS Text Style || CSS文本样式
文本属性属性名用途&值text-indent定义文本中首行的缩进。text-overflow定义文本的溢出部分是否使用省略标记。overflow规定当内容溢出元素框时发生的事情。text-align规定文本位置。left 左对齐。center 居中对齐。right 右对齐。text-transform控制文本中的大小写text-decoration定义添加到文本中的修饰效果。none 无。underline 下划线。line-throu原创 2020-12-02 15:44:26 · 817 阅读 · 0 评论 -
Selectors in CSS3(bottom) || CSS3 中的选择器(下)
CSS3 中的选择器(下)结构性伪类选择器 || Structured pseudo-class selector:first-letter 设置指定元素内的第一个字符的样式。:first-line 设置指定元素内的第一行的样式。:before 在指定元素前插入的内容。:after 在指定元素后插入的内容。:first-of-type 匹配同类型中的第一个同级兄弟元素。:last-of-type 匹配同类型中的最后一个同级兄弟元素。:only-of-type 匹配同类型中的唯一的同级兄弟元原创 2020-12-01 12:20:49 · 139 阅读 · 0 评论 -
Selector In CSS3(above) || CSS3 中的选择器(上)
CSS3 中的选择器(上)关系选择器 Relational selectordiv>p 选择所有作为 div 元素的子元素 p。div+p 选择紧贴在 div 元素之后的p 元素。div~p 选择 div元素之后的所有兄弟元素 p。属性选择器 Property selector[attribute]选择具有 attribute 属性的元素。[attribute=value]选择具有 attribute 属性且属性值等于 value的元素。[attribute~=value]选择具有原创 2020-12-01 12:15:54 · 107 阅读 · 0 评论 -
CSS2 selector
CSS2 selectorHTML selector (tag selector):Use the HTML tag as a selector, the HTML selector p{...} h1{...}class selector:Class selectors can be used repeatedly and precisely in HTML documents by specifying the class attribute for the target tag.&原创 2020-11-28 21:17:40 · 134 阅读 · 1 评论 -
CSS Basic Syntax and usage
Naming rules:use letters, numbers, slashes, or minus signs. Don’t start with numbers.CSS Syntax:/* Selectors{ attribute:value; attribute:value; attribute:value; } */Comment methods in CSS: /*...*/Inline style (inline style):原创 2020-11-27 19:46:14 · 97 阅读 · 1 评论 -
Random roll call
code part<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>实战任务-随机点名</title> <style> #name{ width: 150px; height: 80px; border: 1px solid原创 2020-11-24 21:59:44 · 234 阅读 · 0 评论 -
HMTL+CSS+JavaScript "网页换肤效果"原理展示
要求:点击按钮,网页“皮肤1”变成“皮肤2”实质:点击按钮 替换网页样式HTML代码:CSS代码:皮肤1:皮肤2:JavaScript代码:效果:皮肤1:点击按钮后,样式转换换肤功能原理展示实现更复杂的功能可以在此功能上完善作者微信Siri0768欢迎交流...原创 2019-12-14 22:39:19 · 411 阅读 · 0 评论 -
HTML+CSS+JavaScirpt 鼠标移入修改样式 鼠标移出还原样式
实现功能:鼠标移入修改样式 鼠标移出还原样式例子:原本样式:width:100px;height:100px;background:100px;![在这里插入图片描述](https://img-blog.csdnimg.cn/20191214213133756.png鼠标移入:宽从100变成200;高从100变成200;颜色从红变蓝;(修改样式)鼠标移出:宽从200变成100;高从200...原创 2019-12-14 21:35:53 · 861 阅读 · 0 评论 -
HTML+CSS+JavaScirpt “创建了一个div,给其设置padding后, 此div内的hr标签无法抵达div左右边框线”的解决方法
“创建了一个div,给其设置padding后, 此div内的hr标签无法抵达div左右边框线”的解决方法问题:创建了一个div,在设置padding(内填充)后, 此div内的hr水平方向无法抵达div左右边框线效果:代码:HMTLCSS解决方法:设置一个最外层div,此div不设置padding或设置padding为0;给其内容进行分块(给每个需要用hr水平线分割的内容分...原创 2019-12-11 19:20:33 · 386 阅读 · 0 评论