`
yacole
  • 浏览: 238955 次
  • 性别: 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(后面的属性覆盖了前面)。
分享到:
评论

相关推荐

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

    第16章 CSS边框与边界.pdf

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

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

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

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

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

    实例讲解使用CSS实现多边框和透明边框的方法

    Backgrounds & Borders Level 3 还是一份草案的时候,CSS WG 就在是否支持多重边框的问题进行了大量的探讨,就像是讨论多重背景图片一样。不幸的是,当时认为多重边框的用处并不大,即使需要也可以使用border-image...

    css属性详细值[收集].pdf

    5. CSS Borders Properties(边框属性): - `border`:简写属性,用于同时设置边框的宽度、样式和颜色。 - `border-width`、`border-style`和`border-color`:分别设置边框的宽度、样式(如`solid`、`dashed`)和...

    CSS属性[定义].pdf

    2. `border-spacing`: 设置单元格边框之间的距离,仅在“separated borders”模型中使用。 3. `caption-side`: 设置表格标题的位置,`top` 或 `bottom`。 4. `empty-cells`: 控制是否显示空单元格的边框,`show` 或 ...

    css2.0高级技巧

    2. **边框(Borders)**: - `border`属性用于定义元素的边框样式、宽度和颜色。如`.i01`到`.i03`的输入框,以及`select.s01`的选择器,分别设置了不同样式的边框,增强表单元素的视觉效果。 3. **内边距(Padding...

    HTML5入门(1).pdf

    本文件主要涵盖了HTML5中的CSS3相关属性,特别是与边框(Borders)、背景(Backgrounds)、颜色(Color)、文本效果(Text effects)以及用户界面(User-interface)等相关的样式设定。 首先,我们来看一下边框...

    基于css3实现漂亮便签样式

    5. **边框(Borders)**: 使用`border`属性定义了边框,但特别地,`border-left: 0;`使得便签右侧有一个明显的开口,模拟传统便签的样子。 6. **伪元素(Pseudo Elements)**: `.tags a:before`选择器利用了伪...

    CSS3的新特性介绍

    边框:(Borders)border-color:控制边框颜色,并且有了更大的灵活性,可以产生渐变效果border-image:控制边框图象border-corner-image:控制边框边角的图象border-radius:能产生类似圆角矩形的效果背景(Backgrounds)...

    css3的新特性介绍.rar

    边框:(Borders) 背景(Backgrounds)等介绍

    《HTML5网页设计》课后习题及答案09.docx

    背景和边框(Background and Borders),如渐变、阴影等;文字特效(Text Effects),如文本阴影、文本装饰;多栏布局(Multi-column Layout),使内容自动分栏显示等。 2. CSS3选择器的扩展极大增强了样式控制能力...

    html2canvas实现dashed虚线边框的示例

    `drawDashedBorder`函数接收canvas、边框信息(`borders`)和元素的位置(`parentRect`)作为参数。在此函数中,我们可以遍历边框数组,根据每个边框的方向和位置,使用canvas的`strokeStyle`和`lineDash`属性来...

    《HTML5网页设计》课后习题及答案09.pdf

    这些模块包括:盒子模型(Box Model)、列表模块(List Module)、超链接模块(Hyperlink Module)、语言模块(Language Module)、背景和边框(Background and Borders)、文字特效(Text Effects)、多栏布局...

    CSS3模块的目前的状况分析

    3. **Backgrounds & Borders**(背景与边框):2009年10月15日更新为候选推荐。这一模块扩展了背景图像和边框样式,引入了圆角、阴影和边框图片等特性。 4. **3D Transformations**(3D转换):2009年3月20日草案...

    JavaScript Table行定位效果

    <style type="text/css"> .t{width:100px; border-collapse:collapse;} .t td{border:5px solid #999;} <td>1 <td>1 <td>1 <td>1 <td>1 <td>1 <td>1 <td>1 ...

Global site tag (gtag.js) - Google Analytics