文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

深度揭秘可部署矢量字体图标管理平台YIcon

我们公司的删格模板（白色画板大小28px*28px，每格1px*1px），大同小异 圆形icon 举例：直径为28px 描边为2px 方形icon 举例：边长16px，圆角1px，内部均为直角，主线条...水平矩形icon 举例：宽28px高21px，圆角1px，内部均为直角，主线条2px，辅助线条1px 竖直矩形icon 举例：宽24px高26px，圆角1px，内部均为直角，主线条2px，辅助线条1px...不规则icon 举例：图中音符高28px宽27px，圆角不定，主线条2px，辅助线条1px 以上只是拿一套图标中的几个做个范例，最终目的要做到利用这些核心形状做为向导，使整个相关产品的图标保持一致的视觉比例...关键点 ● 主线条2px，辅助线条1px，不要修改它 ● 一致的圆角半径（1px）是统一全系列系统图标的关键，不要修改它 ● 图标内部的角应为直角，不要修改它 ● 在部分只由线段组成的图形中（比如...● 支持css样式。 ● 兼容性好。 如何制作字体图标 我们现在用的字体图标平台是阿里巴巴旗下的Iconfont，我们先来看一下它的制作指南。

96310

CSS 删除线：在 CSS 中使用文本装饰和划线

我们还将了解如何将删除线/划线与其他文本修饰一起使用——以及文本修饰的一般工作方式。什么是 CSS 删除线？CSS 删除线实际上是指“文本装饰：划线”。...设置由 text-decoration-line 添加的线条的样式。• 文本装饰颜色。设置由 text-decoration-line 添加的线条的颜色。...这些属性可以更改放置在文本上的线条、样式和颜色，例如蓝色下划线。如何使用删除线 HTML 标记？HTML 删除线标记用于表示已删除的文本。它看起来像这样：罢工！...CSS 也可用于设置删除线文本的样式。例如，您可以使线条变粗、更改颜色或使其闪烁。您还可以使用 CSS 在文本上方或下方添加一行。如果您想强调某些内容已被划掉，这会很有用。...结语：如何使用CSS格式化CSS 格式化一般放在 HEAD STYLE 部分（），但也可以放在单独的 CSS 样式集合中。

1.3K00
您找到你想要的搜索结果了吗？
是的
没有找到

纯CSS3绘制腾讯QQ的企鹅Logo

前言 经常能够看到一些用CSS3绘制的精致图形，它们通常由矩形，圆形，椭圆，三角形,梯形等组合而成。要想绘制我们自己的图形，就要先了解下基本图形的绘制方法了。...通过设定border-radius可以得到圆角矩形，圆形和椭圆形。 前面有文章CSS绘制三角形和箭头，不用再用图片了，可以先去了解一下！...border-bottom-right-radius: 15px; border-top-left-radius: 20% 57%; 3、企鹅的胳膊：手的绘制较为麻烦一点，可以分为上下两个部分，将绘制的结果拼接到一起...在基本的框架线条中比非常多的使用了border-radius用于构造各种曲线条，小企鹅是圆圆胖胖的，:) 接下来就是对只有基本线条的小企鹅进行着色了。...着色的过程可以帮助我们调整z-index，也就是各个模块的重叠层次，遮盖了一些无用的线条和框角。 演示地址：演示地址 源码下载：源码下载

1K20

SVG - 基本的SVG属性

line - 直线 拥有四中基本属性 x1 属性在 x 轴定义线条的开始 y1 属性在 y 轴定义线条的开始 x2 属性在 x 轴定义线条的结束 y2 属性在 y 轴定义线条的结束 demo <line...属性可定义矩形的高度和宽度 x 属性定义矩形的左侧位置（例如，x="0" 定义矩形到浏览器窗口左侧的距离是 0px） y 属性定义矩形的顶端位置（例如，y="0" 定义矩形到浏览器窗口顶端的距离是 0px） CSS...的 fill-opacity 属性定义填充颜色透明度（合法的范围是：0 - 1） CSS 的 stroke-opacity 属性定义笔触颜色的透明度（合法的范围是：0 - 1） CSS 的 opacity...属性定义整个元素的透明值（合法的范围是：0 - 1） rx 和 ry 属性可使矩形产生圆角 demo <rect x="60" y="10" rx="10" ry="10" width="30" height

