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(后面的属性覆盖了前面)。
边框可以运用到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(后面的属性覆盖了前面)。
发表评论
-
CSS教程17 CSS的优先级特性Specificity
2010-07-22 12:00 744如果同个元素有两个或以上冲突的CSS规则,浏览器有一些基本的规 ... -
CSS教程16 CSS的伪元素Pseudo Elements
2010-07-22 11:59 685伪元素吸附在选择上和pseudo classes伪类很像,像这 ... -
CSS教程15 CSS的At-Rules@规则
2010-07-22 11:58 722At-rules分装不同的CSS规 ... -
CSS教程14 CSS网页布局Page Layout
2010-07-22 11:57 835使用CSS布局非常简单,如果你习惯使用tables布局,可能开 ... -
CSS教程13 CSS的display属性
2010-07-22 11:56 757操作HTML元素的诀窍在于明白它们工作的方法在于没有特定的形式 ... -
CSS教程12 CSS的Background Images 背景图片
2010-07-22 11:56 954背景图片Background Images有许多属性可以操作。 ... -
CSS教程11 CSS的属性缩写
2010-07-22 11:55 658一些CSS属性允许使用一串值代替许多属性,值使用空格分开。 ... -
CSS教程10 CSS的Pseudo Classes 伪类
2010-07-22 11:54 609请你注意一些CSS伪类属性不被所有浏览器支持,但有四个伪类可以 ... -
CSS教程9 CSS的Grouping and Nesting分组和嵌套
2010-07-22 11:53 465Grouping 分组 当许多选择器有同样属性时,可以使 ... -
CSS教程8 CSS的Class以及ID选择器
2010-07-22 11:52 668前面的学习我们仅仅使用HTML选择器(在HTML页面里为htm ... -
CSS教程7 CSS属性结合起来使用
2010-07-22 11:51 717如果你学完HTML初级教程即可学习CSS初级教程,使用CSS处 ... -
CSS教程5 Margin和Padding
2010-07-22 11:45 617margin和padding用来隔开元素,margin是隔开元 ... -
CSS教程4 CSS的Text 文本
2010-07-22 11:44 711有一系列属性可以改变网页文字的大小和形状,概要如下: fon ... -
CSS教程3 CSS的color颜色
2010-07-22 11:43 1080css可以处理16,777,216颜色,可以使用名字、rgb ... -
CSS教程2 选择器 、属性、值
2010-07-22 11:41 727HTML有标签,CSS有选择器。选择器是给内部和外部样式里面的 ... -
CSS教程1CSS的应用
2010-07-22 11:37 682CSS教程 1、CSS的应用 一、In-line 行内 ...
相关推荐
学习之路不可停止,最近在研究CSS,今天爱站技术频道的小编就給你们带来这篇CSS border虚线边框属性教程,教大家如何使用css制作网页中的虚线,巩固CSS border属性使用方法,感兴趣的同学可以参考一下。
本文将深入探讨“纯CSS3炫酷元素边框线条动画特效”,这是一种无需JavaScript,仅通过CSS3就能实现的动态边框效果,能够使页面元素的边框自动循环运动,为用户带来独特的交互体验。 首先,CSS3中的关键帧动画(@...
### CSS制作带箭头的CSS边框 #### 知识点概述 本示例通过纯CSS技术实现了一个带有箭头的边框效果,无需使用任何背景图片,这为网页设计提供了一种轻量级且易于维护的方法。此方法主要利用了CSS中的伪元素以及边框...
CSS3中的`border`属性允许我们为元素定义边框的宽度、样式和颜色。通过结合`transition`和`animation`属性,我们可以创造出各种动态的边框效果。`transition`用于平滑地改变一个或多个属性,而`animation`则可以定义...
### CSS边框上写入文字的方法 #### 一、引言 在网页设计与开发过程中,经常需要通过CSS实现各种视觉效果,其中一种常见的需求就是在边框上添加文字。这不仅可以美化界面,还能提高用户体验。本文将详细介绍如何利用...
用css实现边框流动光线效果.........................................................................................
边框动画特效,css3实现。效果预览。
在CSS3中,我们可以使用`border`属性来定义元素的边框,包括宽度(border-width)、样式(border-style)和颜色(border-color)。而`animation`属性则允许我们定义一个关键帧序列,以创建动态效果。这些关键帧可以...
本文将详细解析"炫酷绚丽的CSS3 SVG文字边框动画特效",并探讨如何利用这两种技术实现这样的效果。 首先,CSS3(Cascading Style Sheets Level 3)是CSS的最新版本,提供了丰富的样式控制和动画功能。在这个特效中...
* CSS3边框图片效果:border-image、border-radius * CSS3变形效果:transform、transition * CSS3过渡效果:transition、animation * CSS3动画效果:animation、keyframe 布局和排版 * CSS传统布局:块级元素、...
这个“css3系列教程(边框半径和圆角)”文档应该详细解释了如何运用`border-radius`属性,以及在实际项目中如何优化其使用。通过阅读文档,你将能够熟练掌握这一功能,提升你的网页制作技巧。同时,提供的下载说明和...
CSS 中的 border-style 属性用于设置元素所有边框的样式,或者单独地为各边设置边框样式。只有当这个值不是 none 时边框才可能出现。border-style 属性的值可以是 none、hidden、dotted、dashed、solid、double、...
2. **CSS3新特性**:CSS3引入了许多新特性,如多列布局(column-count和column-gap)、边框半径(border-radius)、渐变(linear-gradient和radial-gradient)、阴影(box-shadow和text-shadow)以及动画(@...
css动画,hover触发border动画
CSS3 中的 border-radius 属性可以生成圆角边框,无需使用图片背景图案,从而简化了网页设计的过程。下面对 border-radius 属性进行详细介绍。 一、border-radius 属性 border-radius 属性是 CSS3 中用于生成圆角...
该css样式用于解决移动端1像素边框问题。问题分析:有些手机的屏幕分辨率较高,是2-3倍屏幕。css样式中border:1px solid red;在2倍屏下,显示的并不是1个物理像素,而是2个物理像素。为了解决这个问题,引入border....
首先,CSS3引入了新的边框属性,如`border-radius`,这使得我们可以创建圆角边框,进而实现圆形元素。在CSS中,`border-radius`属性接受长度值,用来指定边框的圆角半径。例如,要创建一个直径为100px的圆形,我们...
如何使用CSS的border属性来设置边框样式如何使用CSS的border属性来设置边框样式如何使用CSS的border属性来设置边框样式如何使用CSS的border属性来设置边框样式如何使用CSS的border属性来设置边框样式如何使用CSS的...
6. **边框图片**:`border-image`属性允许使用图像作为边框,提供了一种创建复杂边框效果的方法。它可以配合`border-image-source`、`border-image-slice`等属性一起使用。 7. **边框动画**:结合CSS的`transition`...
在CSS3中,边框(Border)的样式和功能得到了显著增强,提供了更多创新和富有表现力的特性。首先,让我们来详细了解CSS3中的边框新特性。 1. **Border-color**:在CSS3中,`border-color`允许你单独设置边框的四个...