css边框

制作过网页的人都有为画线而烦恼的经历，先来认识一下“Border”（画边框），它是CSS的一个属性，用它可以给能确定范围的HTML标记（如TD、DIV等等）画边框，它可以定义边框线的类型、宽度和颜色，利用这个特性，可以制作一些特殊效果。下面把通过实例来说明其应用技巧。 1、给文本加边框 上面的示例中，给一段文字加了不同的边框，只是为了说明边框线的颜色、粗细是可变的。 第一个边框的CSS代码是：style="border:thin solid red"； “border”后面的三个参数的含义是：边框线的宽度是：thin（细线）；边框线的类型：solid（实线）；边框线的颜色：red（红色）。 边框线的宽度有三个标准值：thin（细线）、medium（中粗线）和thick（粗线）， 此外，也可以自定义宽度，如：1pt、5px、2cm等。 边框线的类型有九个确定值：none（无边框线）、 dotted（由点组成的虚线）、 dashed（由短线组成的虚线）、 solid（实线）、 double（双线，双线宽度加上它们之间的空白部分的宽度就等于border-width定义的宽度）、 groove（3D沟槽状的边框）、 ridge（3D脊状的边框）、 inset（3D内嵌边框，颜色较深）、 outset（3D外嵌边框，颜色较浅）， 注意：如果系统不支持这些边框的属性值，那么“dotted”、

文章目录 一、尺寸与颜色单位 1. 尺寸单位 2. 颜色单位 2. CSS 盒模型 1. 内容尺寸 2. 边框 1. 边框实现 2. 单边框设置 3. 网页三角标制作 4. 圆角边框 5. 轮廓线 6. 盒阴影 3. 内边距 4. 外边距 5. 元素最终尺寸的计算 一、尺寸与颜色单位 1. 尺寸单位 px 像素单位 % 百分比，参照父元素对应属性的值进行计算 em 字体尺寸单位，参照父元素的字体大小计算，1em=16px rem字体尺寸单位,参照根元素的字体大小计算，1rem=16px 2. 颜色单位 英文单词：red，green，blue rgb(r,g,b) 使用三原色表示，每种颜色取值0~255 rgba(r,g,b,alpha) 三原色每种取值0 255，alpha取值0（透明） 1（不透明） 十六进制表示：以#为前缀，分为长十六进制和短十六进制。 长十六进制：每两位为一组，代表一种三原色；每位的取值范围0 9，a f 例：red rgb(255,0,0) #ff0000 短十六进制：由3位组成，每一位代表一种三原色，浏览器会自动对每一位进行重复扩充，仍然按照长十六进制解析 例：#000 #fff #f00 2. CSS 盒模型 1. 内容尺寸 一般情况下，为元素设置width/height，指定的是内容框的大小 内容溢出：内容超出元素的尺寸范围，称为溢出

文章目录 border border-color border-style border-width border-方位 border-方位-类型 outline outline-color outline-style outline-width border-radius border-top-left-radius border-top-right-radius border-bottom-left-radius border-bottom-right-radius border-image border-image-source border-image-slice border-image-width border-image-outset border-image-repeat 属性 描述 版本 border 复合属性。设置边框的特性。 CSS1 border-color 设置边框颜色。 CSS1 border-style 设置边框样式。 CSS1 border-width 设置边框宽度。 CSS1 border-top/right/bottom/left 设置某个方位边框。 CSS1 border-top/right/bottom/left- color/style/width 设置某个方位边框某种样式。 CSS1 outline 复合属性。设置线条轮廓。 CSS2