3.8K170

CSS 奇思妙想边框动画

嘿嘿，所以来一篇边框特辑，看看运用 CSS，可以在边框上整些什么花样。...OK，一起来看看一些额外的有意思的边框。 边框长度变化 先来个比较简单的，实现一个类似这样的边框效果： ? 这里其实是借用了元素的两个伪元素。...不过如果是单线条，有个很明显的缺陷，就是边框的末尾是一个小三角而不是垂直的，可能有些场景不适用或者 PM 接受不了。 ? 那有没有什么办法能够消除掉这些小三角呢？...之前也有一篇关于 border-image 的文章 -- 巧妙实现带圆角的渐变边框 我们可以利用 border-image + filter + clip-path 实现渐变变换的圆角边框： .border-image-clip-path...CodePen Demo -- clip-path、border-image 加 filter 实现圆角渐变边框 最后 本文介绍了一些我认为比较有意思的边框动画小技巧，当然 CSS 产生还有非常多有意思的效果

1.1K20

HTML5-Canvas初探（1）

设置 width 和 height 时，实际上是同时修改了该元素本身大小和元素绘图表面大小； 而设置 css，只会改变元素本身大小，并不会改变元素绘图表面大小。...这是因为canvas在第二次给路径上色时，是把之前的所有路径轨迹合在一起来上色的，除非咱们让canvas知道那折线和直线应该是独立开来的俩路径。...赋值是一样的，支持css3颜色值标准，如下例： 2 ....⑴ lineCap是设定线段端点的形状（线帽），其值可以是 butt 默认，即线条端点为平直的边缘 round 线条端点为圆角线帽 square 为线条端点添加正方形线帽 效果如下： 光看此图可能看不太出...和”square”的区别，但懂得使用AI绘制矢量的同学们应该比较了解： ⑵ lineJoin则是设定折线的交接处的外角类型，其值可为： miter 默认，折线交接处为尖角 round 折线交接处为圆角

1.4K20

如何使你的Echarts图表更具有观赏性和实用性？

柱形图如何设置柱子渐变和圆角 主要通过itemStyle属性，color来设置渐变，barBorderRadius属性设置圆角，遵循css左上、右上、右下、左下顺序。...// 加粗 distance: 20 // 距离 }, // 柱子上方的数值 itemStyle: { barBorderRadius: [20, 20, 0, 0],// 圆角...柱形图添加折线 同上方一样，我们还可以再在series里面添加line，同时可以设置折线颜色（lineStyle），折线线条区域颜色（areaStyle）等，都是可以通过new echarts.graphic.LinearGradient...{ type:'line', smooth: true, // 线条转折有弧度 symbol: 'circle', // 数值点类型('circle', 'rectangle', 'triangle...color: 'rgba(34,202,192,0.04)'}, {offset: 1, color: 'rgba(28,216,168,0.52)'}] ) }, // 线条区域渐变

2.2K50

利用PPT如何设计制作创意相框

右击这个正六边形，选择“设置形状格式”，线条设置为“无线条”;填充设置为“渐变填充”，类型、方向等选默认，角度为45度，2个渐变光圈，光圈1颜色为“白色，背景1，深色15%”，光圈2颜色为“白色，背景1...插入一个圆角矩形(可拖动其黄色控制点来改变圆角的弧度)，设置它的线条为“渐变线”，填充类型为“路径”。...线条的宽度设为5磅。圆角矩形的内部填充为“渐变填充”，类型为“路径”，其中2个光圈：光圈1颜色为白色，位置为0%，透明度为100%;光圈2颜色为白色，位置为100%，透明度为90%。...插入一个大小合适的椭圆，设置为无线条，内部填充为“渐变填充”，类型为“路径”。...需要注意的是，图片要放在反光的下一层，阴影要放到水晶边框的下一层。 20.png 　　小提示： 　　可选定相应素材，利用“置于底层”反复操作，直到达到所需要的效果。

4K20

HTML-CSS基础学习

