首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

前端基础:CSS

CSS,有两种类型字体系列名称: 通用字体系列 - 拥有相似外观字体系统组合, Serif 或 Monospace。...: p.thick {font-weight:bold;} /* bold 关键字可以将文本设置为粗体 */ font-size 属性设置文本大小。...列表属性 作用如下: 设置不同列表项标记为有序列表 设置不同列表项标记为无序列表 设置列表项标记为图像 有两种类型列表: 无序列表 - 列表项标记用特殊图形(小黑点、小方框等) 有序列表 - 列表项标记有数字或字母...浮动元素之前元素将不会受到影响。 边框 CSS 边框属性允许指定一个元素边框样式和颜色。 轮廓属性 轮廓(outline)是绘制于元素周围一条线,位于边框边缘外围,可起到突出元素作用。...轮廓和边框区别:边框 (border) 可以是围绕元素内容和内边距一条或多条线;轮廓(outline)是绘制于元素周围一条线,位于边框边缘外围,可起到突出元素作用。

2.4K20

Canvas 入门劝朋友放弃(图解版)

画条直线 在 HTML 创建 canvas 元素 通过 js 获取 canvas 标签 canvas 标签获取到绘图工具 通过绘图工具,在 canvas 标签上绘制图形 <!...文本 Canvas 提供了一些操作文本方法。 为了方便演示,我们先了解一下在 Canvas 如何给本文设置样式。...) 复制代码 text: 字符串,要绘制内容 x: 横坐标,文本左边要对齐坐标(默认左对齐) y: 纵坐标,文本底边要对齐坐标 maxWidth: 可选参数,表示文本渲染最大宽度(px),如果文本超出...文本基线是普通字母基线。 top: 文本基线是 em 方框顶端。 bottom: 文本基线是 em 方框底端。 middle: 文本基线是 em 方框正中。...本例使用了 css 方式,把图片 display 设置成 none 。因为我不想被 影响本例讲解。 实际开发过程按照实际情况设置即可。

1.8K20
您找到你想要的搜索结果了吗?
是的
没有找到

【FFmpeg】Filter 过滤器 ③ ( 文字水印 - drawtext 过滤器 | drawtext 过滤器支持库编译配置 | drawtext 过滤器常用参数 )

, 并可以 自定义文字字体 / 大小 / 颜色 / 位置 等属性 ; 动态时间戳显示 : drawtext 过滤器 可以 使用 时间戳 显示 动态变化 时间信息 , : 在视频上显示...视频开始 当前时间 经过时间 ; 多语言支持 : 使用 drawtext 过滤器 可以 在视频添加 包括 中文 多种语言文本 ; drawtext 过滤器 文档 : https:...背景盒子 ; 显示 文字水印 时 , 可以显示一个背景盒子 , 这个盒子类似于 CSS 盒子 , 可以设置边框 , 背景颜色 , 边框可以分别设置 四个方向 边框属性 , 宽度和颜色 ; box...参数可设置三个值 : 1 : 绘制方框 ; 0 : 不绘制方框 ; borderw : 绘制带有指定边框宽度方框 ; 配置示例 : ffmpeg -i input.mp4 -vf "drawtext...透明度值 范围是 0 1 之间浮点数 , 0 表示完全透明 1 表示完全不透明 命令行示例 : 下面的命令设置了 0.5 透明度 ; ffmpeg -i input.mp4 -vf "drawtext

34610

《精通CSS》第3章 可见格式化模型

这样计算方式也符合现实包装箱模型。对于包装箱,箱子四壁就是边框,视觉上决定了箱子大小;内边距就是箱子内部填充层,用于保护装在箱子内物品。...,这就导致中间是两头两倍,很不美观。...我们可以通过top、right、bottom、left设置四个方向偏移值,top: 20px;向下偏移 20px,不过文档流占据位置不变。...至于为什么会遮挡其他元素,这涉及层叠相关知识,推荐大家阅读笔者之前写一篇文章CSS “层”峦“叠”翠[4]。...左右分栏-float实现 代码可以看出,我们要分别给左右浮动块指定宽度,并且要通过伪元素来清除浮动,从而保证不发生元素塌陷。