没看 CSS （ Cascading Style Sheet ）之前，一直以为 CSS 挺难的，在网页上看到的那些代码一点都不知道代表些什么，晚上花了几个小时看了一下，发现也不过如此，而且好像属于超级简单的那种。有这种感觉不知道 CSS 真的是这样还是由于我孤陋寡闻的缘故。 其实我感觉学 CSS 只要知道 CSS 的类型就够了，然后看到不认识的标签 google 一下就可以了。不过如果要自己设计还是要了解一些里面的具体内容。计算机学到现在，我越来越感觉不管是做软件还是弄网站，就像是在玩搭积木的游戏，先要了解你要做什么东西，就像孩子们的志愿，我要造长城还是搭一个竖型塔亦或只是键一个小木屋就够了，然后孩子们会根据手上的积木材料来决定怎么去搭建自己的梦想，就像是我们根据不同的语言功能去拼凑我们的软件。感觉知识的模式都是这样，高中学做数学题目我也有这个感觉，我很少用参考书，一般总是先看看书本，给我提供了多少的定理、公式等，然后碰到题目就去套，总有一个会是正确的。运用知识不就是套用自己的学到过的知识的过程吗？想到这里我很后悔小时候没有玩过搭积木的游戏了！记得那个时候我应该还不知道搭积木是什么东西吧，不知道从什么时候才开始知道有这个名词，就是感觉等自己很大以后才知道！ 言归正传了， CSS 主要包括 3 种样式类型，即类选择器样式、 ID 选择器样式、重定义标记样式。 类选择器样式定义如下：

灵活的背景定位 难题 如果想要针对容器某个角对背景图片做偏移定位。如右下角，在CSS2.1中，我们只能指定距离左上角的偏移量，或者直接完全靠齐到其他三个角。但是，我们有时希望图片和容器的边角之间能留出一定的空隙（类似内边距的效果），以免得到如图效果： 对于具有固定尺寸的容器来说，使用CSS2.1来做到这一点事可能的，但很麻烦，基于它自身的尺寸以及我们期望它距离右下角的偏移量，计算出背景图片距离左上角的偏移量，然后再把计算结果设置给background-position。当容器元素的尺寸不固定时（因为内容往往是可变的），这就不可能做到了。网页开发者通常只能把background-position设置为某个接近100%的百分比值，以便近似的得到想要的效果。 但是，借助现代的CSS特性，我们已经拥有了更好的解决方案！ background-position的扩展语法方案 在 CSS背景与边框 中，background-position属性已经得到扩展，它允许我们指定背景图片 距离任意角的偏移量 ，只要我们在 偏移量前面指定关键字 。举例来说，如果想让背景图片跟右边缘保持20px的偏移量，同时与底部保持10px的偏移量，结果如图所示: background : url(img/1.jpg) no-repeat #58a ; background-position : bottom 10px

认识盒子模型 每个矩形都有元素的内容、内边距（padding）、边框(border)、外边距(margin)组成。 （1）网页是有多个盒子嵌套排列的结果。 （2）内边距出现在内容区域的周围，当给元素添加背景色或背景图像时，该元素的背景色或背景图像也将出现在内边距中。 （3）外边距是该元素与相邻元素之间的距离，如果给元素定义边框属性，边框将出现在内边距和外边距之间。 （4）虽然盒子模型拥有内边距、边距、外边距、宽和高这些基本属性，但是并不要求每个元素都必须定义这些元素。 边框属性 设置内容 样式属性 常用属性值 上边框 border-top-style:样式； border -top-width:宽度； border-top-color:颜色； bordet-top:宽度 样式 颜色 ； 下边框 border-bottom-style:样式； border-bottom-width:宽度； border-bottom-color:颜色； border-bottom:宽度 样式 颜色； 左边框 border-left-style:样式； border-left-width:宽度； border-left-color:颜色； border-left:宽度 样式 颜色； 右边框 border-right-style:样式； border-right-width:宽度； border