:after 用来跟content属性一起使用，设置这元素后发生的内容 ::before 用来跟content属性一起使用，设置这元素前发生的内容 ::first-letter 设置元素内的第一个字符的样式...字符之间的间距 text-indent 文本的缩进 vertical-align 内容的垂直对齐方式 line-height 对象的行高 文本装饰属性 text-decoration-line 文本装饰线条的位置...text-decoration-color 文本装饰线条的颜色 text-decoration-style 文本装饰线条的形状 text-decoration-skip 文本装饰线条略过的部分 text-underline-position...border-top-left-radius 边框左上角圆角半径 border-top-right-radius 边框右上角圆角半径 border-bottom-right-radius 边框右下角圆角半径...border-bottom-left-radius 边框左下角圆角半径 border-radius 复合属性 参数（all；上下左右；上下、左右；上、左右、下） 边框阴影 box-shadow:

4.8K30

【Quick BI VS Power BI】（二）

上述四个按钮拼接后，彼此之间的间距会消除同时局部改变原图的尺寸形状，本身分开的按钮，全部连接在一起。 拼接颇有融合的意味，比组合更加丝滑。...备注可放在标题的后面，或标题与图表之间。这个类似于Pbi的副标题。Pbi没有与Qbi尾注对应的功能。...7 线条平滑和圆角矩形 很长一段时间来，Pbi图表显得那么生硬，设计感不强，原因之一就是折线图不能设置为平滑曲线，以及视觉对象不能做圆角处理。...Pbi可以设置图表的外框为圆角矩形，但目前还不能设置图表内容（比如柱形图的柱子、表格内条件格式的柱子或者横条）为圆角矩形。...Qbi的线型图提供了线条类型（曲线：平滑，直线：不平滑）的设置选项，还有空值的三种处理方式。但奇怪的是，Qbi不能设置线条的粗细、实线还是虚线等。

18411

HTML详解连载（7）

颜色（不区分顺序） 常用线条样式 关键字 含义 solid 实线 dashed 虚线 dotted 点线 设置单方向边框线 属性名 border-方位名词（bd+方位名词首字母） 属性值 边框线粗细...，线条样式 颜色（不区分顺序） 盒子模型-内边距 作用 设置内容与盒子边缘之间的距离 属性名 padding/padding-方位名词 盒子模型-尺寸计算 默认情况 盒子尺寸=内容尺寸+border尺寸...外边距问题-合并现象 场景 垂直排列的兄弟元素，上下margin会合并 现象 取两个margin中的较大值生效 外边距问题-塌陷问题 场景 父子级的标签，子级的添加上外边距会产生塌陷问题 现象 导致父级一起向下移动...作用 设置元素的外边框为圆角 属性名 border-radius 属性值 数字+px/百分比（取值最大为50%） 注意 属性值是圆角半径 多值 从坐上叫顺时针赋值，没有对应的角与对角值相同 常见应用-...正圆形状 给正方形盒子设置圆角属性值为宽高的一半/50% 常见应用-胶囊形状 给长方形盒子圆角属性值为盒子高度的一半 盒子模型-阴影 作用 给元素设置阴影效果 属性名 box-shadow 属性值 X轴偏移量

12630

【移动端网页布局】流式布局案例 ⑤ ( 连续排列的链接图片 | 设置盒子圆角 | 超出部分隐藏 | 设置浮动布局 | 精确计算浮动元素宽度避免换行 | 设置图片宽度自适应 )

-- 链接放在 div 盒子中 使用 a 标签包裹 img 标签 --> <img src=...在布局的 左上角 和 右上角 都有一个圆角 , 并且矩形图片超过圆角的部分被隐藏了 , 设置圆角和超出部分隐藏样式 : .brand { /* 设置圆角后 超过圆角的图片不再显示 */...在布局中 , 三个链接图片水平排列在一起 , 并且中间没有缝隙 , 说明这是使用 浮动 进行设置的 , 为父容器的三个子元素都设置 左浮动 , 就可以实现上述效果 ; 设置浮动后 , 还需要设置子元素的宽度...-- 引入 css 初始化样式 --> <img src=

3.5K20
点击加载更多

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

更多标签

活动推荐

    运营活动

    活动名称
    广告关闭

    腾讯云开发者

    扫码关注腾讯云开发者

    扫码关注腾讯云开发者

    领取腾讯云代金券

    热门产品

    热门推荐

    更多推荐

    Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

    深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

    腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

    领券