`

dashed与dotted 区别

    博客分类:
  • html
 
阅读更多
最近的一个页面中碰到的,本来想用 border 来模拟设计图的虚线效果,但是很明显 border 效果不如设计图来的好看。顺便研究了下 dashed 和 dotted 的区别。

首先,从字面上来理解,dashed 和 dotted 都是指“虚线”,他们的不同在于:

dashed:来自 dash(破折号),由 dash 组成的虚线
dotted:来自 dot (点),由 dot 组成的虚线,也称点线



.b6 {
border: 2px dotted #000;
padding-top: 0;
}
.b6 .inner {
border: 1px solid #9c9c9c;
width: 100%;
height: 100%;
margin: -1px;
position: relative;
z-index: 100;
}
分享到:
评论

相关推荐

    CSS dashed和dotted的区别

    顺便研究了下 dashed 和 dotted 的区别。 首先,从字面上来理解,dashed 和 dotted 都是指“虚线”,他们的不同在于: dashed:来自 dash(破折号),由 dash 组成的虚线dotted:来自 dot (点),由 dot 组成的虚线...

    SeparatorView-适用于Android的分割线View。.zip

    用于在任意两个view间添加分割线属性attributevaluedocumentationdefault valueapp:lineStyle[solid, dashed, dotted]defines how the line should appear.solidapp:lineColor[color]defines the color of the line....

    phone-prettify:电话号码的简单Javascript格式化程序

    import { uglify , dashed , dotted , normalize , longDistance , extensionNumber } from 'phone-prettify' ; // Now you can use each as a function dashed ( phone ) ; dotted ( phone2 ) ; 普通JS pPretty =...

    GraphicsEditor:使用Java的图形编辑器软件

    - Modifying various characteristics of an object such as its shape, size, location, color, fill style, line width, line style (dashed, dotted, continuous), etc. can be changed. For tex

    CSS3带阴影动画效果的手绘卡通风格按钮特效.zip

     <button class='dotted thick'>Dotted Thick  <button class='dashed thick'>Dashed Thick  <button class='lined thin'>Lined Thin  <button class='dotted thin'>Dotted Thin  <button class='...

    CSS-day03.pptx

    边框的样式包括 none、solid、dashed 和 dotted 等。可以单独设置上、下、左、右四个边框的样式和宽度。 内边距(padding) 内边距是边框和内容之间的距离,用于设置盒子的内部空间。padding 属性用于设置内边距,...

    border虚线样式(style)

    虚线边框的创建主要通过设置`border-style`属性为`dashed`或`dotted`。`dashed`用于创建虚线边框,而`dotted`则用于创建点状边框。以下是一个基本示例: ```css element { border-style: dashed; } ``` 在这个...

    详解HTML设置边框的三种方式

    border-style: solid dashed dotted; border-color:red green blue; /*分别为 上→左右→下 边框设置*/ 1、边框的组成: border: 1px solid #fff 参数: 第一个是边框的粗细 1px 第二个是边框的样式 solid 实线 ...

    border虚线(带你了解冷门却实用的特性)

    `border-style`接受多种预定义的值,如`solid`(实线)、`dashed`(虚线)和`dotted`(点线)。要创建虚线边框,只需要将`border-style`的值设置为`dashed`即可。例如: ```css div { border-style: dashed; } ```...

    Dreamweaver CS6之Div+CSS盒模型.pdf

    `style`决定边框样式,如dashed、dotted、double等。同样,这些属性可以在“边框”选项卡中设置。 4. **Padding(填充)** Padding是内容区域与边框之间的空间。用户可以独立设置上下左右四个方向的填充,或者统一...

    山东春考网页制作 模拟题11月份- 题.docx

    4. 边框设置:border-style 属性用于设置边框的样式,solid、dashed、dotted 等是其属性值。 三、网页布局技术 1. 布局方式:网页布局技术主要分为框架布局、表格布局、DIV 层布局等方式。 2. 布局结构图:网页...

    表格边框样式大全

    **定义与实现:** 单实线边框是最常见的一种表格边框类型,其特点是线条简单明了,易于阅读。在HTML中,可以通过`<table>`标签结合CSS属性来实现。 **代码示例:** ```html 单实线边框表格 ``` ...

    【前端】盒子模型的边框样式属性和应用技巧讲解.docx

    首先,`border-style`属性用于定义边框的视觉表现,它有多个可选的样式值,如`none`(无边框)、`solid`(实线)、`dashed`(虚线)、`dotted`(点线)和`double`(双实线)。例如,要创建一个双实线边框,我们可以...

    CSS border.docx CSS border.docx

    border-style 属性的值可以是 none、hidden、dotted、dashed、solid、double、groove、ridge、inset、outset、initial 或 inherit。 1. none: 定义无边框。 2. hidden: 与 "none" 相同,不过应用于表时除外,对于表...

    HTML表格标记教程(48):CSS修饰表格

    4. 点线边框表格:使用dotted样式,并注意dotted线最小象素为2。例如,table样式为border: green dotted; border-width: 2 0 0 2,td样式为border: green dotted; border-width: 0 2 2 0。 5. 双线边框表格:使用...

    Web程序开发:第11章 框模型.pdf

    例如,`border-width`用于设定边框的厚度,`border-style`用于设定边框的样式(如solid、dotted、dashed等),`border-color`用于设定边框颜色。边框属性还可以通过简写属性如`border`一次性设置所有边,或者单独...

    custom DataGridView Combobox(自定义)

    enum LineType { Solid, Dashed, Dotted, DashDot } ``` 2. **创建线型显示文本**:为每个枚举值创建一个对应的显示文本,可以使用扩展方法实现: ```csharp public static class LineTypeExtensions { public...

    边框编码效果

    这个属性可以一次性设置边框的样式(如solid、dashed、dotted等)、宽度和颜色。例如: ```css .myElement { border: 1px solid #000; /* 1像素宽的黑色实线边框 */ } ``` 此外,还可以分别设置各个边框的样式,...

Global site tag (gtag.js) - Google Analytics