经常用border的solid，你知道border的这几种值吗？

最新推荐文章于 2024-01-20 16:45:49 发布
最新推荐文章于 2024-01-20 16:45:49 发布
阅读量9.9k 收藏 4
点赞数 2
分类专栏： css 文章标签： css border
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012028371/article/details/52185969
版权

   偶尔发现了，border-style的其他几个值，同时打都不常用，还挺新鲜的

   以前做微信红酒的时候，有个奇葩测试妹子给我提了一个bug (说 li标签之间是虚线，不是点)，（ps:我当时心里心里还嘲笑她什么虚线、点，调下粗细就行了。哈哈，有小伙伴给我犯过相同的错误的吗？）


  border:medium dotted  red;


border:medium dashed red



border:medium double red



哈哈，dotted dashed

江南风雨2013
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
详解CSS中左上朝向三角形(Top-Left Triangle)的几种制作方式
12-14
今天我们介绍几种，用css实现左上朝向三角形（Top-Left Triangle）的写法。 示意图（以宽高各60px为例）： 这种三角形，一般可以用来做“对话框”类型图形的左下小脚。 第一种： #triangle-topleft { border: 30...
CSS中border的所有样式属性
weixin_44431951的博客
05-30 2467
CSS中border的所有样式属性 1、solid:实线 使用方法：border:solid 1px #000; 我发现border:1px solid #000;和border:solid 1px #000;的效果是一样的 效果图如下： 2、dotted:点划线 使用方法：border:dotted 1px #000; 同样的border:dotted 1px #000;和border:1px...
js table栏切换+border绘制三角形特殊应用
06-05 1578
*{ margin: 0; padding: 0; } body{ width: 100%; height: 100%; background-color: #f6f6f6; } .count{ width: 390px; height: 444px; /*border: 1px
高性能前端UI库 SolidJS | 超棒 NPM 库
最新发布
王乐平 技术博客
01-20 1234
SolidJS是一个声明式的、高效的、编译时优化的JavaScript库，用于构建用户界面。它的核心特点是让你能够编写的代码既接近原生JavaScript，又能够享受到现代响应式框架提供的便利。SolidJS的设计哲学强调了性能与简洁性。它不使用虚拟DOM（Virtual DOM），而是通过编译时的静态分析生成高效的真实DOM更新指令。这种方法使得SolidJS在性能方面非常出色，尤其是在渲染和更新视图方面。SolidJS的响应式系统基于细粒度的响应式原语。
重温CSS：Border属性
颜海镜的博客 http://yanhaijing.com
02-22 178
边界是众所周知的，有什么新的东西吗？好吧，我敢打赌，在这篇文章中，有很多你不看永远不知道的东西！ 不仅可以用CSS3来创建圆角，使用原有CSS一样可以显示自定义图形。这是正确的（有待考究）；在过去，没发现这种技术之前，我们可能使用背景图像定位来显示一个园或箭头。幸运的是，我们能放下PS图象处理软件了。 基础 你可能很熟悉边的最基本用法。 border: 1px solid ...
CSS 的 border 样式
weixin_33716557的博客
12-28 1913
制作过网页的人都有为画线而烦恼的经历，先来认识一下“Border”（画边框），它是CSS的一个属性，用它可以给能确定范围的HTML标记（如TD、DIV等等）画边框，它可以定义边框线的类型、宽度和颜色，利用这个特性，可以制作一些特殊效果。下面把通过实例来说明其应用技巧。 1、给文本加边框  上面的示例中，给一段文字加了不同的边框，只是为了说明边框线的颜色、粗细是可变的。 第一个边框的CSS代码是：s...
border定义不同边框，虚线边框（dashed，dotted），实线边框（solid）
热门推荐
tuuuuy的博客
11-12 3万+
1.solid border属性下的实线边框，当border不定义边框指定的一面，就默认四条边都是实线边框。 border:2px solid #FFFFFF； 实现效果： 2.dashed border属性下的虚线边框，当border不定义边框指定的一面，就默认四条边都是实线边框。也可以虚线跟实线定义。 border:2px dashed #FFFFFF； 3.dotted...
css border：solid实线，dashed虚线；dotted点状,,double双线
编程日常记录与总结 https://franciswmf.iteye.com
04-12 5247
大小: 12.6 KB 查看图片附件
CSS常用位置样式
爱兰河少
11-30 1092
CSS margin 属性 例子 1 margin:10px 5px 15px 20px; 上外边距是 10px 右外边距是 5px 下外边距是 15px 左外边距是 20px 例子 2 margin:10px 5px 15px; 上外边距是 10px 右外边距和左外边距是 5px 下外边距是 15px 例子 3 margin:10px 5px; 上外边距和下外边距是 10...
HTML - 盒子模型的基本属性
LV_MING_zg的博客
07-29 5525
HTML - 盒子模型 边框样式（border-style） 属性值： none：没有边框 solid：边框为单实线 dashed：边框为虚线 dotted：边框为点线 double：边框为双实线 综合属性： 上右下左 顺时针方向 border-style:solid ; /四边均为实线/ border-style:solid dotted ; /上下实线、左右点线/ border-style:solid dotted dashed; /上实线、左右点线、下虚线/ 边框颜色（border-col
CSS样式下常用的border有几种线性
huxinjian1的博客
02-23 2892
CSS样式下常用的border有几种线性: 首先border后的三个参数：边框粗细　边框样式　边框颜色，比如：4px（宽度） dashed（线性） #232323（颜色） 常用 属性参数：border-none(定义无边框） border-solid(定义实线） border-dotted(定义点线） ...
CSS Border属性solid(实线)使用介绍
12-12
制作过网页的人都有为画线而烦恼的经历，先来认识一下“Border”（画边框），它是CSS的一个属性，用它可以给能确定范围的HTML标记（如TD、DIV等等）画边框，它可以定义边框线的类型、宽度和颜色，利用这个特性，可以制作一些特殊效果。下面把通过实例来说明其应用技巧。 1、给文本加边框  上面的示例中，给一段文字加了不同的边框，只是为了说明边框线的颜色、粗细是可变的。 第一个边框的CSS代码是：style="border:thin solid red"； “border”后面的三个参数的含义是：边框线的宽度是：thin（细线）；边框线的类型：solid（实线）；边框线的颜色：red（红色）。
子Div使用Float后撑开父Div的几种方法
01-21
一个Div包含了多个子Div，并且子Div使用了浮动后，父Div确不能被撑开，如下图： 部分代码如下： 复制代码代码如下: <style> #div1{border:1px solid red;float:left;} #div2,#div3{float:right;border:1px ...
详解css边距重叠的几种解决方案
12-29
今天整理了一下用css防止边距重叠的几种方法 先假设一组dom结构 通常情况下，如果给子元素设置margin,就会产生这个属性对父元素也产生了同样的效果，然而 这其实不是我们想要的结果，我们只想对子元素设置...
给表格设置不重叠的边框(单线边框)的2种方法
12-08
大多数朋友都会遇到给表格table设置边框的情况，但效果总是达不到预期，比如某几根线会因重复设置而加粗，破坏了整体效果。下面我给大家介绍两种设置单线边框的css样式： 第一种： 复制代码代码如下: table{ border...
css清除浮动的几种方法和示例
01-19
border:1px solid #F00;background:#FF0} .divcss5-left,.divcss5-right{width:180px;height:100px; border:1px solid #00F;background:#FFF} .divcss5-left{ float:left} .divcss5-right{ float:r
前端工程师-----一些ps小技巧
u012028371的博客
08-23 1001
1、图象缩小， 用处：当用背景图（background：URL（）），需要兼容ie8及以下的时候，由于ie8不支持css3属性background-size，所以如果背景图片大于要展示的区域的话（width和height），那就要用photoshop来压缩图片了。  操作方法：图象--图象大小（快捷键：ctrl+alt+i）,弹出如下如图，  把200 200改为100 100就可以了。
box-shadow投影
u012028371的博客
08-12 326
格式 box-shadow: h-shadow v-shadow blur spread color inset; 比如 box-shadow:10px 10px  20px  5px  block;    //前两个值可以为负值，表示向上或向左 当需要四周阴影时，前两个值都设为0 0即可。
[' border-width: 1px', ' border-style: solid', ' border-color: rgb(51, 51, 51)']。JS中如何获取数组里面每一个属性的值，有几种获取方法？写一段代码
07-14
在JavaScript中，获取数组中每个属性的值有多种方法。以下是三种常用的方法示例代码： 方法一：使用正则表达式和`match`方法 ```javascript const array = ['border-width: 1px', 'border-style: solid', 'border-color: rgb(51, 51, 51)']; const values1 = array.map(item => item.match(/:(.*)/)[1].trim()); console.log(values1); ``` 方法二：使用字符串处理方法`split`和数组解构赋值 ```javascript const array = ['border-width: 1px', 'border-style: solid', 'border-color: rgb(51, 51, 51)']; const values2 = array.map(item => { const [, value] = item.split(':'); return value.trim(); }); console.log(values2); ``` 方法三：使用正则表达式和`exec`方法 ```javascript const array = ['border-width: 1px', 'border-style: solid', 'border-color: rgb(51, 51, 51)']; const regex = /:(.*)/; const values3 = array.map(item => { regex.exec(item); return RegExp.$1.trim(); }); console.log(values3); ``` 这些方法都可以达到相同的效果，提取数组中每个属性的值。你可以根据自己的喜好和项目需求选择其中一种方法。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值