`
yacole
  • 浏览: 239024 次
  • 性别: Icon_minigender_1
  • 来自: 浙江科技学院
社区版块
存档分类
最新评论

CSS初级教程(六)- CSS Borders 边框

阅读更多

CSS Borders 边框

边框可以运用到body里的大部分HTML元素。

制作一个元素的边框,你需要border-style边框样式。值可以是: solid, dotted, dashed, double, groove, ridge, inset and outset,具体样式大家可以实际下。

border-width设定宽度,通常使用pixels即单位是px,同样有四边属性:border-top-width, border-right-width, border-bottom-width and border-left-width

border-color设定边框颜色。

例子

css 代码
  1. h2 {   
  2.  border-styledashed;   
  3.  border-width3px;   
  4.  border-left-width10px;   
  5.  border-right-width10px;   
  6.  border-colorred;   
  7. }   
设定红色样式为dashed的边框,上下边框宽度为3px,而左右为10px(后面的属性覆盖了前面)。
分享到:
评论

相关推荐

    前端开源库-tachyons-borders

    **Tachyons-Borders: 超速子边界的前端CSS模块** Tachyons-Borders是一款基于Tachyons框架的开源库,专为前端开发者设计,以实现高效、快速的边界样式化。Tachyons是一系列小而独立的CSS模块,它的核心理念是通过...

    CSS小练习01-PS提示框

    1. **边框(Borders)**:提示框通常有清晰的边框,可以通过`border-width`、`border-style`和`border-color`设置。例如,一个灰色的实线边框可以这样写: ```css .tooltip { border: 1px solid gray; } ``` ...

    equal-height-borders:Bootstrap列上的等高边框

    标题“equal-height-borders:Bootstrap列上的等高边框”指的是如何在Bootstrap的网格系统中实现列的等高边框,使每一列的边界在同一水平线上,即使内容量不同。 描述中提到的“可以使用两种不同的方法在引导程序列...

    html 版 CSS中文速查手册

    outlineoutline-coloroutline-styleoutline-width 边框 Borders borderborder-colorborder-styleborder-widthborder-topborder-top-colorborder-top-styleborder-top-widthborder-rightborder-right-colorborder-...

    css2中文手册 学习css的必选

    边框 Borders border border-color border-style border-width border-top border-top-color border-top-style border-top-width border-right border-right-color border-right-style border-right-width border...

    第17章 CSS边框与背景[上]

    在本章中,我们将深入探讨CSS(层叠样式表)中的一个重要组成部分——边框与背景。边框和背景是网页设计中不可或缺的元素,它们能够为网页内容增添视觉吸引力,帮助区分不同区域,并且可以用来传达信息或者创建独特...

    第16章 CSS边框与边界.pdf

    本章重点讲解的是CSS中的边框(Borders)与边界(Padding & Margin)的使用,它们是控制网页元素视觉效果的关键要素。 16.1 CSS 中边框的使用 边框(Border)允许我们为元素添加不同样式和颜色的线条。CSS提供了...

    css教程、学习文档、参考资料

    CSS教程是前端开发者入门和进阶的重要资源,无论是初学者还是经验丰富的开发者,都能从中受益。 **一、CSS基本概念** CSS通过选择器与规则来控制HTML或XML文档的呈现。选择器定位需要样式的元素,而规则由属性和值...

    css2教程

    - **边框(Borders)**: CSS2引入了边框颜色、样式和宽度,可以组合使用创建各种边框效果,如虚线边框(`border-style: dashed`)和圆角边框(`border-radius`)。 ### 6. 字体和文本 CSS2允许更精细的字体控制,...

    hexagon:css3 hexagon with rounded corners and borders. css3六边形,可设置border与border-radius

    带有圆角和边框的css3六角形。 css3六边形,可设置border与border-radius 结果 查看 捕获 大小和边框宽度 您可以按比例更改六边形的大小和边框宽度。 要在此处更改css文件。 -webkit-transform : rotate ( -30 deg ...

    css参考手册(CSS,CSS2.0,CSS3.0)

    《CSS参考手册(CSS, CSS2.0, CSS3.0)》是一份全面涵盖CSS核心技术的资源集合,包括了CSS3.0参考手册、CSS2.0中文手册以及CSS中文完全参考手册三个部分,旨在为学习者提供离线查阅和深入理解CSS规则的便捷途径。...

    郜振宇php职业培训系列讲座008:css边框与背景设置详解与实战.rar

    首先,让我们来了解CSS中的边框(Borders)。边框是元素四周的可见边缘,它可以是实线、虚线、点线,也可以有各种颜色和宽度。通过设置`border-width`,我们可以调整边框的粗细;`border-style`用来定义边框的样式,...

    CSS基础学习胶片

    "CSS快速入门教程_(2).ppt"可能会涵盖CSS的更多实用技巧,如CSS3的新特性,例如媒体查询(media queries)实现响应式设计,以及渐变(gradients)、阴影(shadows)、圆角(borders-radius)等效果的创建。响应式设计能让...

    postcss-adaptive-extra:依赖于 postcss-adaptive,添加基于路径的配置选项

    一个插件,用于计算和生成自适应 css 代码,例如0.5px borders for retina devices rem和0.5px borders for retina devices 。 依赖于添加基于路径的额外选项。 用法 更多见 。 应用程序接口 adaptive-extra...

    CSSAPI中文版.rar

    7. **背景与边框(Backgrounds & Borders)**: 支持多个背景图层、圆角边框、边框图片等。 **五、CSS预处理器和后处理器** 1. **预处理器(Preprocessors)**: 如Sass、Less,允许使用变量、嵌套规则、混合(mixins...

    CSS2.0中文手册

    - **边框(Borders)**: 可以设置边框宽度、样式(实线、虚线等)和颜色。 - **内边距(Padding)**和**外边距(Margin)**: 用于调整元素内容与边框的距离以及元素之间的距离。 **6. 盒阴影(Box Shadow)和文本...

    CSS3基本图形

    6. **径向渐变边框(Radial Gradient Borders)** 结合边框半径和径向渐变,可以创建出具有独特形状的边框,如波纹边框、心形边框等。 7. **旋转与变形(Transforms)** `transform`属性可以对元素进行旋转、缩放...

    CSS控制页面分隔符

    3. **线条(Borders)**:CSS允许我们为元素添加边框,从而直观地创建分隔效果。`border-style` 设置边框样式,如实线、虚线等;`border-width` 控制宽度,`border-color` 设定颜色。 4. **伪元素(Pseudo-elements...

    css3折角分页样式代码

    2. **边框(Borders)**:为了创建折角效果,我们利用了边框的宽度、颜色和样式。通过调整不同的边框属性,可以模拟出纸张的折痕。例如,可以增加一个斜向的边框,然后在悬停状态下改变其宽度,从而制造出折角的感觉...

    CSS 2.0中文手册(含索引)

    7. **边框(Borders)**:可以自定义边框宽度、样式和颜色,以及圆角边框。 8. **列表(Lists)**:控制列表项的符号、间距等。 9. **媒体查询(Media Queries)**:虽然CSS 2.0未引入响应式设计,但其初步的媒体...

Global site tag (gtag.js) - Google Analytics