`
yacole
  • 浏览: 241018 次
  • 性别: 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-...

    CSS3 边框 (2).docx

    在CSS3中,边框(Border)的样式和效果得到了极大的扩展,允许开发者实现更为复杂的视觉效果,无需依赖外部图像编辑软件。以下是关于CSS3边框的一些关键知识点: 1. **边框颜色(Border Color)** CSS3允许设置...

    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圆角阴影边框的实现.txt

    ### CSS圆角阴影边框的实现 #### 一、引言 在网页设计中,一个美观且具有吸引力的用户界面往往能给用户带来更好的体验。其中,为元素添加圆角和阴影是提升视觉效果的常见手段之一。本文将详细介绍如何使用CSS来实现...

    HTML + CSS 光影按钮样式

    1. **边框(Borders)**:为按钮设置边框宽度、样式和颜色,增加立体感。 ```css .shadow-button { border: 2px solid #333; /* 边框宽度、样式和颜色 */ } ``` 2. **内阴影(Box Shadow)**:使用CSS的`box-...

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

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

    css2教程

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

    div+css div+css精通CSS

    - **边框(Borders)**:如`border-width`、`border-style`、`border-color`等。 掌握这些CSS属性及其用法,将极大地提升网页的设计水平和用户体验。通过div+css的组合,开发者能够创建出既美观又功能强大的现代...

    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...

Global site tag (gtag.js) - Google Analytics