1.3K20

一篇文章带你了解CSS基础知识和基本用法

一、Css用法 1.如何使用Css 要想使用Css来增加Html美观,有三种方式: 1).头部文件定义 标签Css属性 2).导入Css文件 #创建一个...,因为我们要想精确修改Html某个元素属性,就必须使用选择器,它可以通过选择器定位某个元素上然后修改元素样式。... 也可以使用元素加选择器更加精确定位该元素 Css应用 ...元素无法容纳文本会溢出 unrestricted 在任意两个字符间换行。 suppress 压缩元素换行。浏览器只在行没有其它有效换行点时进行换行。...在宽度和高度之外绘制元素内边距和边框。 border-box 为元素指定任何内边距和边框都将在已设定宽度和高度内进行绘制

11.1K20

用Pandas在Python可视化机器学习数据

为了机器学习算法获取最佳结果,你就必须要了解你数据。 使用数据可视化可以更快帮助你对数据有更深入了解。...在这篇文章,您将会发现如何在Python中使用Pandas来可视化您机器学习数据。 让我们开始吧。...这些数据可以UCI机器学习库免费获得,并且下载后可以为每一个样本直接使用。 单变量图 在本节,我们可以独立看待每一个特征。 直方图 想要快速得到每个特征分布情况,那就去绘制直方图。...箱线图中和了每个特征分布,在中值(中间值)画了一条线,并且在第25%和75%之间(中间50%数据)绘制方框。...这很有用,因为我们可以使用相同数据在同一幅图中看到两个不同视图。我们还可以看到每个变量在从左上到右下对角线上完全正相关(您所期望那样)。

6.1K50

csscursor属性 鼠标指针样式

是自定义鼠标的样式,图像地址,后面的参数是 css 标准 cursor 样式,(IE下面可以不需要) 注意:请在此列表末端始终定义一种普通光标, auto ,以防 URL 定义光标不可用时无法正常显示光标...all-scroll 有上下左右四个箭头,中间有一个圆点光标。用于标示页面可以向上下左右任何方向滚动。 col-resize 有左右两个箭头,中间由竖线分隔开光标。...se-resize 此光标指示矩形框边缘可被向下及向右移动(南/东)。 sw-resize 此光标指示矩形框边缘可被向下及向左移动(南/西)。...我是 cursor: progress 带有沙漏标记箭头光标。用于标示一个进程正在后台运行。 我是 cursor: all-scroll 有上下左右四个箭头,中间有一个圆点光标。...用于标示页面可以向上下左右任何方向滚动。 我是 cursor: col-resize 有左右两个箭头,中间由竖线分隔开光标。用于标示项目或标题栏可以被水平改变尺寸。

3.1K00

前端入门4-CSS属性样式表声明正文-CSS属性样式表

第二个长度值是垂直偏移量(vertical offset)——即阴影从原始盒子向下偏移距离(或向上,如果值为负)。 第三个长度值是模糊半径(blur radius)——在阴影应用模糊度。...CSS 控制元素排版布局时(float, position, flex)默认就是按照标准文档流布局方式进行排版布局绘制元素。...而这个标准文档流布局方式就是按照解析 HTML 文档元素顺序,页面顶部开始,从上到下,从左到右,解析一个元素就绘制一个元素,解析时碰到是行内元素,就忽略宽高,允许并排布局绘制,碰到是块级元素,...属性时,会将这个元素以当前绘制位置抽离层面上进行布局。...absolute 另外,有点需要注意下,绝对定位元素,因为其已经文档流抽离,因此就不存在什么行内元素、块级元素限制了。大小就是根据设置宽高、位置就是根据参考点进行调整后进行布局绘制

