文档章节

图解 CSS (2): border - 边框

涂孟超
 涂孟超
发布于 2014/09/26 15:31
字数 318
阅读 14
收藏 0

样式表可以是外部的、内联的、嵌入的、链接的, 譬如下面的内联样式将作用于所有 ID=Test 的标签:
<style> #Test {...} </style>


border
border-width
border-style
border-color

border-top
border-top-width
border-top-style
border-top-color

border-bottom
border-bottom-width
border-bottom-style
border-bottom-color

border-left
border-left-width
border-left-style
border-left-color

border-right
border-right-width
border-right-style
border-right-color

border-collapse
border-spacing

 
 
 
 
 

 

 

  

border: 宽度 样式 颜色;



border 的宽度有三个常数值: medium(默认)、thick(粗)、thin(细).





自定义宽度最麻烦的就是宽度的单位(in、cm、mm、em、ex、pt、pc、px), 我喜欢用像素(px).



border 的样式: none(默认)、solid、double、dotted、dashed、groove、ridge、inset、outset.











后四种 3D 样式, 如果使用默认的 3D 着色颜色效果会更好:






指定颜色有五种方法(譬如蓝色): RGB(0,0,255); #0000FF; #00F; Blue; RGB(0,0,100%).







border: 宽度 样式 颜色; 可以从后向前省略, 也可以用 border-width、border-style、border-color 分开表达.



可以用 border-top、border-bottom、border-left、border-right 分别描述四个边;
并可用 border-top-width、border-top-style、border-top-color 等描述各边的: 宽度、样式、颜色.



上面列出的边框相关的样式还有: border-collapse、border-spacing; 这是表格相关的.

border-collapse 有两个常数值: collapse、separate, 决定边框是否分开:




border-spacing: 用来设置表格中单元格的间距; 这个好像 IE(8) 不支持, 不过这和表格的 cellspacing 属性是一样的.

本文转载自:http://www.cnblogs.com/del/archive/2009/01/28/1381204.html

涂孟超
粉丝 12
博文 2011
码字总数 14107
作品 0
深圳
程序员
私信 提问
图解CSS的padding,margin,border属性

图解CSS的padding,margin,border属性(详细介绍及举例说明) 图解CSS的padding,margin,border属性 W3C 组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的...

巴顿
2013/09/05
184
0
精通HTML表格的使用

制作网页表格,需要使用table标签。 用好table标签并不容易,复杂的表格做起来就很麻烦,比如下面这张表。 我整理了一些HTML表格的高级语法。你可以看看,自己会用多少? 1. 标题和内容描述 ...

阮一峰
2009/05/10
0
0
QSS知识总结

QT样式表单 QT的样式表单允许我们在对程序不做任何代码上的更改的情况下轻松改变应用程序的外观。 其思想来源于网页设计中的CSS,即可以将功能设计和美学设计分开。 它的语法和概念和HTML CS...

tiankefeng0520
2014/05/27
0
0
CSS入门级学习

css入门学习 1:认识CSS   1.1:css简介,css全称是层叠样式表,Cascading style sheets   1.2:css的作用,主要是用于定义html内容在浏览器内的显示样式,如文字大小,颜色,字体加粗等 ...

别叫小伙
2016/08/17
0
0
CSS3 边框(Borders)

CSS3 Borders 用CSS3,你可以创建圆角边框,添加阴影框,并作为边界的形象而不使用设计程序,如Photoshop。 在本章中,您将了解以下的边框属性: border-radius box-shadow border-image 浏览...

wybo521
2016/01/23
47
0

没有更多内容

加载失败,请刷新页面

加载更多

nginx学习笔记

中间件位于客户机/ 服务器的操作系统之上,管理计算机资源和网络通讯。 是连接两个独立应用程序或独立系统的软件。 web请求通过中间件可以直接调用操作系统,也可以经过中间件把请求分发到多...

码农实战
今天
5
0
Spring Security 实战干货:玩转自定义登录

1. 前言 前面的关于 Spring Security 相关的文章只是一个预热。为了接下来更好的实战,如果你错过了请从 Spring Security 实战系列 开始。安全访问的第一步就是认证(Authentication),认证...

码农小胖哥
今天
10
0
JAVA 实现雪花算法生成唯一订单号工具类

import lombok.SneakyThrows;import lombok.extern.slf4j.Slf4j;import java.util.Calendar;/** * Default distributed primary key generator. * * <p> * Use snowflake......

huangkejie
昨天
12
0
PhotoShop 色调:RGB/CMYK 颜色模式

一·、 RGB : 三原色:红绿蓝 1.通道:通道中的红绿蓝通道分别对应的是红绿蓝三种原色(RGB)的显示范围 1.差值模式能模拟三种原色叠加之后的效果 2.添加-颜色曲线:调整图像RGB颜色----R色增强...

东方墨天
昨天
11
1
将博客搬至CSDN

将博客搬至CSDN

算法与编程之美
昨天
13
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部