文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

HTML详解连载（7）

权重和标签选择器相同 PxCoook 像素大厨是一款切图设计工具软件，支持PSD文件的文字、颜色、距离自动智能识别 开发面板（自动智能识别） 设计面板（手动测量尺寸和颜色） 盒子模型-组成 作用 布局网页...，摆放盒子和内容 盒子模型-重要组成部分 内容区域-width & height 内边距-padding（出现在内容和盒子边缘之间） 边框线-border 外边距-margin（出现在盒子外面）...盒子模型-边框线 属性名 boder(bd) 属性值 边框线粗细 线条样式 颜色（不区分顺序） 常用线条样式 关键字 含义 solid 实线 dashed 虚线 dotted 点线 设置单方向边框线...属性名 border-方位名词（bd+方位名词首字母） 属性值 边框线粗细，线条样式 颜色（不区分顺序） 盒子模型-内边距 作用 设置内容与盒子边缘之间的距离 属性名 padding/padding-方位名词...属性名 border-radius 属性值 数字+px/百分比（取值最大为50%） 注意 属性值是圆角半径 多值 从坐上叫顺时针赋值，没有对应的角与对角值相同 常见应用-正圆形状 给正方形盒子设置圆角属性值为宽高的一半

66130

自定义圆形控件RoundImageView并认识一下attr.xml

