`
ningzhisheng
  • 浏览: 12250 次
  • 性别: Icon_minigender_1
最近访客 更多访客>>
社区版块
存档分类
最新评论

CSS教程6 CSS的Border边框

阅读更多
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设定边框颜色。
  例子

Example Source Code [www.52css.com]
h2 {
    border-style: dashed;
    border-width: 3px;
    border-left-width: 10px;
    border-right-width: 10px;
    border-color: red;
}
  设定红色样式为dashed的边框,上下边框宽度为3px,而左右为10px(后面的属性覆盖了前面)。
分享到:
评论

相关推荐

    【 border虚线】CSS border虚线边框属性教程

    学习之路不可停止,最近在研究CSS,今天爱站技术频道的小编就給你们带来这篇CSS border虚线边框属性教程,教大家如何使用css制作网页中的虚线,巩固CSS border属性使用方法,感兴趣的同学可以参考一下。

    纯CSS3炫酷元素边框线条动画特效

    本文将深入探讨“纯CSS3炫酷元素边框线条动画特效”,这是一种无需JavaScript,仅通过CSS3就能实现的动态边框效果,能够使页面元素的边框自动循环运动,为用户带来独特的交互体验。 首先,CSS3中的关键帧动画(@...

    css制作带箭头的css边框

    ### CSS制作带箭头的CSS边框 #### 知识点概述 本示例通过纯CSS技术实现了一个带有箭头的边框效果,无需使用任何背景图片,这为网页设计提供了一种轻量级且易于维护的方法。此方法主要利用了CSS中的伪元素以及边框...

    CSS3边框动画

    CSS3中的`border`属性允许我们为元素定义边框的宽度、样式和颜色。通过结合`transition`和`animation`属性,我们可以创造出各种动态的边框效果。`transition`用于平滑地改变一个或多个属性,而`animation`则可以定义...

    css 边框上如何写入文字?

    ### CSS边框上写入文字的方法 #### 一、引言 在网页设计与开发过程中,经常需要通过CSS实现各种视觉效果,其中一种常见的需求就是在边框上添加文字。这不仅可以美化界面,还能提高用户体验。本文将详细介绍如何利用...

    纯css块边框流动线条效果

    用css实现边框流动光线效果.........................................................................................

    边框动画特效,css3实现。效果预览。border-transition.html

    边框动画特效,css3实现。效果预览。

    纯CSS3按钮边框线条动画特效

    在CSS3中,我们可以使用`border`属性来定义元素的边框,包括宽度(border-width)、样式(border-style)和颜色(border-color)。而`animation`属性则允许我们定义一个关键帧序列,以创建动态效果。这些关键帧可以...

    炫酷绚丽的CSS3 SVG文字边框动画特效

    本文将详细解析"炫酷绚丽的CSS3 SVG文字边框动画特效",并探讨如何利用这两种技术实现这样的效果。 首先,CSS3(Cascading Style Sheets Level 3)是CSS的最新版本,提供了丰富的样式控制和动画功能。在这个特效中...

    李炎恢HTML_CSS教程.pdf

    * CSS3边框图片效果:border-image、border-radius * CSS3变形效果:transform、transition * CSS3过渡效果:transition、animation * CSS3动画效果:animation、keyframe 布局和排版 * CSS传统布局:块级元素、...

    css3系列教程(边框半径和圆角).rar

    这个“css3系列教程(边框半径和圆角)”文档应该详细解释了如何运用`border-radius`属性,以及在实际项目中如何优化其使用。通过阅读文档,你将能够熟练掌握这一功能,提升你的网页制作技巧。同时,提供的下载说明和...

    CSS border.docx CSS border.docx

    CSS 中的 border-style 属性用于设置元素所有边框的样式,或者单独地为各边设置边框样式。只有当这个值不是 none 时边框才可能出现。border-style 属性的值可以是 none、hidden、dotted、dashed、solid、double、...

    CSS教程(CHM格式),含多个css教程

    2. **CSS3新特性**:CSS3引入了许多新特性,如多列布局(column-count和column-gap)、边框半径(border-radius)、渐变(linear-gradient和radial-gradient)、阴影(box-shadow和text-shadow)以及动画(@...

    CSS动画|hover动画|border动画

    css动画,hover触发border动画

    css3(border-radius)边框圆角详解

    CSS3 中的 border-radius 属性可以生成圆角边框,无需使用图片背景图案,从而简化了网页设计的过程。下面对 border-radius 属性进行详细介绍。 一、border-radius 属性 border-radius 属性是 CSS3 中用于生成圆角...

    border.css

    该css样式用于解决移动端1像素边框问题。问题分析:有些手机的屏幕分辨率较高,是2-3倍屏幕。css样式中border:1px solid red;在2倍屏下,显示的并不是1个物理像素,而是2个物理像素。为了解决这个问题,引入border....

    WEB2.0圆形边框css做法.rar

    首先,CSS3引入了新的边框属性,如`border-radius`,这使得我们可以创建圆角边框,进而实现圆形元素。在CSS中,`border-radius`属性接受长度值,用来指定边框的圆角半径。例如,要创建一个直径为100px的圆形,我们...

    如何使用CSS的border属性来设置边框样式

    如何使用CSS的border属性来设置边框样式如何使用CSS的border属性来设置边框样式如何使用CSS的border属性来设置边框样式如何使用CSS的border属性来设置边框样式如何使用CSS的border属性来设置边框样式如何使用CSS的...

    css-border-effects.zip

    6. **边框图片**:`border-image`属性允许使用图像作为边框,提供了一种创建复杂边框效果的方法。它可以配合`border-image-source`、`border-image-slice`等属性一起使用。 7. **边框动画**:结合CSS的`transition`...

    CSS3学习之边框(Border).docx

    在CSS3中,边框(Border)的样式和功能得到了显著增强,提供了更多创新和富有表现力的特性。首先,让我们来详细了解CSS3中的边框新特性。 1. **Border-color**:在CSS3中,`border-color`允许你单独设置边框的四个...

Global site tag (gtag.js) - Google Analytics