1.6K30

Canvas入门高级详解(上)

x 向右增大, y 向下增大 ? image 2.3.2 设置绘制起点(moveTo) * 语法:ctx.moveTo(x, y); * 解释:设置上下文绘制路径起点。...** 2.3.3 绘制直线(lineTo) * 语法:ctx.lineTo(x, y); * 解释:x,y位置绘制一条直线起点或者上一个线头点。 * 参数:x,y 线头点坐标。...(有印象就行了) font 设置或返回文本内容的当前字体属性 font 属性使用语法与 CSS font 属性相同。...对齐图片 textBaseline 设置或返回在绘制文本时使用的当前文本基线 alphabetic : 默认。文本基线是普通字母基线。 top : 文本基线是 em 方框顶端。。...hanging : 文本基线是悬挂基线。 middle : 文本基线是 em 方框正中。 ideographic: 文本基线是 em 基线。 bottom : 文本基线是 em 方框底端。

1.7K31

FPS游戏:实现GDI方框透视「建议收藏」

2.回到游戏,打开狙击枪一倍狙击镜,在CE搜索【变动数值】,接着打开二倍狙击镜,继续搜索【变动数值】,最后关闭狙击镜搜索【变动数值】,该过程要重复10次左右。...找自己鼠标角度: 通常FPS游戏鼠标的准心Y坐标向上抬会减少,鼠标准心向下会增加,不断遍历(浮点数)就可以搜索鼠标的准心Y坐标,得到了鼠标的Y坐标之后然后+4就能得到鼠标的X坐标参数。...等于 10 说明10就是敌人与敌人之间偏移地址,不同敌人与敌人之间相隔就是10,最后我们直接使用易语言获取到所有敌人坐标数据: 绘制屏幕方框与屏幕写字: 绘制外部方框就是调用了GDI绘图函数让其在指定窗口句柄上绘图...分别调用绘制方框绘制文字,测试效果如下: 方框透视算法分析 在前面的教程我们已经手动找到了【FOV视场角】【本人坐标数据】【本人鼠标角度】【敌人坐标数据】【玩家数量】【玩家是否死亡】【敌人之间数组偏移...】这些基址数据,多数情况下类FPS游戏找坐标手法都大同小异,接下来我们将具体分析计算方框思路,以及实现这些方框绘制算法。

4.7K32

CSS 换行_css不允许换行

css规范属性,需要组合上面两个属性使用 text-overflow: ellipsis; //可选属性,可以用来多行文本情况下,用省略号“…”隐藏超出范围文本。...*/ 4、最近遇到一个需求,v-html渲染文本时候要求,单行里面有数字时候文字左右对齐,间距自动拉伸 white-space: pre-line; text-align:justify; letter-spacing...middle(居中对齐) 定义文本垂直对齐方式 text-decoration: none 标准文本 underline 文本一条线 overline 文本一条线。...right 把文本排列到右边。center 把文本排列到中间。justify 实现两端对齐文本效果。...发现本站有涉嫌侵权/违法违规内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

3.5K40

CSS快速入门(三)