自定义圆形控件 RoundImageView ，我相信大家在开发中会经常遇到设置圆形头像的情况，因为这样的头像显得漂亮。怎么做呢？先看效果图： ?...，因此截取长方形中处于中间位置最大的正方形图片 int bmpWidth = bmp.getWidth(); int bmpHeight = bmp.getHeight(); int squareWidth...rect, paint); bmp = null; squareBitmap = null; scaledSrcBmp = null; return output; } /** * 画边缘的圆...-- 再解释一遍，我们在布局中使用了我们在sttr中定义的属性，并在这里的布局文件中赋了值，所以在RoundImageView类中的结构体设置属性使用的值，就是我们在这里赋的，如果不使用attr.xml...-- 说明：这里的loonggg可能大家不太明白，这个名字可以随便起，你们也可以自己随便定义，只要上下统一即可，在布局声明的时候一样就行，比如我在布局顶端是这样声明的 xmlns:loonggg="http

1.5K80
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    Adobe Photoshop使用，选框工具进行选择教程

    1.选择选框工具： 矩形选框：建立一个矩形选区（配合使用 Shift 键可建立方形选区）。 椭圆选框：建立一个椭圆形选区（配合使用 Shift 键可建立圆形选区）。...单行或单列选框：将边框定义为宽度为 1 个像素的行或列。 2.在选项栏中指定一个选区选项。 3.在选项栏中指定羽化设置。为椭圆选框工具打开或关闭消除锯齿设置。详情请参文末阅柔化选区边缘。...按住 Shift 键时拖动可将选框限制为方形或圆形（要使选区形状受到约束，请先释放鼠标按钮再释放 Shift 键）。...注意: 要重新放置矩形或椭圆选框，请首先拖动以创建选区边框，在此过程中要一直按住鼠标按钮。然后按住空格键并继续拖动。如果您需要继续调整选区的边框，请松开空格键，但是一直按住鼠标按钮。...柔化选区边缘教程 可以通过消除锯齿和通过羽化来平滑边缘。 消除锯齿 通过软化边缘像素与背景像素之间的颜色过渡效果，使选区的锯齿状边缘平滑。由于只有边缘像素发生变化，因此不会丢失细节。

    4.1K30

    前端 + AI —— 走进无码时代

    导语：前端智能化，就是通过AI/CV技术，使前端工具链具备理解能力，进而辅助开发提升研发效率，比如实现基于设计稿智能布局和组件智能识别等。...这里采用的是Canny边缘检测来得到图像边缘图，再通过Suzuki85算法cv2.findContours从图像边缘提取外轮廓。...同时，黄色块也是以边长R为正方形与半径R为1/4圆的差集，即s = R² - π × R² × ¼，于是联立方程，可求解圆角半径R，代码如下： 这一步我们根据面积差集计算出半径R，通过R，我们裁剪出“候选区域...边框内的颜色连续与相近；B. 外轮廓和内轮廓是形状相似的。...内轮廓则需要分两步，首先对外轮廓填充图与色块填充图进行差运算得到“内域”，再对内域进行cv2.findContours。

    2.1K30

    iOS编程101：如何创建圆形头像和圆角图片

    IOS7的一个变化是相对于方形图像，更偏爱于使用圆形图像。在内置的应用中可以看到圆形图标或圆形图像，如联系人和电话应用。...与往常一样，了解CALayer是如何工作的最好方法就是使用它。我们将创建一个带有圆形用户头像的简单的profile视图。 快速了解演示项目 首先，下载此项目模板。...已经预先创建了profile视图，但编译并运行应用程序时你会发现用户头像是方形的。这个演示项目非常简单，只有一个类ProfileViewController，与storyboard中的视图相关联。...将方形图像变成圆形图像，半径应设置为UIImageView宽度的一半。例如，如果方形图像的宽度是100像素。半径应设置为50像素。...现在编译和运行应用程序，你会得到一个圆形头像。 ? 非常容易吧。只需两行代码，图像从方形变为圆形。无需Photoshop。 添加边框 接下来，我们给头像添加边框使它更漂亮点。同样，也只需要两行。

    3.3K20

    CSS3 圆角边框 阴影 浮动详解

    CSS3 圆角边框、阴影、浮动详解 ---- 圆角边框： 在 CSS3 中，新增了圆角边框样式，这样我们的盒子就可以变圆角了。 border-radius 属性用于设置元素的外边框圆角。...语法： border-radius:length; 参数值可以为数值或百分比的形式 如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为 50% 如果不是正方形，这种设置会生成一个圆角矩形...常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。...总结： 有很多的布局效果，标准流没有办法完成，此时就可以利用浮动完成布局。 因为浮动可以改变元素标签默认的排列方式。 浮动最典型的应用：可以让多个块级元素一行内排列显示。...网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。 1.4什么是浮动？ float 属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。

    2.5K20

    圆填充( CIRCLE PACKING)算法圆堆图圆形空间填充算法可视化

    RepelLayout 通过成对排斥迭代移动圆圈来搜索非重叠布局。圆的位置被限制在一个矩形区域内。为避免边缘效应，可以将边界区域视为环面，例如，推到左侧边缘的圆将重新进入右侧边缘的边界区域。...ProgressiveLayout 连续放置圆，使每个圆与先前放置的两个圆在外部相切。该算法是确定性的，尽管可以通过改变输入圆圈的顺序产生不同的布局。它非常高效，因此适用于处理大型数据集。...as <- reta(rcs ,5) * maxaa 接下来，我们尝试找到一个不重叠的排列，允许圆圈占据边界正方形的任何部分。返回值是一个包含布局元素和执行迭代次数的列表。...Layout(areass) 布局作为具有圆心坐标和半径的数据框返回。 head( layout ) 我们将其转换为圆形顶点的数据集，用 ggplot 显示。...本文摘选《R语言圆填充( CIRCLE PACKING)算法圆堆图圆形空间填充算法可视化》

    5.3K30

    从头学前端-CSS基础03

    在这里插入图片描述](https://img-blog.csdnimg.cn/774157a7bd834c7ca92fea2608c31f15.png)- 外边距margin> margin用于设置外边距，即盒子与盒子之间的距离...:> 用于设置元素的外边框圆角> border-radius : length 单位是px 或者是百分比> 原理：盒子矩形边框和圆形的交集> border-radius是复合属性，最多可以有四个值，表示四个角...： 普通流，浮动，定位 普通流(标准流)：就是标签按照默认方式排列；块级元素独占一行，从上向下顺序排列，行内元素从左向右排列；碰到父元素边缘则自动换行undefined网页布局第一准则：多个块级元素纵向排列找标准流...，横向排列找浮动什么是浮动：float属性用于创建浮动层，将其移动到一边，直到左边缘或右边缘触及到包含块或另一个浮动框的边缘；浮动特性浮动元素会脱离标准流- 浮动的盒子不再保留原来的位置- 脱离了标准流的控制浮动元素会一行内显示...，先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右的位置**浮动布局要点- 先父元素上下布局，后浮动元素左右布局- 理论上一个元素浮动，后面的兄弟元素也要浮动；- 浮动的盒子只会影响后面盒子的标准流

    1.2K20

    使用 HandyControl 的 CirclePanel 画出表盘刻度

    ContentControl.ContentTemplate> 这样 UI 上就会重复创建 12 个 Rectangle，然后设置 ItemsControl 的 ItemsPanel，让这些 Rectangle 按着圆形布局...这里我使用了 HandyControl 的 CirclePanel，这个 Panel 用起来十分简单，它会自动将 Children 在圆形上等距分布： ..._src=template 最后再添加一些边框和内阴影，一个简单的表盘就完成了。 3....用 OpacityMask 实现方形表盘 这次更进一步实现一个方形的表盘，首先将 CirclePanel 的尺寸变大，然后加长刻度线： 然后在它的背后藏一个 Border，用它作为刻度线的 OpacityMask...最后 这篇文章介绍了如何实现表盘刻度，基本都是用别人的 Panel 实现布局，我自己反而没出什么力，感谢两位大佬实现的优秀 Panel。

    2.5K30

    详解视觉误差对UI设计的影响和解决方案

    物理尺寸与视觉尺寸 长宽 400px 的正方形与长宽 400px 的圆形哪一个更大?假如这样问你的话，那么答案当然是一样大。但是来看看下面这张图，长宽各 400px 的两个图形看起来并不一样大。...再将 400px 的正方形与 450px 的圆形叠在一起，正方形无法将整个圆形包裹在内了，圆形超出的四个 b 区域又与 正方形多出来的 a 区域在视觉上互相抵消，所以 450px 的圆形与 400px...加个粉色等大的边框，或许你会看得更加清楚。 ?...这种现象与排列原则最常应用于按钮与输入框。 ? 左边的浅色背景输入框框体不会与标签文字对齐，框内文本才会与标签对齐。右侧的深色边框的输入框的框体就要与标签文字对齐，而框内容无需与标签文字对齐。...记住这些点 边缘有角的图形要拉长一些才能在视觉上与方形边缘的长度对齐。 制作文字按钮时一定要记得调整行距。 有角 icon 的对齐方法是保证每个角到边的距离相等。

    2.2K10

    CSS盒子模型

    表格的细线边框：解决表格边框粗细叠加的问题 border-collapse： collapse; 表示把相邻的边框合并在一起 内边距（padding）：设置内边距，即边框与内容之间的距离 padding-left...为父元素定义上内边距 为父元素添加overflow：hidden; 清除内外边距：网页元素很多都会带有默认的内外边距，而不同浏览器的默认值不一致，所以我们在布局前，首先要清楚内外边距 *{ margin...加上这行代码可以去掉小圆点 圆角边框:把盒子变成圆角的 border-radius: 10px; 通过设定radius（半径）的值来确定圆弧的大小，用该半径的圆去与盒子的两条相邻边切 所以数值越大弧度越明显...要想要做出圆形的盒子，先设置一个正方形盒子，在让半径等于边长的一半 width: 200px; height: 200px; border-radius: 50%; 圆角矩形：把半径设为盒子高度的一半...来给盒子添加阴影 值 描述 h-shadow 必写，水平阴影的距离 v-shadow 必写，垂直阴影的距离 blur 模糊距离（虚实） spread 阴影的尺寸 color 阴影颜色，一般用半透明的 inset 内阴影还是外阴影

    1.4K30

    TpPen 使用指南:嵌入式 GUI 中的画笔工具，支持渐变和线帽控制

    TpPen使用指南:嵌入式GUI中的画笔工具，支持渐变和线帽控制1.引言在嵌入式GUI开发中,绘制线条、边框和形状轮廓是最基础的需求。...(Tp::ButtCap);//平头线帽pen.setCapStyle(Tp::SquareCap);//方形线帽连接点样式连接点样式控制线条连接处的形状:展开代码语言：C++AI代码解释TpPenpen...绘制分隔线在菜单组件中绘制分隔线:展开代码语言：C++AI代码解释painter->setPen(_RGB(230,235,241));painter->drawHLine(x1,x2,y);4.2绘制控件边框在复选框中绘制边框...5.3线帽和连接样式的视觉效果不同样式在渲染时的映射关系:线帽样式:Tp::ButtCap-平头,线条在端点处截断Tp::RoundCap-圆形,线条端点为半圆Tp::SquareCap-方形,线条端点延伸半个线宽连接样式...:Tp::MiterJoin-尖角,外边缘延伸相交

    26621

    UI界面图标终极设计指南

    1 使用光栅来更好的设计图标 UI界面的图标通常可以近似的看做以下的基本格式之一：横向矩形，纵向矩形，对角矩形，圆形，三角形，正方形。...你就会发现，方形图标比三角形或细长图标更紧凑。 ? ? 图标越紧凑，所需空间就越小。图标的边缘越锐利，细节越多，它们占据的画板空间就越多。 ? ? 请注意，不要过分的依赖于网格来设计图标。...如果为图标设置1像素的边框，这个时候，这些边框应该使用外部或内部的描边样式，但不建议是居中的。如下图，你可以看到他们的区别。 ? ? 居中描边的一像素边框，虽然在放大它们的时候，它们看起来很清晰。...7 基于二倍数的度量系统来设计 与基于十进制的大小调整相比，8像素网格和12列布局用于许多接口更灵活。 12可以分为2,3,4和6。因此，24或48像素图标区域已成为标准。...如果节点定位准确，图标边缘看起来很清晰。这个非常必要，保持整数吧！ ? 9 清理SVG图标中的垃圾代码 我们都知道SVG图标最终是一串代码。

    1.7K50

    超干！UI界面图标终极设计指南

    详细阐释了图标设计过程中方方面面的知识点，今天，咱们就来看看设计师Slava Shestopalov的文章： 1 使用光栅来更好的设计图标 UI界面的图标通常可以近似的看做以下的基本格式之一：横向矩形，纵向矩形，对角矩形，圆形...，三角形，正方形。...你就会发现，方形图标比三角形或细长图标更紧凑。 图标越紧凑，所需空间就越小。图标的边缘越锐利，细节越多，它们占据的画板空间就越多。 请注意，不要过分的依赖于网格来设计图标。...如果为图标设置1像素的边框，这个时候，这些边框应该使用外部或内部的描边样式，但不建议是居中的。如下图，你可以看到他们的区别。 居中描边的一像素边框，虽然在放大它们的时候，它们看起来很清晰。...7 基于二倍数的度量系统来设计 与基于十进制的大小调整相比，8像素网格和12列布局用于许多接口更灵活。12可以分为2,3,4和6。因此，24或48像素图标区域已成为标准。

    1.3K20

    【Flutter】Hero 动画 ( Hero 实现径向动画 | Hero 组件 createRectTween 设置 )

    , 方形变三角形 ; Hero 径向动画 与 普通动画的区别就是是否设置了 createRectTween 参数 ; 一、圆形方形组件 ---- 圆形方形变化的组件 : 该组件可以根据不同的参数实现圆形到方形的变化...) { /// 布局裁剪组件 , 可以将布局裁剪成圆形 return ClipOval( /// 可用于约束布局大小的组件 /// 这里的居中显示是关键 , 如果不居中显示...: ClipOval 组件区域是 红色 矩形所在位置 , 其裁剪区域是蓝色组件位置 , 如果正好有个方形的组件 ClipRect 处于下面橙色区域内 , 那么该方形组件正好躲过了被外围红色区域 ClipOval...裁剪的操作 ; 显示的仍然是方形的组件 ; ② 圆形裁剪组件 : 如果 ClipOval 圆形裁剪组件 ( 红色 ) 与 ClipRect 方形的裁剪组件 ( 橙色 ) 位置重叠 , 那么该方形的裁剪组件肯定就被裁剪成圆形的了...) { /// 布局裁剪组件 , 可以将布局裁剪成圆形 return ClipOval( /// 可用于约束布局大小的组件 /// 这里的居中显示是关键 , 如果不居中显示

    2.1K40

    如何点击穿透Electron不规则窗体的透明区域

    28932-20200930141340341-984687124.png 实现一个不规则窗体 这里我们实现一个圆形窗体，实现其他形状的窗体与这个方法类似。...不规则窗口往往需要自定义边框和标题栏，所以frame也设置为false。 另外，透明的窗口不可调整大小。所以将resizable属性设置为false。...点击穿透透明区域 上面这个应用会有一点小问题，虽然窗口看起来是圆形的，但它其实还是一个正方形窗口，只不过正方形四个角是透明的，所以看起来像一个圆形的窗口。...也就是说除了圆形区域内可以接收鼠标事件外，其他部分将不再接收鼠标事件。...鼠标在圆形区域移动时，鼠标事件不允许穿透。 至此，上文所述判断成立，运行程序，鼠标在正方形四角区域内点击，鼠标事件具备了穿透效果。

    4.3K10

    交互式输入区域：条件渲染与层叠布局的高级应用

    Row宽度占父容器的100% height 64 设置Row高度为64vp，形成固定高度的输入栏 padding { left: 16, right: 16, bottom: 24 } 设置内边距，使内容与边缘保持适当距离...24vp，创建圆形按钮效果 onClick () => this.showEmoji = false 设置点击事件处理函数，隐藏表情面板 表情按钮的设计与之前的加号按钮类似，但有以下不同： 内容变化：...绑定输入框文本到inputText状态变量 flexGrow 1 设置弹性增长因子为1，使其填充剩余空间 height 48 设置输入框高度为48vp padding 12 设置内边距为12vp，使文本与边缘保持距离...： 弹性宽度：通过flexGrow(1)属性，使输入框自动填充除表情按钮外的所有可用空间 适当高度：48vp的高度提供了足够的输入空间，同时保持与表情按钮的视觉平衡 内边距：12vp的内边距使文本不会贴近输入框边缘...，提高可读性 边框样式：1vp宽的浅灰色边框提供了清晰的视觉边界，但不会过于突兀 圆角设计：24vp的圆角使输入框呈现为胶囊形状，与圆形表情按钮形成视觉呼应 这些设计规范有助于创建一个既美观又实用的输入框

    41710

    交互式输入区域：条件渲染与层叠布局的高级应用

    设置Row高度为64vp，形成固定高度的输入栏padding { left: 16, right: 16, bottom: 24 }设置内边距，使内容与边缘保持适当距离...24vp，创建圆形按钮效果onClick () => this.showEmoji = false设置点击事件处理函数，隐藏表情面板 表情按钮的设计与之前的加号按钮类似，但有以下不同：内容变化...设置输入框高度为48vp padding 12 设置内边距为12vp，使文本与边缘保持距离...，同时保持与表情按钮的视觉平衡内边距：12vp的内边距使文本不会贴近输入框边缘，提高可读性边框样式：1vp宽的浅灰色边框提供了清晰的视觉边界，但不会过于突兀圆角设计：24vp的圆角使输入框呈现为胶囊形状...，与圆形表情按钮形成视觉呼应这些设计规范有助于创建一个既美观又实用的输入框，提升用户体验。

    39300
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

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

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

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

      领券