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. 配置NAT回流导致外网解析到了内网IP

    单位有3个域名,用量很大,2014年开始本人研究部署了Bind+DLZ +Mysql的三机智能多链路DNS,非常好用,优点是: 1.使用Mysql管理记录,配置.管理.查询方便. 2.自动判断运营商, ...

  2. Xamarin.Forms中的ListView的ItemTrapped事件与ItemSelected事件的区别

    今天对Xamarin.Forms中的ListView的两个事件(ItemTrapped和ItemSelected)做了小小的研究,发现有以下几点区别: 1.ItemTrapped事件会优先被触发. 2 ...

  3. Android 使用版本控制工具时添加忽略文件方式

    一.使用SVN管理项目时,添加忽略文件的方式 Android Studio 配合SVN时,添加忽略文件相对简单,首先打开项目的Settings选项,切换到Version Control下的Ignore ...

  4. JavaScript进阶内容1:各种对象类型判断

    该文章主要用来介绍JavaScript中常用的一些对象检测判断方法,整理资源来自书本和网络,如有错误或说明不详之处,望评论提出,本菜定提名感谢……(本文章知识比较基础,大牛请提些意见再绕道,三克油^_ ...

  5. [Shell] 读取脚本路径

    以下是几种在 Shell 中读取路径的方法. 返回当前工作目录绝对路径 echo $(pwd) 返回 shell 第一个参数.如果被执行对象位于 PATH 路径中,则返回该对象绝对路径:否则返回被执行 ...

  6. LeetCode-Maximum Product of Word Lengths

    Description: Given a string array words, find the maximum value of length(word[i]) * length(word[j]) ...

  7. [linux]删除目录下的一类文件

    find 目录 -name "*.类型" | xargs rm -f 通过find命令,查找指定目录下的某一类型的文件.并通过管道传递给xargs,执行后面的rm -f命令. 最终 ...

  8. PEP8 Python 编码规范

    一 代码编排1 缩进.4个空格的缩进(编辑器都可以完成此功能),不使用Tap,更不能混合使用Tap和空格.2 每行最大长度79,换行可以使用反斜杠,最好使用圆括号.换行点要在操作符的后边敲回车.3 类 ...

  9. Android学习笔记之使用百度地图实现路线规划+公交信息检索

    PS:装了个deepin,感觉真的很高大上. 学习内容: 1.公交信息检索 2.路线规划   关于百度地图的开发也就这么多了.重要的部分也就那么些.原本打算搞到poi搜索就算了,不过看到了这两个方面还 ...

  10. .Net魔法堂:史上最全的ActiveX开发教程——部署篇

    一.前言 接<.Net魔法堂:史上最全的ActiveX开发教程——发布篇>,后我们继续来部署吧! 二. 挽起衣袖来部署   ActiveX的部署其实就是客户端安装ActiveX组件,对未签 ...