1.简介:border属性在CSS1中就已经定义了,用来设置元素边框风格,设置不同的边框、颜色、粗细

2.基本属性,包括三个类型值:
(1)border-width:设置元素边框的粗细,默认3~4px
(2)border-color:设置元素边框的颜色,默认色就是字体颜色
(3)border-style:设置元素边框的类型,默认【none】
缩写语法:border:border-width border-style border-color;
注:缩写后每个属性之间使用空格隔开,它们之间没有先后顺序

3.在Web实际制作之中,CSS中border可以给不同的边设置不同的风格,其遵守【TRBL】原则(Top/Right/Bottom/Left),单独写法:
border-top-style(设置元素顶部边框类型)
border-right-style(设置元素右边边框类型)
border-bottom-style(设置元素下边边框类型)
border-left-style(设置元素左边边框类型)
同理:border-color和border-width都可以单独设定
注:这种单独设定方式,分为四种情况:(1)一个值的时候,表示四条边设定相同(2)两个值的时候,第一个值表示上下边,第二个值表示左右边(3)三个值的时候,第一个值表示上边,第二个值表示左右,第三个值表示下边(4)四个值得时候,遵循上、右、下、左,顺时针方向设定
超级组合大法:li{border:solid 1px red;border-width:1px 0;},仅两行代码就表达出元素li顶部和底部都以一条1px的红色实线。这样方便维护代码,并且提升CSS性能
超级组合大法引起的思考:突然觉得灵光一闪,自己天天使用border可以说达到了游刃有余的地步,但是自己却从来没有分类的去思考过它,真是万分惭愧,写下来与大家共勉
(1)元素设置一条描边:这种情况使用border-T/R/B/L方法设置为优
(2)元素设置两条描边(位置为对立或相连):这种情况使用组合大法为优
(3)元素设置三条描边:这种情况使用组合大法为优
(4)元素设置四条描边:这种情况使用组合大法为优
当然还有这些是在描边都一样的前提下,不一样的时候就分别给不同的属性使用T/R/B/L就可以了
总结:以后对于问题的思考应该分层次,分类,从不同的角度审视

4.边框的类型:border-style值列表

上面11个值在各浏览器下呈现的效果均有差异,其中最不可预测的边框样式是double,两条线的宽度和线之间的宽度无法确定。而dotted、dashed、outset和inset在不同的浏览器下也无法保证一致

CSS3边框还有哪些:border-image、border-radius、box-shadow

5.border-radius设置
遵循TRBL规则(Top/Right/Bottom/Left),可以设置1、2、3、4种值,是圆的四分之一
eg:border-radius:60px 40px 30px 20px;
单独设置水平和垂直半径值:(是椭圆的四分之一)
border-radius:60px 40px 30px 20px / 30px 20px 10px 5px;

6.特殊应用
(1)border-radius还有一个内半径和外半径的区别,元素边框值较大时,效果就很明显。当border-radius半径值小于或等于border的厚度时,元素边框内部就不具有圆角效果

元素的内半径 = 外半径 -边框宽度

(2)第二种是,元素相邻边有不同的宽度,这个角将会从宽的边平滑过渡到窄的一边,其中一条边甚至可以是0,元素相邻转角是由大向小转

还有,图片应用圆角,表格应用圆角,其实可以不用border-width,直接多增加一层就可以避免border-width和border-radius两者之间的矛盾

(3)兼容性

制作圆(设置4个属性)、半圆(设置两个属性)、扇形(设置一个属性)、椭圆(x/y)

7.box-shadow
可以当border使用,没有内外半径之分,并且不计算在结构中;
多层阴影用逗号【,】分开

兼容IE8以下版本,可以使用IE的滤镜进行模拟:

filter:progid:DXImageTransform.Microsoft.Shadow(color="颜色值",Direction=阴影半径(数值),Strength=阴影半径(数值))

