`
lokvin
  • 浏览: 164857 次
  • 性别: Icon_minigender_1
  • 来自: 地球
文章分类
社区版块
存档分类
最新评论

css border property

阅读更多
The CSS border properties define the borders around an element.

border 有如下属性

border-width
border-style
border-color

上下左右的 border-style 和顺序相关。

The border-style property can have from one to four values.

    * border-style:dotted solid double dashed;
          o top border is dotted
          o right border is solid
          o bottom border is double
          o left border is dashed

    * border-style:dotted solid double;
          o top border is dotted
          o right and left borders are solid
          o bottom border is double

    * border-style:dotted solid;
          o top and bottom borders are dotted
          o right and left borders are solid

    * border-style:dotted;
          o all four borders are dotted


可以简写

border:5px solid red;

When using the border property, the order of the values are:

    * border-width
    * border-style
    * border-color

具体参见:http://www.w3schools.com/css/css_border.asp

分享到:
评论

相关推荐

    css-border-property:边框属性的解析器和字符串化器

    var border = require ( 'css-border-property' ) border . parse ( '1px solid #eee' ) /* [ { property: 'border-width', value: '1px' }, { property: 'border-style', value: 'solid' }, { property: '...

    CSS和CSS3思维导图(xmind版)

    CSS语法由三部分构成:选择器、属性和值: selector {property: value} CSS3 是最新的 CSS 标准。 css3比css多了一些样式设置而已。 css3是向前兼容的,也就是说,css中有效的code在css3也有效。 一个css与css3...

    div+css div+css精通CSS

    CSS的基本语法由选择器(Selector)、属性(Property)和值(Value)三部分组成,其基本结构为: ```css Selector { property: value; } ``` ### 层叠顺序(Cascading Order) 当多个样式规则同时应用于同一元素...

    CSS3边框动画

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

    CSS Quick Syntax Reference

    How to use CSS property references like universal values, visual media, paged media, and more Who this book is for This book is a handy, pocket quick syntax reference for experienced CSS developers ...

    css中文手册 css样式表

    盒模型是理解CSS布局的关键,包括内容区域(Content)、内边距(Padding)、边框(Border)和外边距(Margin)。盒模型分为两种:标准盒模型(W3C盒模型)和IE盒模型,差异在于边框和内边距是否计入元素宽度。 **三...

    CSS.chm (css帮助文档 )

    CSS盒模型是每个HTML元素呈现为一个矩形框,包括内容区域(Content)、内边距(Padding)、边框(Border)和外边距(Margin)。理解盒模型对于布局至关重要。 **五、CSS布局** 1. **流体布局**:基于相对单位,如...

    css教程css理解

    - **CSS框模型**: 包括边距(margin)、边界(padding)、边框(border)和内容(content)。 - **CSS定位**: 有静态(static)、相对(relative)、绝对(absolute)和固定(fixed)等多种定位方式。 - **CSS高级功能**: 如响应式...

    Css3.0完全手册(集成了CSS2所有语法)

    通过定义`transition-duration`, `transition-timing-function`, `transition-delay`和`transition-property`,可以控制元素从一个样式转换到另一个样式的速度和方式。而关键帧动画(@keyframes)则允许自定义整个...

    css缩写的规则

    ### CSS缩写规则详解 #### 一、引言 CSS(Cascading Style Sheets)是一种用于定义HTML文档外观的语言,它让网页设计更加灵活多变。在实际开发过程中,合理运用CSS缩写规则不仅能减少代码量,提高开发效率,还能使...

    css实例

    CSS3是CSS的最新版本,引入了许多新特性,如阴影(Box Shadow)、渐变(Gradients)、圆角(Border Radius)、多列布局(Multi-column Layout)以及Flexbox(弹性盒子布局)和Grid布局。这些工具极大地丰富了网页...

    CSS使用通用速成手册

    CSS盒模型是理解元素尺寸的关键,包括content(内容)、padding(内边距)、border(边框)和margin(外边距)。默认的盒模型是W3C盒模型,元素宽度=content+padding+border,IE盒模型(quirks模式)则将width视为...

    css3最新鼠标划过样式

    - 鼠标悬停时,可以通过改变`border-radius`来实现元素形状的动态变化,如从矩形变为圆形。 7. **自定义字体和文字效果**: - 使用`@font-face`规则引入自定义字体,配合`text-shadow`和`text-decoration`,可以...

    CSS快速入门 中文 手册

    - **盒模型(Box Model)**:CSS中元素被视为矩形框,包括content、padding、border和margin。 - **选择器优先级**:ID选择器 > 类选择器 > 标签选择器 > 通配符选择器;内联样式 > 内部样式 > 外部样式。 - **响应...

    css基础教程 css使用方法

    - **盒模型**:CSS中的每个元素都可视为一个盒子,包括内容(content)、内边距(padding)、边框(border)和外边距(margin)。 - **定位**:通过`position`属性(如`static`、`relative`、`absolute`、`fixed`)...

    CSS入门教程-自学必备

    3. **盒模型**: CSS盒模型是理解布局的基础,它包括元素的content、padding、border和margin。理解盒模型有助于精确控制元素的大小和位置。 4. **定位**: CSS提供了多种定位机制,包括静态定位、相对定位、绝对定位...

    CSS语法

    其中,`selector`是HTML元素标签,`property`是CSS属性,如`color`、`font-size`等,`value`是该属性对应的值。 ### 2. CSS选择器 - **类型选择器**:如`p`、`div`等,选择所有这种类型的元素。 - **ID选择器**:...

    css3滑动放大特效

    此外,还可以结合其他CSS3属性来增强效果,如`opacity`实现透明度变化,或者`border-radius`调整元素边框的圆角,让放大效果更自然。同时,可以通过调整`transition-duration`、`transition-timing-function`和`...

    css设计艺术字

    10. **CSS变量**:使用`var()`函数和`--custom-property-name`定义自定义CSS变量,方便管理和维护设计风格。 11. **响应式设计**:使用媒体查询`@media`确保艺术字在不同设备和屏幕尺寸上的适配和展示。 12. **...

Global site tag (gtag.js) - Google Analytics