CSS3边框温故

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值列表

CSS3边框温故

上面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的厚度时,元素边框内部就不具有圆角效果

CSS3边框温故
CSS3边框温故

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

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

CSS3边框温故
CSS3边框温故

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

(3)兼容性

CSS3边框温故

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

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

CSS3边框温故

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

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

更多相关文章
  • CSS3边框阴影
    CSS3边框阴影实例:<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS3边框阴影</title> <style>  d ...
  • 利用css3选择器及css3边框做出的特效(1)
    利用border-radius及box-shadow制作圆角表格 界面效果图如下: css样式如下所示: * { margin: 0; padding: 0; } body { padding: 40px 100px; } .demo { width: 600px; margin: 40px aut ...
  • CSS3文本温故
    1.CSS早期属性,分为三大类:字体.颜色和文本: 2.CSS文本类型有11个属性: 注:还有一个颜色属性:color,主要用来设置文本颜色 3.CSS3文本阴影属性:text-shadow语法:text-shadow:none | <length> none | [<shadow ...
  • CSS3基本知识
    1.CSS3 简介 CSS 指层叠样式表 (Cascading Style Sheets),用于控制网页的样式和布局,CSS3 是最新的 CSS 标准. 在网页制作时采用层叠样式表,可以有效的对页面的布局.字体.颜色.背景和其他效果实现更加精确的控制,只要对相应的代码做一些简单的修改,就可以改变同一 ...
  • CSS3 为 Web 开发带来了非常令人兴奋的变化,特别是在 CSS 3D 转换.动画等特性的支持,可以轻松的创建很酷的 Web 效果. 在这篇文章中我们介绍 11 个使用 CSS3 和 jQuery 实现的特效,很酷.使用 jQuery 和 CSS 实现的放大镜效果简单而惊人的CSS3边框过渡效果 ...
  • CSS魔法堂:重拾Border之——图片作边框
    前言  当CSS3推出border-radius属性时我们是那么欣喜若狂啊,一想到终于不用再添加额外元素来模拟圆角了,但发现border-radius还分水平半径和垂直半径,然后又发现border-top-left/right-radius的水平半径之和大于元素宽度时,实际值会按比例分配元素宽度时, ...
  • chrome 利用chorme调试手机网页 Chrome控制台 JS调试的一些小技巧 chrome使用技巧(看了定不让你失望) 我所了解的chrome 你可能不知道console强大 CSS3精典 css3新增属性API CSS收集的常用代码(与打印相关) CSS3动画(性能篇) css编写规范 C ...
  • Bootstrap_列表组
     一.基本列表组 列表组是Bootstrap框架新增的一个组件,可以用来制作列表清单.垂直导航等效果,也可以配合其他的组件制作出更漂亮的组件. <ul class="list-group"> <li class="list-group-item&quo ...
一周排行
  • 人生的路上有许许多多的十字路口,迷茫.孤独.失败在所难免,不管自己再怎么改变,也不要忘记那个我.对自己的忠告. 难是多做的理由,而不是不做的理由. 当你以为看透事情的本质,或许你只不过是盒子中的盒子. 一路上,同行的 ...
  • 在整合ssh过程中出现的问题和解决方法:一.严重: Servlet /loginssh threw load() exceptionjavax.servlet.UnavailableException: Parsin ...
  •    今天十号教学楼打来电话说不能上网了,而且是整栋楼都不可以了,过去一看老师的电脑获得的IP地址为192.168网段的非法地址,第一念头就是这个办公室使用了宽带路由导致获得非法IP地址,但是经过检查发现他们使用的不 ...
  • liteide使用中的注意点 无法跳转 会出现无法跳转的情况,可能是这个包里面的某个文件会有错误,一般把这个包里的所有的错误都改正之后就能正常跳转了.Ubuntu中,直接按f2可以跳入,之后按住alt+左右键,可以向 ...
  • Hibernate系列之ID生成策略
    一.概述 hibernate中使用两种方式实现主键生成策略,分别是XML生成id和注解方式 ...
  • Magicodes.NET框架之路——让代码再飞一会ASP.NETScaffolding
    首先感谢大家对Magicodes.NET框架的支持.就如我上篇所说,框架成熟可能至少还需要 ...
  • 4. 访问url  http://localhost/py/t.py/handler 注意url要访问到模块的方法中. 5. 高级知识 5.1. 原生(native)mod_python处理器   <Direc ...
  • 第九章 触发器第一节:触发器的引入触发器(TRIGGER)是由事件来触发某个操作.这些事件包括 INSERT 语句.UPDATE 语句和 DELETE 语句.当数据库系统执行这些事件时,就会激活触发器执行相应的操作. ...
  • 所有的TCP/IP调优参数都位于/proc/sys/net/目录. 例如, 下面是最重要的一些调优参数, 后面是它们的含义: 1. /proc/sys/net/core/rmem_max - 最大的TCP数据接收缓冲 ...
  • 1. 内核模式下的字串操作A.ASCII字符串和UNICODE字符串B.ANSI_STRING字符串和UNICODE_STRING字符串C.字符串的初始化与销毁D.字符串复制,比较,(大小写,整数和字串)相互转换E. ...