首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

html 边框变粗 margin -1px

最近刚开始学习web前端,html和css,对于遇到边框变粗问题,用margin为负值解决问题发表一些自己理解 首先我们来看看下面一张图片 list-style: none;                 ...这里就可以用margin -1px(取决你边框宽度)来解决。...加入这行代码样式,如下图  下面我们就来分析这就话,对于边框top,和left向上和向左移动一个而对于right和bottom它们会把紧跟其后元素拉过来。...其实每个li都向上和向左在原来基础上移动了1px,对于bottom边框把下方紧随其后top边框拉过来之后,top边框也要向上移动1px,刚好重合。...还有其他解决方法,就是重合边框你可以设置:border-top(bottom或left或right):none;这样的话也可以取消边框

3.1K00

【OpenXml】Pptx边框虚线转为WPF边框虚线

安装Openxml sdk 首先,我们先安装nuget需要有关Openxml sdk,我们开源了解析pptxOpenxml拍平层,下面两种方式都可以安装: nuget包管理器控制台: Install-Package...PackageReference Include="dotnetCampus.DocumentFormat.OpenXml.Flatten" Version="2.0.0" /> 解析Pptx 我这里用PPTX7...种直线,分别设置7种能够设置虚线类型,PPTX显示效果是这样: 然后解析代码如下,解析主要逻辑部分: private void PptxToGeometry(string filePath...: 我们可以看到几乎是接近效果了,当然你也可以根据我代码去微调更精确值,只需要稍微改下GetDashArrayByPresetLineDashValues方法内相对应值即可 后话 实际上,openxml...文档是给出了PresetDash,大致如下: 但是其值跟WPF设置DashDoubleCollection不对应,因此以上映射值都是我自己微调 源码 BlogCodeSample/PptDashConverToWpfSample

1.8K30

边框巧妙应用

边框有一些特殊属性,可以采用边框来实现对话框效果,而且兼容性杠杠,不过在ie6下面可能会遇到兼容性问题,在后面分析它。...可以看到边框效果,4个等腰梯形。我们设置各个方向边框高度就是每个等腰梯形高。...可以想象得到,如果div高度和宽度都为0,那么这4个等腰梯形会变成等腰直角三角形; 如果分别设置每个方向边框高度,则变成一般三角形。 利用这个性质,我们可以再html上显示特殊字符▲▼△▽。...前文提到了ie6兼容性问题,我们在 .t-bd1中使用了ie6属性值hack,将solid边框背景色设置为环境色,否则在ie6下边框颜色设置为transparent部分呈现黑色。...网络上有一篇文章提到在ie6下给需要透明色边框设置border-style: dashed可以实现相同目的,但是我实验效果不是很理想。

93880

边框阴影

CSS边框阴影 1.属性 box-shadow 2.取值 1.h-shadow(必须加) 代表是水平方向阴影 取正值  代表往右偏移 取负值  代表往左偏移 2.v-shadow(必须加) 代表是垂直方向阴影...取正值   代表往下偏移 取负值   代表往上偏移 3.blur(可以加可以不加)  模糊距离 4.spread(可以加可以不加)阴影尺寸 5.color(可以加可以不加) 6.inset    将外阴影改为内阴影...最常用 box-shadow:0 0 blur color; #div1 { width: 200px; height:100px; border:1px solid red; box-shadow...{ width: 200px; height:100px; border:1px solid red; box-shadow:5px 10px 15px 20px yellow inset; /*对应是水平阴影...} #div3 { width: 200px; height:100px; border:1px solid red; box-shadow:0 0 10px blueviolet; /*最常用

2.4K10

CSS——边框

定义 边框(Border)属性是对HTML元素边框进行定义CSS属性。...概述 通过边框样式设置,给元素增加更丰富外观 边框设置包含以下内容: 边框类型 边框尺寸 边框前景背景 圆角边框 列表 元素 描述 border border 属性是规定各种单独边界属性简写属性...border-left border-left 该属性规定元素边框属性。 border-left-color border-left-color 该属性是一个用于规定元素边框颜色。...border-left-width border-left-width 该属性是一个元素边框宽度。 border-right border-right 该属性是元素边框属性。...border-top-color border-top 该属性表示元素边框属性。 border-top-style border-top-style 该属性是用于规定元素边框样式。

3.9K20

边框样式写法总结

边框样式写法总结 由 Ghostzhang 发表于 2006-11-15 21:13 今天在群里讨论了border样式写法,发现border写法还真是灵活,做了一下总结,希望对大家有用: border...: border-width || border-style || border-color border是一个复合属性,它可以同时定义上右下左四个边框,当四个边都是同个样式时可以使用,如: border...:1px solid #FF00FF; 这是最简单应用,如果四个边样式不是相同怎办?...一般会有下面几种情况,写法差不多: /*边框样式、宽度、颜色都不同*/ .div1{ border-top:1px solid #FF00FF; border-right:2px solid #0000FF...:none none solid; } 注意:如果提供全部四个参数值,将按上-右-下-左顺序作用于四边。

34120

【CSS】盒子边框 ② ( 盒子边框单独指定语法 )

文章目录 一、边框单独指定语法 二、代码示例 1、边框单独指定代码示例 2、设置表单边框代码示例 一、边框单独指定语法 ---- 盒子 边框 Border , 由 四个方向 边框组成 , 左上右下...四个 方向 上 边框 可以单独指定样式 , 如 : 上边框指定 4 像素 红色 实线 , 下边框 指定 2 像素 灰色 虚线 ; 边框单独指定 语法 : 上边框 : 上边框样式 : 通过...DOCTYPE html> 边框 div {...> 显示效果 : 2、设置表单边框代码示例 input 表单 输入框 默认效果如下 : 上述表单 四个 边框 , 可以单独设置 , 可以将 上左右 三个方向边框取消 , 将下边框样式设置成...DOCTYPE html> 边框 div {

3.1K20

【CSS】盒子边框 ① ( 网页布局本质 | 盒子模型 | 盒子边框 Border | border-width 宽度 | border-style 边框样式 | 边框颜色 | 边框设置综合写法 )

盒子 中 还可以嵌套 若干盒子 ; 二、盒子模型 ---- HTML 一个布局 可以看做一个 矩形 盒子模型 , 该 盒子模型 是一个用于 容纳 标签元素 容器 ; 盒子模型 组成 : 由内到外顺序如下...: 内容 Content : 下图中 内容为 100 x 100 像素元素 ; 内边距 Padding : 内边距 Padding 位于 边框 与 内容 之间 ; 边框 Border : 边框 包裹...在 CSS 2.0 手册中 , 搜索 border , 可以查询到 盒子边框 相关文档 , 文档中可以查询到边框详细细节 : 2、边框设置语法 边框设置语法 : 设置边框宽度 : border-width...DOCTYPE html> 边框 div {...DOCTYPE html> 边框 div {

3.1K20

【CSS】盒子边框 ③ ( 设置表格细线边框 | 合并相邻边框 border-collapse: collapse; )

文章目录 一、设置表格细线边框 1、表格示例 2、合并相邻边框 3、完整代码示例 一、设置表格细线边框 ---- 1、表格示例 给定一个 HTML 结构中表格 , 默认样式如下 : 设置表格细线边框 <base...为 table 设置边框 : table { border: 1px solid blue; } 显示效果 : 上述效果只有表格边框 , 内部单元格边框没有设置 , 为 表头单元格...单元格 之间 边框 , 单元格 与 表格 之间 边框 , 出现了重叠 , 每个重叠处都有 两条线 ; 设置 border-collapse: collapse; CSS 样式 , 可以 将 相邻边框...合并在一起 , 合并边框效果 : 3、完整代码示例 完整代码示例 : <!

3K20

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

    运营活动

    活动名称
    广告关闭
    领券