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 ...
一周排行
  • Dropbox官方中文版最优秀实用的免费跨平台文件网络同步网盘云存储服务
           很不幸的,昨晚发现我的台式机又死机了,硬盘灯不闪烁,Num lock键也无任 ...
  • 6.mail.sh#bin/bashlog=$1      t_s=`date +%s`    t_s2=`date -d "2 hours ago" +%s`    if [ ! -f /tmp ...
  •  看到了一篇好文章,转了过了,做了些简单的翻译.如果你部署的Exchange环境中的负载均衡或防火墙不能处理动态的RPC端口,那么你将要在CAS服务器上给RPC客户端连接服务和地址薄服务定义静态端口.如果你使用了公共 ...
  •                          squid透明代理的安装与实现1.安装squid服务软件[root@localhost ~]# cd /media/Server/[root@localhost Se ...
  •  在原来的基础上添加了日志管理模块,输出屏幕的同时也记录文件,方便查看日志信息:dbbackup.py#!/usr/bin/python#coding:utf-8import subprocess import ti ...
  • 目录服务:数据库+如何访问数据的协议WIN2000包含两个不同的目录服务:DNS和LDAPDNS(Domain Name System)域名系统,基本功能就是把域名映射为机器的IP地址A记录 MX记录 LDAP(Li ...
  • 以下介绍的是一些在Linux系统编译安装环境时常见的一些故障处理方法,这些错误是本人以前在搭建各种环境遇到过的错误,都是一些缺少安装相关组件,并用yum方式解决. ^_^系统:Centos 5.51.Configur ...
  • 安装centos6.3使用自动推荐分区,发现一个问题/home 分区过大,超过了1.1T.[root@localhost ~]# df -h 文件系统              容量  已用  可用 已用%% 挂载点 ...
  • 迅达云成之行
    上周,在老男孩老师的安排下,我们全班参观了迅达云成公司.首先,对老男孩老师及迅达云成公司表 ...
  • 介绍 对于ASP.NET开发者,理解ASP.NET的页面生命周期是非常重要的.主要是为了搞明白在哪里放置特定的方法和在何时设置各种页面属性.但是记忆和理解页面生命周期里提供的事件处理方法(method)非常困难.互联 ...