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 ...
一周排行
  • 3ds max是游戏开发当中使用的主流建模工具.美术人员在max建好的模型要放置到游戏的场景中去,有两种不同的选择:一是选择自由开放的max导出插件来导出模型(如3ds.obj等文件格式);二是使用自主开发的3ds ...
  • 下面软件站有很多,都是绿色版的卡巴斯基 [url]http://www.xia3.com/downinfo/896.html[/url]McAfee [url]http://www.xia3.com/downinfo ...
  • 今儿写脚本的时候发生了一件很诡异的事儿,一个脚本手动执行可以正常用邮件发送中文,放在crontab下就没戏.最诡异的是,放在我ubuntu上就没事儿,在centos下就不行.经过一番gg,原来问题出在系统字符集上.我 ...
  • 在界面设计中,一个容器要放置许多组件,为了美观,为组件安排在容器中的位置,这就是布局设计.java.awt中定义了多种布局类,每种布局类对应一种布局的策略.常用的有以下布局类:FlowLayout,依次放置组件.Bo ...
  • i=$((i+1))sleep 1donewhile loop 的原理与 for loop 稍有不同:它不是逐次处理清单中的变量值,而是取决于 while 后面的命令行之 return value : * 若为 tu ...
  •  linux下添加路由的方法: 一:使用 route 添加使用route 命令添加的路由,机器重启或者网卡重启后路由就失效了,方法://添加到主机的路由# route add –host 192.168.168.11 ...
  • 注:文章中的内容大部分是在网络上搜索得到,通过自己实际修改和配置,能达到所需目的,特将步骤记录下来,以便以后使用.linux centos下配置mysql主从同步的步骤:一.主机环境主机:master操作系统:cen ...
  • 分析微博推广网站的六个技巧    微博可以说是当前互联网最热门的一个应用模块了,利用微博进行网站推广的人也不在少数!那么如何利用好微博做网站推广呢?!下面福州seo维思和大家分析微博推广网站的六个技巧!        ...
  • <Connector port="8080" protocol="HTTP/1.1"                connectionTimeout="200 ...
  • 记从安装centos系统在到使用mono3.2部署MVC过程遇到的问题
    一.安装虚拟机并安装配置系统 我不太愿意去下载vmware就用系统里面自带的Hyper-V ...