在下面的例子,我使用了上面例子大图,并使用长度单位来调整方框大小。你可以看到这扭曲了图像。 试试下面: 改变用于修改背景大小长度单位。... ---- 盒模型 在 CSS ,所有的元素都被一个个“盒子(box)”包围着,理解这些“盒子”基本原理,是我们使用CSS实现准确布局、处理元素排列关键; 块级盒子(Block...也具备行内标标签文本多大就占多大特性 */ } 盒子模型 完整 CSS 盒模型应用于块级盒子,内联盒子只使用盒模型定义部分内容。...(文本内容边框距离) 4.物品本身大小 文本大小 ---- body标签默认自带8px外边距,可以去掉; body { margin: 0;...:20px 10px 20px; /*上 左右 下*/ margin:10px 2px 3px 5px; /*上 右 下 左*/ 内边距:文本内容边框距离 padding简写 padding

1.3K20

HTML5 与CSS3 相关笔记

(3)按钮:button普通(要和事件onclick关联使用),submit(提交表单action指定url并传递表单数据),reset重置。...缩写时 font-size 与 line-height中间要加”/“斜扛 “12px/1.5em“ 32.Text-transform:控制文本大小写: none 默认,定义既有小写字母也有大写字母标准文本...writing-mode: tb-lr; 右向左 writing-mode: tb-rl 33.排版网页文本 (1)color文本颜色: RGB:color:#FF0000; 另一种方法rgb...(X水平Y垂直方向偏移量,如果只有一个方向关键字,则默认另一个关键字为center) (4.1).Xpos Ypos: 0px 0px:默认无偏移,左上角出现; 30px 40px:正向偏移,图像向右和向下出现...过渡延迟时间 主要包括四个属性值: (1)transition-property: 过渡属性,设置过渡或动态模拟CSS属性 (2)transition-duration: 过渡用时,旧属性新属性用时

5.4K30

为什么都2022年了还有人用Java写GUI?

Java提供了Graphics2D类,用于在Java应用程序呈现二维(2D)文本、形状和图像。这个类是java.awt包一部分。此外,“形状”界面用于定义表示几何图形对象。...以下部分描述了程序员如何使用Java绘制常见几何图形。 如何在Java一条线 您可以使用drawLine(int x1,int y1,int x2,int y2)方法创建一条简单直线。...这将从坐标(x1,y1)(x2,y2)绘制一条线。...如何在Java绘制矩形 要在Java应用程序绘制矩形,需要使用drawRect(int x,int y,int width,int height)方法。...例如: drawArc(45, 75, 150, 150, 0, 360) 如何在Java绘制椭圆 drawOval(int x,int y,int width,int height)方法允许您绘制绑定在给定宽度和高度矩形椭圆

1.9K30

「学习笔记」CSS基础

CSS最大贡献:让HTML样式脱离,实现了HTML专注去做结构呈现,样式交给CSS 「3....定义标准文本。取消下划线(最常用) underline 定义文本一条线。下划线 也是我们链接自带(常用) overline 定义文本一条线。...CSS 继承性」 -概念: 子标签会继承父标签某些样式,文本颜色和字号。 想要设置一个可继承属性,只需将它应用于父元素即可。 -注意: 恰当地使用继承可以简化代码,降低CSS样式复杂性。...浮动 让盒子普通流浮起来,主要作用让多个块级盒子一行显示。 C. 定位 将盒子定在浏览器某一个位置——CSS 离不开定位,特别是后面的 js 特效。 「2.... 我是文本 2.2 轮廓线 outline 是绘制于元素周围一条线,位于边框边缘外围,可起到突出元素作用

3.2K30

HTML5 Canvas开发详解(基础一)

对于Canvas宽度和高度应该在HTML属性定义,如果在CSS样式定义,那么使用canvas对象获取宽度和高度是默认值,而不是实际宽度和高度。...直线图形 3.1 直线 3.1.1 Canvas坐标系 Canvas使用坐标系是W3C坐标系。 数学坐标系:y轴正方向向上;W3C坐标系:y轴正方向向下。...文本操作 6.1 文本操作方法 6.1.1 fillText()(绘制“填充”文本) //text:一个字符串文本 //x:表示文本最左边坐标 //y:表示文本最下边坐标 //maxWidth:可选...,表示允许最大文本宽度(单位为px) cxt.fillText(text, x, y, maxWidth); 6.1.2 strokeText()(绘制“描边”文本) //text:一个字符串文本...(定义文本垂直对齐方式) //alphabetic:文本基线是普通英文字母基线 //top:文本基线是em方框顶端 //middle:文本基线是em方框中心 //bottom:文本基线是em方框底端

2.5K20
领券