小贝学习CSS边框与边界
来源:互联网 发布:qq好友提取软件 编辑:程序博客网 时间:2024/05/19 04:06
CSS边框与边界
1、CSS 边框属性
CSS边框属性允许你指定一个元素边框的样式和颜色。
1.1、边框样式
边框样式属性指定要显示什么样的边界。
Remark border-style属性用来定义边框的样式
1.2、边框宽度
您可以通过 border-width 属性为边框指定宽度。
为边框指定宽度有两种方法:可以指定长度值,比如 2px 或 0.1em;或者使用 3 个关键字
之一,它们分别是 thin 、medium(默认值) 和 thick。
注意:CSS 没有定义 3 个关键字的具体宽度,所以一个用户代理可能把 thin 、medium 和
thick 分别设置为等于 5px、3px 和 2px,而另一个用户代理则分别设置为 3px、2px 和
1px。
1.3、边框颜色
border-color属性用于设置边框的颜色。可以设置的颜色:
name - 指定颜色的名称,如 "red"
RGB - 指定 RGB 值, 如 "rgb(255,0,0)"
Hex - 指定16进制值, 如 "#ff0000"
您还可以设置边框的颜色为"transparent"。
注意: border-color单独使用是不起作用的,必须得先使用border-style来设置边框样式。
1.4、边框-简写属性
上面的例子用了很多属性来设置边框。
你可以在"border"属性中设置:
border-width
border-style (required)
border-color
2、CSS Padding(内边界)
CSS Padding(填充)属性定义元素边框与元素内容之间的空间。
当元素的 Padding(填充)(内边距)被清除时,所"释放"的区域将会受到元素背景颜色的填充。
单独使用填充属性可以改变上下左右的填充。缩写填充属性也可以使用,一旦改变一切都改变。
3、CSS Margin(外边距)
CSS Margin(外边距)属性定义元素周围的空间。
margin清除周围的元素(外边框)的区域。margin没有背景颜色,是完全透明的
margin可以单独改变元素的上,下,左,右边距。也可以一次改变所有的属性。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="keywords" content="CSS边框与边界"/><meta name="description" content="CSS边框与边界"/><meta name="author" content="xiaobei QQ:2801616735"/><title>CSS边框与边界</title></head><body><ul> <li>边框</li> <li>内边界</li> <li>外边界</li> </ul> <h2>1、边框border</h2> <p style="border-color:red; border-style:dashed; border-width:1px;">border-style<br/>border-color<br/>border-width</p> <hr/> <h2>2、边框方向设置</h2> <p style="border-style:dashed; border-color:red green blue orange; height:50px;"> border-color:red green blue orange; </p> <hr/> <h2>2.1、边框方向设置</h2> <p style="border-style:dashed; border-color:red green; height:50px;"> border-color:red green; </p> <hr/> <h2>2.2、边框方向设置</h2> <p style="border-style:dashed; border-color:red green blue; height:50px;"> border-color:red green blue; </p> <hr/> <h2>3、内边界</h2> <table bgcolor="#FF0000" border="0" width="200" height="150" cellpadding="0" cellspacing="0"> <tr><td valign="top" style="padding-top:20px; padding-left:20px;">内边界</td></tr> </table> <hr/> <h2>4、外边界</h2> <table bgcolor="#FF0000" border="0" width="200" height="150" cellpadding="0" cellspacing="0"> <tr><td valign="top" style="margin-top:20px; margin-left:20px;">内边界</td></tr> </table></body></html>
0 0
- 小贝学习CSS边框与边界
- 15-CSS边框与边界
- CSS学习(四)——边框与边界
- CSS-----边框宽度,边框颜色,边框风格,边界距
- CSS边界与填充
- 【CSS学习】CSS 边框
- CSS边框与背景
- 《CSS权威指南》学习笔记之框与边框
- CSS 边框样式-学习笔记
- CSS学习之 边框样式
- CSS的边框与补白
- CSS边框与背景[上]
- CSS边框与背景[下]
- css去掉select边框和小三角
- css去掉select边框和小三角
- 小贝学习CSS-字体
- 小贝学习CSS滤镜
- 【CSS学习】CSS中margin边界叠加问题及解决方案
- 数据结构概述 第三章
- UVA 232 字符串处理
- 9种排序算法性能之比较之----归并排序
- BaseAnimation是基于开源的APP,致力于收集各种动画效果(最新版本1.3)
- vtk相机控制
- 小贝学习CSS边框与边界
- 测试
- 密码传输问题
- 从100PV到1亿级PV网站架构演变
- Hadoop MapReduce应用案例——排序
- 常见javascript 兼容工具函数封装
- Android 自己 容易犯的错误
- [Linux]检测socket异常断开--keepalive
- Android——使用多状态按钮ToggleButton(自己动手 丰衣足食)