网页设计基础之CSS（三） 1.CSS的盒子模型 ①盒子模型的初步认识 Margin(外边距) - 与其它盒子的距离 Border(边框) - 手机盒子的厚度 Padding(内边距) - 填充泡沫的厚度 Content(内容) - 内容 注意：虽然盒子模型拥有外边距，边框，外边距，宽和高这些基本属性，但是并不要求每个元素都必须定义这些元素 ②盒子模型的相关属性 边框属性 1.样式综合设置： border-style:上边 右边 下边 左边 注意边框的顺序、如果样式为nomal或没有时，后续不可加属性 border-style的复合书写形式：上边 左右边 下边；上下边 左右边；上下左右边 2.设置边框宽度： border-width：上边宽度 右边宽度 下边宽度 左边宽度 注意边框的顺序 3.设置边框颜色： border-color：上边颜色 右边颜色 下边颜色 左边颜色 注意边框的顺序 边框透明色： transparent 或者 border-color：transparent 内边距属性 padding： 上内边距 右内边距 下内边距 左内边距 padding的相关属性的取值可为auto自动 外边框属性 当对块级元素应用宽度属性width，并将左右的外边距都设置为auto时，可使块级元素水平居中 .header { width : 100px ; margin : 0 auto

前面的话 　　在CSS出现之前，table元素常常用来布局。这种做法在HTML4之后不再推荐使用。而现在有些矫枉过正，使用table展示数据都可能会被说不规范。本文将详细介绍HTML表格table table 【默认样式】 //IE7-浏览器不支持border-spacing table{ 　　border-collapse: separate; 　　border-spacing: 2px; 　　border: 1px solid gray; } 【属性】 　　1、border(在html5中，border只能为"1"或" ")(html5已废弃) border="0"//没有边框 border="8"//8像素宽的边框 　　2、cellpadding(px/%)(html5已废弃) 　　规定单元边界与单元内容之间的间距 　　3、cellspacing(px/%)(html5已废弃) 　　 规定单元格之间的间距 　　4、summary(html5已废弃) 　　表格内容的摘要 　　5、width(html5已废弃) 　　 表格宽度 <table border="2" cellpadding="5" cellspacing="3" summary="测试表格" width="300"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td>

简洁型css圆角： 方法1： 简洁型css圆角矩形 code1: < style type ="text/css" > .b1,.b2,.b3,.b4,.b1b,.b2b,.b3b,.b4b,.b { display : block ; overflow : hidden ; } .b1,.b2,.b3,.b1b,.b2b,.b3b { height : 1px ; } .b2,.b3,.b4,.b2b,.b3b,.b4b,.b { border-left : 1px solid #999 ; border-right : 1px solid #999 ; } .b1,.b1b { margin : 0 5px ; background : #999 ; } .b2,.b2b { margin : 0 3px ; border-width : 2px ; } .b3,.b3b { margin : 0 2px ; } .b4,.b4b { height : 2px ; margin : 0 1px ; } .d1 { background : #F7F8F9 ; } .k { height : 300px ; } </ style > </ head > < body > < div > < b class ="b1" ></ b >< b class ="b2 d1" ></ b

【长度单位】 CSS可使用长度单位 单位 单位说明 范例 pt Point，就像是Word里面的Point一样大小 font-size:10pt px Pixels，依您屏幕分辨率而决定大小 font-size:10px pc Pica，6个Pica是一英吋 font-size:10pc mm 公厘，用过尺...这个设定值完全不会因为其它设定而改变 font-size:10mm cm 公分，不会因为使用者设定而改变 font-size:10cm % 百分比，大部分是指所在位置宽度或者长度百分比 font-size:10% 【颜色表示】 CSS可用颜色表示方式 表示方式 表示方式说明 范例 #rrggbb 可以用Windows色彩选择工具找到 color:#feefc7 rgb(#,#,#) 用数字来表示红色蓝色以及绿色的混合...也可以用Windows色彩选择工具找 color:rgb(135,255,124) rgb(%,%,%) 用百分比来代表红色蓝色以及绿色的强度来混合颜色 color:rgb(70%,35%,41%) 颜色名称 用颜色的名称来指定颜色 color:brown 【背景可用值】 CSS可用背景值 名称 说明 可能值 范例 background 背景 下面的背景设定值皆适用 background:fixed background-attachment