CSS3边框温故的更多相关文章

  1. HTML 学习笔记 CSS3 (边框)

    CSS3边框 通过CSS3边框 你能够创建远角边框 向矩形边框添加阴影 使用图片来绘制边框 . CSS3的边框属性 主要包含以下几种 border-radius 边框圆角 box-shadow 边框阴 ...

  2. [HTML] CSS3 边框

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

  3. css3 边框记

    css3 边框 border属性在css1中就已经定义了,使用它可以设置元素的边框风格,边框颜色以及边框粗细. border-width:设置元素边框的粗细. border-color:设置元素边框的 ...

  4. CSS3 边框

    说明:CSS3完全向后兼容,因此不必改变现有的设计.浏览器通常支持CSS2 CSS3模块 CSS3被划分为模块: 选择器 框模型 背景和边框 文本效果 2D/3D 转换 动画 多列布局 用户界面 CS ...

  5. 第八十节,CSS3边框图片效果

    CSS3边框图片效果 学习要点: 1.属性初探 2.属性解释 3.简写和版本 本章主要探讨HTML5中CSS3中边框图片背景的效果,通过这个新属性让边框更加的丰富多彩. 一.属性解释     CSS3 ...

  6. css3边框与背景

    一.css3边框 1.border-image 边框 border-image: url(xxx.png) number stretch 很好理解就是拉伸,有多长拉多长. repeat (和4角上 同 ...

  7. 第95天:CSS3 边框、背景和文字效果

    1.CSS3边框: border-radius:CSS3圆角边框.在 CSS2 中添加圆角矩形需要技巧,我们必须为每个圆角使用不同的图片,在 CSS3 中,创建圆角是非常容易的,在 CSS3 中,bo ...

  8. CSS3 边框 圆角 背景

    CSS3用于控制网页的样式布局. CSS3是最新的CSS标准.   关于transform: transform:rotate(10deg);//顺时针方向旋转10° 浏览器支持情况:低版本的IE浏览 ...

  9. CSS3边框border-radius

    一.官方解释 设置或检索对象使用圆角边框.提供2个参数,2个参数以“/”分隔,每个参数允许设置1~4个参数值,第1个参数表示水平半径,第2个参数表示垂直半径,如第2个参数省略,则默认等于第1个参数. ...

随机推荐

  1. vs2010 rdlc .net4.0 卸载 Appdomain 时出错。 (异常来自 HRESULT:0x80131015) 解决办法

    网上一看Appdomain出错,绝大部分都是说控件加载错误.经测试在.net 4.0环境下 rdlc报表很容易发生卸载 Appdomain 时出错. (异常来自 HRESULT:0x80131015) ...

  2. CAS认证原理图

  3. 使用GROUP BY统计记录条数 COUNT(*) DISTINCT

    例如这样一个表,我想统计email和passwords都不相同的记录的条数 CREATE TABLE IF NOT EXISTS `test_users` ( `email_id` ) unsigne ...

  4. c# dataGridview的Cellclick移除事件

    private void gvMoldInfo_CellClick(object sender, DataGridViewCellEventArgs e) { ) return; string col ...

  5. 纯CSS画的基本图形(矩形、圆形、三角形、多边形、爱心、八卦

    http://css-tricks.com/examples/ShapesOfCSS/

  6. 聊聊 if else 那些事

    从这周起,公司技术部每周五组织一次内部的技术分享,日常工作中,发现大家对if掌握的不是很好,今天先来聊聊if. 一.场景 简历的价格是根据专业的父Id设定的,下面根据简历Id获取简历的价格. /// ...

  7. php -- strstr()字符串匹配函数(备忘)

    Learn From: http://blog.csdn.net/morley_wang/article/details/7859922 strstr(string,search) strstr() ...

  8. 免费下载!Twitter Bootstrap V3 矢量界面素材

    Bootstrap 3 Vector UI Kit 包含所有矢量格式的 Twitter Bootstrap 3 界面控制元素.Glyphicons 以及额外的一些界面素材,而且基本的图形元素都切好图了 ...

  9. Entity Framework优缺点及使用方法总结

    Entity Framework是M$提供的一个ORM框架,它旨在为小型应用程序中数据层的快速开发提供便利. nuget上185W多的下载量,说明.Net开发人员还是比较喜欢用EF的.但是EF在提供了 ...

  10. 手动测试——MTM

    在Test Manager中,测试计划用于管理某个迭代的整个测试工作.包括测试用例.测试结果,计划测试的配置. Test Center分为4个主要活动区域: Plan---用于管理整个测试计划,包括计 ...